Fan's Tech Blog

CSS Overview

# CSS Overview

# What is CSS?

CSS = Cascading Style Sheets

CSS is a rule-based language -- we define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on the web page.

A CSS stylesheet will contain many such rules, written one after the other.

selector {
    property: value;
}

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

p {
    color: black;
}

# How to add CSS

# External stylesheet

Adding CSS to our HTML document is easy. Include the CSS rules in a file such as style.css. Then link the stylesheet somewhere inside the <head> of the HTML document.

<link rel="stylesheet" href="styles.css" />

# Inline style

Inline styles are CSS declarations that affect a single HTML element, contained within the style attribute of the element.

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
    Hello css
</h1>

We should avoid using CSS in this way if possible. Not a good practice.

  1. Poor maintenance: one styling change might require multiple edits within a single web page.
  2. Hard to read: mixing presentation code (CSS) with HTML makes it difficult to understand.

# Shorthands

Some properties like font, background, padding, border, and margin are called shorthand properties. They set several values in a single line.

For example,

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
container {
    padding: 10px 15px 15px 5px;
}

is equivalent to these four lines of code:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

# Selectors

A selector targets HTML element(s) to apply styles to content. Each CSS rule starts with a selector or a list of selectors.

Here are some examples of some valid selectors:

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

To learn more about selectors and how to combine them to target specific element(s). Jump to the Selectors post.

# How CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages.

  1. The browser loads the HTML.
  2. It converts the HTML into a DOM. The DOM represents the document in the computer's memory.
  3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and even linked CSS. JavaScript is handled a big later on in the process.
  4. The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on.
  5. Based on the selectors it find, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required. This step is called a render tree.
  6. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
  7. The visual display of the page is shown on the screen. This step is called painting.

browser_render_steps

CSS Selectors