CSS

Syntax

• CSS consists of selectors and declarations
• A selector selects an HTML element, while a declaration sets the style for the element

selector {
  property: value;
}

Selectors

Selectors	Description
element	selects an HTML element
#id	selects an element with a specific ID
.class	selects an element with a specific class
*	selects all elements
selector1, selector2	selects multiple elements

Combinators

Combinators	Description
selector1 selector2	selects an element inside another element
selector1 > selector2	selects direct children of an element
selector1 + selector2	selects the next sibling of an element
selector1 ~ selector2	selects all siblings of an element

Pseudo-classes

Pseudo-classes	Description
:hover	selects an element when the mouse hovers over it
:active	selects an element when it is being clicked
:visited	selects a link that has been visited
:focus	selects an element when it has focus
:first-child	selects the first child element of its parent
:last-child	selects the last child element of its parent
:nth-child(n)	selects the nth child element of its parent
:not(selector)	selects all elements that do not match the selector

Declarations

property: value; | sets the style for an element

Text

Text	Description
color	sets the text color
font-size	sets the font size
font-family	sets the font family
font-weight	sets the font weight
text-align	sets the text alignment
text-decoration	sets the text decoration
text-transform	sets the text case

Box Model

Box Model	Description
width	sets the width of an element
height	sets the height of an element
margin	sets the margin around an element
padding	sets the padding inside an element
border	sets the border around an element

Display

Display	Description
display	sets the display style of an element
visibility	sets the visibility of an element
float	sets the float of an element
clear	clears the float of an element

Positioning

Positioning	Description
position	sets the positioning type of an element
top	sets the top position of an element
bottom	sets the bottom position of an element
left	sets the left position of an element
right	sets the right position of an element
z-index	sets the stacking order of an element

Background

Background	Description
background-color	sets the background color of an element
background-image	sets the background image of an element
background-position	sets the background position of an element
background-repeat	sets the background repeat of an element

For more information, check out the Mozilla Developer Network's CSS documentation.