Summary
Below you will find a collection of tutorials on the basics of CSS, the stylesheet language.
Before You Start
These tutorials assume you have a basic understanding of HTML.
Exercises
You can download exercises to go along with these tutorials on our CSS exercises repository on GitHub. Just click the green Code button in the corner and click the Download ZIP option.
Tutorials
Table of Contents
- Introduction
- Syntax
- Values
- Properties
- Selectors
- Useful HTML elements
- Other ways of writing CSS
- Intermediate topics
- CSS concepts
- Building Projects
Introduction
Why should I use CSS?
Learn why you should use CSS.
Creating and saving a CSS file
The file extension for CSS files is .css
.
Linking an external CSS file to an HTML file
<link rel="stylesheet" href="main.css">
Syntax
Comments
/* A comment in CSS */
Basic syntax
Learn how to understand the style rule syntax used in CSS.
Common syntax problems
Learn about common mistakes made when writing CSS.
Values
Color values
You can use RGB, hexadecimal, HSL, or keyword values for colors in CSS.
Length units
The most common length units in CSS are px, percentages, ems, rems, vh, and vw.
Properties
Text color
color: red;
Background color
background-color: red;
Font properties
font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 2;
font-family: Arial, sans-serif;
Border properties
border-width: 1px;
border-style: solid;
border-color: red;
border-radius: 4px;
Margins
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Padding
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Text align
text-align: center;
Text transform
text-transform: uppercase;
Letter spacing
letter-spacing: 10px;
Text shadow
text-shadow: 1px 1px 1px green;
Box shadow
box-shadow: 1px 1px 1px 1px green;
Selectors
Element selector
p {}
Class selector
.class-name {}
ID selector
#id-name {}
Selector list
h1, h2, p {}
Child selector
.class-name > p {}
Descendant selector
.class-name p {}
Pseudo-classes
p:pseudo-class {}
Useful HTML Elements
div element
<div class="my-class">
<h1>Group</h1>
<p>The heading element and this paragraph will share similar styles.</p>
</div>
span element
<p>The span element is used to <span class="my-class">style text inside</span> of another element.</p>
Other ways of writing CSS
Internal stylesheet
<style>
p {
color: red;
}
</style>
Inline styles
<p style="color:red;">Paragraph text with a style attribute.</p>
Intermediate topics
Custom properties
:root {
--main-color: red;
}
p {
color: var(--main-color);
}
Media queries
@media screen and (min-width: 576px) {
p {
/* add properties here */
}
}
Flexbox
.flex-container {
display: flex;
}
Grid
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
CSS Concepts
The cascade
Learn how the cascade affects how CSS rules are applied.
Specificity
Learn how specificity affects how CSS rules are applied.
Inheritance
Learn how inheritance affects how CSS rules are applied.
!important keyword
p {
color: red !important;
}
Building projects
HTML and CSS project structure
Learn how to structure an HTML and CSS project.
CSS Project
Practice your CSS skills with this project.
* work in progress
** coming soon!