element { property: value; } #id { property: value; } .class { property: value; }
color: red; background-color: blue; font-size: 16px; padding: 10px; margin: 10px; border: 1px solid black; text-align: center; font-family: Arial, sans-serif; font-weight: bold; text-decoration: underline; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0.5;
:hover { property: value; } :active { property: value; } :focus { property: value; } :visited { property: value; } :first-child { property: value; } :last-child { property: value; }
content-box: width/height only affects content area border-box: width/height includes content, padding, and border
px: pixels em: relative to font-size of parent rem: relative to font-size of root element vh: viewport height vw: viewport width %: percentage of parent
display: flex; flex-direction: row/column; justify-content: center; align-items: center; flex-wrap: wrap; flex: 1; order: 1;
display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-gap: 10px; grid-row: 1/3; grid-column: 1/3;
@media (max-width: 768px) { property: value; } @media (min-width: 768px) and (max-width: 1024px) { property: value; }
@keyframes my-animation { from { property: value; } to { property: value; } } animation-name: my-animation; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards;
transition: property duration timing-function delay; transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay;
Font Family font-family: Arial, sans-serif; Font Size font-size: 16px; Font Weight font-weight: bold; Font Style font-style: italic;