CSS Basics

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.

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!