CSS
selector {
property: value;
property: value;
}
h1 {
color: darkblue;
font-size: 32px;
text-align: center;
}This heading is styled by the h1 rule
A normal paragraph.
- Selector: which elements to style (
h1). - Declaration block: everything inside
{ }. - Declaration: one
property: value;pair. Always end with a semicolon. - Comments:
/* this is a comment */
Common values and units
| Type | Examples |
|---|---|
| Colour names | red, tomato, navy |
| Hex | #ff0000, #0a3d62 |
| RGB and RGBA | rgb(255,0,0), rgba(0,0,0,0.5) (last is opacity) |
| HSL | hsl(200, 70%, 50%) |
| Absolute length | px |
| Relative length | %, em (relative to parent font size), rem (relative to root font size), vw and vh (percent of viewport width and height) |
Frequently used properties
| Group | Properties |
|---|---|
| Text | color, font-family, font-size, font-weight, font-style, text-align, text-decoration, text-transform, line-height, letter-spacing |
| Background | background-color, background-image, background-size, background-repeat, background-position |
| Box | width, height, margin, padding, border, border-radius, box-shadow |
| Display | display, visibility, overflow, opacity |
| Position | position, top, left, right, bottom, z-index |
The box model. Every element is a rectangular box made of four layers, from inside to outside: content, padding (space inside the border), border, margin (space outside).
CSS
* { box-sizing: border-box; } /* width includes padding and border: much easier maths */
.card {
width: 300px;
padding: 20px; /* all four sides */
border: 2px solid #333;
margin: 10px 20px; /* top-bottom 10px, left-right 20px */
}
/* Shorthand order for 4 values: top right bottom left (clockwise) */I am a .card. My width (300px) already includes the padding and the border.
Text after the card.
Block versus inline. Block elements (div, p, h1) take a full line and accept width and height. Inline elements (span, a) flow within text and ignore width and height. display: inline-block combines both. display: none hides an element completely.