Table of Contents

CSS Basics

CSS (Cascading Style Sheets) is used to control exactly how HTML elements look in the browser.

You can use CSS to style individual elements such as text, as well as lay out entire sections of a web page. It can also be used in more advanced ways, such as adding animation to a page.

The CSS language is organized into modules, containing related functionality.

ex: backgrounds and borders module

CSS is a rule-based language. Rules are defined by applying groups of styles to a specific element or group of elements.

For example, you could style your h1 headings to be big and red:

h1 {
  color: red;
  font-size: 5em;
}

The above example shows some common CSS syntax:

• the line hi { is a selector - it selects the HTML element that the rules will apply to (in this case, <h1> headings.
• one or more declarations are contained within curly braces.
  • Declarations take the form of property-value pairs, ex color: red;
  • Declarations ends in a semicolon

How is CSS applied to HTML?

A browser goes through several stages when loading a document to display:

1. The browser loads the HTML, and then parses it, storing it in a tree-like data structure called a DOM (Document Object Model) Tree.
2. The browser loads the CSS (along with any other resources linked by the HTML) and and categorizes the CSS rules based on which HTML elements they are applied to.
3. The fully laid out page shown on the screen (this is called painting)

Understanding this is helpful because the browser DevTools allow you to view the DOM as you select items, which can help design and debug CSS.

Take the following HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>