Skip to content

This is one of our old lessons! Visit the Path page to see all of our latest courses.

To view all of the 300+ tutorials on Simple Dev, sign up for a 10-day free trial below.

CSS Basics


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.


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.


Table of Contents


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">



/* 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.


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.


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;


  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;


  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;


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 {}


p:pseudo-class {}

Useful HTML Elements

div element

<div class="my-class">
  <p>The heading element and this paragraph will share similar styles.</p>

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

  p {
    color: red;

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 */


.flex-container {
  display: flex;


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

CSS Concepts

The cascade

Learn how the cascade affects how CSS rules are applied.


Learn how specificity affects how CSS rules are applied.


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!