CSS
Cascading Style Sheets. The language used to style HTML pages.
Learn
- #todo Flexbox: https://flexboxfroggy.com
Notes
- Prefixes:
#for ids,.for classes, none for tags. - Distance units:
px- absolute,em- relative to font size. - Descendant combinator (
tag1 tag2): match all children. - Child combinator (
tag1 > tag2): match only direct children. - Fonts: serif (classic, more official), sans-serif (modern, more casual).
- Fill an image into container:
max-width: 100%; max-height: 100%. - Simple debug:
border: 1px solid red.
Best practices
- Use
max-widthinstead ofwidthto avoid horizontal scrollbars on small screens.
Defaults
1em is 16px.
Header sizes:
| Tag | Size (em) | Size (px) |
|---|---|---|
| h1 | 2em | 32px |
| h2 | 1.5em | 24px |
| h3 | 1.17em | 18.72px |
| h4 | 1em | 16px |
| h5 | 0.83em | 13.28px |
| h6 | 0.67em | 10.72px |
Colors
Named:
Frameworks
See also
- Minimal CSS: https://jgthms.com/web-design-in-4-minutes
- 2 color combinations: https://2colors.colorion.co