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.

Tutorials

Table of Contents

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

Understanding the style rule syntax*

Learn how to understand the style rule syntax used in 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;

Selectors

Element selector

p {}

Multiple elements selector

h1, h2, p {}

Class selector*

.class-name {}

ID selector

#id-name {}

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.

* work in progress

** coming soon!

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.