(click anywhere to close)

The CSS3 Guide

category: Website | course: CSS3 | difficulty:
1. Table of Contents

CSS is the programming language for layout and design, and it stands for Cascading Style Sheets. Style sheets refer to the CSS files that tell a browser how to style certain elements, while cascading simply means that the browser chooses which rules to apply depending on their syntax and placement. (Don’t worry, the concept of cascading is explained in detail in the Priorities & Inheritance chapter.)

You’ve probably just learned HTML, and are eager to know how you can make all those tags look good. Well, this is the guide for you! You can do virtually anything with CSS, and most of the functionality is supported in all major (‘modern’) browsers. In fact, you’ll spend much more time playing with CSS than HTML when building a website.

You want some nice colours? CSS! You want animations when hovering over something? CSS! You want different fonts and typography? You get the idea. CSS is simple, clear, capable – there’s really no reason not to learn it.

CSS3 is the latest version of this amazing language, and probably the last one. Why?! Because since this version, all functionality is created as modules. These modules can be adopted by browsers one at a time, and all fit nicely together, which means the language keeps growing and growing. Therefore, even though this is the third version of CSS, you should just look at it as being the only CSS there is. This guide will try to talk you through everything that is CSS. But, as that is a bit much, the focus lies on the basics and the most commonly used functionality. There’s only one fundamental syntax, which means that most of the chapters just show you different ways to fill it in, instead of introducing completely different concepts. Have fun!

Table of Contents

  1. Linking CSS & HTML
  2. Syntax
  3. Selectors
  4. Priorities & Inheritance
  5. Colours & Units
  6. The Box Model
  7. Margin, Padding & Dimensions
  8. Border
  9. Display
  10. Positioning
  11. Alignment
  12. Text
  13. Fonts
  14. Backgrounds & Images
  15. Lists, Tables & Links
  16. Pseudo-classes
  17. Pseudo-elements
  18. Shadows
  19. Gradients
  20. Transforms
  21. Transitions & Animations
  22. Responsive Design
  23. Flexbox
  24. Multicolumn
  25. Counters & Filters
  26. Media Queries
  27. Conclusion: what now?


No previous post :( [CSS3] Linking CSS & HTML
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk