Cascading Style Sheets¶
Learning outcomes
- Identify the advantages of applying Cascading Style Sheets.
- Apply Cascading Style Sheets.
- Create websites by separating content from presentation.
- Learn techniques to content layout
Contents
- Introduction to Cascading Style Sheets.
- Types of Cascading Style Sheets.
- Generic structure of a CSS document
- Rules of style
- Selection criteria, properties and values.
- Inheritance and precedence.
- Box model.
- Flexible box model.
- Grids with CSS
Assessment criteria
- The advantages of using style sheets have been identified.
- Style sheets have been applied.
- The rules of style have been understood.
- Layouts have been designed using the flexible box and grid model
Introduction¶
Syntax¶
Selectors¶
Games
How to add CSS¶
Comments¶
Colors¶
Backgrounds¶
Box Model¶
Additional resources:
- CSS Box Model explained with examples by Freecodecamp
- CSS Battle
- The box model by MDN
Text and fonts¶
Layout - float and clear¶
Additional resources¶
- Mozilla Firefox add-on: Pixel Perfect Pro helps developers and designers to make best sites and more high quality products.
- CSS 3 cheat sheet