CSS Cheat Sheet - Day 1

These are the notes I wrote for my students.

It can be useful if you want to go over CSS very quickly.

Please also see the next CSS Cheat Sheets.
For the next CSS Cheat Sheet please search "CSS Cheat Sheet - Day 2"

CSS Course - Day 1

/*
CSS Syntax:
Selector {Declaration}
Selector {property:value;}
*/

- Element Selector
p {
color: red;
}

- ID Selector
#id {
color: red;
}

- Class Selector
.className {
color: red;
}

- Element + Class Selector
p.className {
color: red;
}

- Element + ID Selector
p#id {
color: red;
}

- Universal Selector
* {
color:red;
}

- Backgrounds
p {
background-color: red;
background-image: url("image.png");
background-repeat: no-repeat; /* repeat */
background-position: left top;
background-attachment: scroll; /* fixed */
}

- Background shorthand full
p {
background: red url("image.png") no-repeat left top;
}

- Background shorthand only color
p {
background: red;
}

- Border
p {
border-style: solid; /* solid, dotted, dashed, none */
border-width: 1px;
border-color: red;
}
- Border shorthand
p {
border: 1px solid red;
}

- Margin
- All sides
p {
margin: 10px;
}

-
Top and Bottom = 10px
Left and Right = 20px

p {
margin: 10px 20px;
}

-
Top = 10px
Right = 20px
Bottom = 30px
Left = 40px
It goes clockwise

p {
margin: 10px 20px 30px 40px;
}

- We can also specify individual sides
p {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

- Padding
It's exactly same as margin, just replace margin with padding