Selectors
* | All elements. |
div | All div tags. |
div, p | All divs and paragraphs. |
div p | Paragraphs inside divs. |
div > p | All p tags, one level deep in div. |
div + p | Paragraph tags immediately after div. |
div ~ p | Paragraph tags preceded by div. |
.classname | All elements with class. |
#idname | Element with ID. |
div.classname | Divs with certain classname. |
div#idname | Div with certain ID. |
#idname * | All elements inside #idname. |
Pseudo Classes
a:link | Link in normal state. |
a:active | Link in clicked state. |
a:hover | Link with mouse over it. |
a:visited | Visited link. |
Common Properties
align-content | Behavior of the flex-wrap property. |
align-items | Alignment for items inside the container. |
background-color | Sets the background color. |
background-image | Sets the background as image. |
border | Sets all border properties in one line. |
border-collapse | Collapses the border. |
border-style | Sets the border the style. |
color | Text color. |
font-family | Font of the element. |
font-size | Font size of text. |
height | Height of the element. |
margin | Set the top, right, bottom and left margins in one line. |
padding | Padding between the element border and content. |
text-align | Horizontal alignment of text. |
text-decoration | Overline, underline or line-through the text. |
visibility | Visibility:hidden elements leave a gap. |
width | Width of an element. |
Display & Positioning
display | Determines the type of render block for an element. The most common values for this property are block, inline, and inline-block. |
float | Determines how far left or how far right an element should float within its parent element. |
position:absolute | Removes an element entirely from the document flow. |
position:fixed | Set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. |
position:relative | Enables an element to be positioned relative to where it would have originally been on a web page. |
z-index | Specifies how far back or how far forward an element will appear on a web page when it overlaps other elements. |
Colors
rgba() hsla() | Alpha values determine the transparency of colors in CSS. |
#ff0000 | Hexadecimal (or hex) notation. Hexadecimal digits can represent sixteen different values using 0-9 and a-f. |
hsl() | This syntax contains three values: hue (the color value itself), saturation (intensity), and lightness. |
rgb() | Should be supplied with three values representing red, green, and blue. These values range can from 0 to 255. |
Typography
font-weight | Declares how thick or thin should be the characters of a text. |
font-style | Determines the font style in which text will appear. |
@font-face | Allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. |
line-height | Declares the vertical spacing between lines of text. |