bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS

CSS

Reference and Practice

Examples, snippets, quizzes, and references for reinforcement and lookup.

Lesson 1

CSS Templates

CSS Layout Templates We have created some responsive starter templates with CSS. You are free to modify, save, share, and use them in all your projects. Header, equal columns and footer: Try it (usin…

2 min
Read lesson →
Lesson 2visual

CSS Reference

CSS Properties A accent-color Specifies an accent color for user-interface controls align-content Specifies the alignment between the lines inside a flexible container when the items do not use all a…

18 min
Read lesson →
Lesson 3

CSS Examples

CSS Syntax CSS syntax explained CSS Selectors CSS selectors explained CSS How To / Where To CSS how to explained CSS Comments CSS comments explained CSS Colors CSS colors explained CSS Backgrounds CS…

3 min
Read lesson →
Lesson 4visual

CSS Selector Reference

CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. Use our CSS Selector Tester to demonstrate the different selectors. CSS Simple Selectors The simple sel…

2 min
Read lesson →
Lesson 5visual

CSS Online Editor

CSS Editor With our online CSS editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser. body { background-color lightblue ; } h1 { color white ; text-align center ; }…

2 min
Read lesson →
Lesson 6visual

CSS Combinators Reference

CSS Combinators A combinator is a sign that explains the relationship between selectors. The table below shows the different combinators in CSS: Name Sign Example Example Result Child combinator > di…

2 min
Read lesson →
Lesson 7

CSS Snippets

CSS Snippets Have you ever seen a cool feature on a website and thought "How do they do that"? We have collected a bunch of CSS snippets that you can use in your projects, for free: Image Text Blocks…

2 min
Read lesson →
Lesson 8visual

CSS Pseudo-classes Reference

CSS Pseudo-classes A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element. Some common use for pseudo-classes: Style an element when a us…

4 min
Read lesson →
Lesson 9

CSS Quiz

You can test your CSS skills with W3Schools' Quiz. The Test The test contains 25 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don'…

2 min
Read lesson →
Lesson 10visual

CSS Pseudo-elements Reference

CSS Pseudo-elements A CSS pseudo-element is used to style specific parts of an element. For example, it can be used to: Style the first letter or line, of an element Insert content before or after an…

2 min
Read lesson →
Lesson 11

CSS Exercises

Test your CSS skills with exercises from all categories: /151 done Syntax 6 exercises Open Done Selectors 6 exercises Open Done Selectors Grouping 3 exercises Open Done How To 4 exercises Open Done H…

6 min
Read lesson →
Lesson 12visual

CSS At-rules Reference

CSS At-rules CSS at-rules are statements that instruct CSS on how to behave. Each at-rule begins with an @ followed by a name. The table below shows the different at-rules in CSS: At-rule Description…

2 min
Read lesson →
Lesson 13

CSS Code Challenges

Test your CSS skills with code challenges from all categories: Code Challenges Loading challenges... About Code Challenges Code challenges are interactive coding exercises where you write CSS code to…

2 min
Read lesson →
Lesson 14visual

CSS Functions Reference

CSS Functions CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS pr…

5 min
Read lesson →
Lesson 15visual

CSS and HTML Website Hosting

Create a Website with HTML and CSS Host Websites with W3Schools Spaces Get Started for Free Practice Coding Skills kAI AI Tutor Build Projects Host Securely Choose your Plan By subscribing to a plan…

4 min
Read lesson →
Lesson 16visual

CSS Aural Reference

Aural Style Sheets Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information. Aural presentation can be used: b…

2 min
Read lesson →
Lesson 17

CSS Syllabus

Introduction The W3Schools CSS Tutorial is comprehensive and beginner-friendly. It will give you a fundamental knowledge of CSS. It is designed for beginners and requires no prior experience with pro…

2 min
Read lesson →
Lesson 18visual

CSS Web Safe Fonts

CSS Web Safe Fonts

3 min
Read lesson →
Lesson 19

CSS Study Plan

Introduction The CSS study plan helps you teach your students CSS step-by-step. Creating a study plan for CSS is easy. You can use a pre-built study plan or customize it. Students have different skil…

2 min
Read lesson →
Lesson 20visual

CSS Animatable

Definition and Usage Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size,…

3 min
Read lesson →
Lesson 21

CSS Interview Preparation

CSS Interview Preparation

3 min
Read lesson →
Lesson 22visual

CSS Units

CSS Units

3 min
Read lesson →
Lesson 23

W3Schools CSS Bootcamp

W3Schools CSS Bootcamp

2 min
Read lesson →
Lesson 24visual

PX to EM Conversion

PX to EM Conversion

2 min
Read lesson →
Lesson 25

W3Schools CSS Certificate

W3Schools CSS Certificate

2 min
Read lesson →
Lesson 26visual

CSS Colors

Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different…

5 min
Read lesson →
Lesson 27visual

CSS Legal Color Values

CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser colo…

4 min
Read lesson →
Lesson 28visual

CSS Default Values Reference

CSS Default Values Reference

4 min
Read lesson →
Lesson 29visual

CSS Browser Support Reference

CSS Reference With Browser Support The table below lists all CSS properties and how each property is supported in the different browsers: The number to the right of the browser icon indicates in whic…

10 min
Read lesson →