For more information on each part - press on title name, eg. press "Selectors" to see more on this topic.
| Selectors | type | class | ID | universal selector | attribute | attribute selector | pseudo-class selector | . for class | # for ID | * for universal selector | eg. attribute selector [href] | : for pseudo class | Attribute selectors list: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax |
|---|---|---|---|
| Chaining | combining multiple selectors | eg. h1.special {} | this will select only the <h1> elements with a class of special | |
| Descendant Combinator | selecting descendants (elements that are nested within other HTML elements) | eg. .main-list li {} | .main-list selects the element with the.main-list class (the <ul> element). The descendant li‘s are selected by adding <li> to the selector, separated by a space. This results in .main-list li as the final selector. | |
| Property | Values | Units | |
| Typography | font-family | "name" | |
| @font-face | path to the font’s source for local fonts | url for Google fonts | Example: @font-face {font-family: "name"; src: url('...)} | |
| font-size | px | em | vw | | ||
| font-weight | bold | normal | 'numeric' | for numeric (100 to 900) | |
| font-style | normal | italic | oblique | ||
| line-height | unitless numbers | px | ||
| word-spacing | normal | length | initial | inherit | for length px and other | |
| letter-spacing | normal|length|initial|inherit | px | other for length | |
| text-align | left | right | center | justify | initial | inherit | ||
| color | name | hexadecimal | rgb() | hsl() | rgba() | hsla() | for rgb (0 to 255) | for hsl (0 to 255 value plus 2 values in %) | for a (0.0 to 1.0) | |
| Background | background-color | transparent | initial | inherit | "color" | same as for color property |
| background-image | none | url() | linear-gradient(color1, color2) | linear-gradient(deg, color1 color2); | ||
| Display and positioning | margin | auto | px |
| padding | inherit | % | length values | |
| border | width | style | color | various | |
| overflow | visible | hidden | scroll | ||
| z-index | positive or negative integers | ||
| position | static | relative | absolute | fixed | ||
| display | block | inline | inline-block | ||
| float | left | right | ||
| clear | left | right | none | ||
| Other | cursor | auto | default | none |