CSS

Cascading Style Sheets, Why?

HTML has been designed to describe a document's content but not it's display.

Formatting tags (<b>, <br>, <i>) should not be used.

CSS should be used instead.

Separation of Concerns: CSS allows separation of content and design.

CSS is quite powerful

https://codepen.io/davidkpiano/pen/kkpGWj

How it works

1. Writing CSS

CSS syntax is basically composed of selectors, properties and values.

selector {

    /* Comment your CSS! */
    property: value;
    ...

}
  • The selector: allows you to select which elements in the page are concerned by this styling.

  • The property: is the the styling property you want to control.

  • The value: is the value you want to set on the property.

Example

p {
    color: red;
    text-align: center;
}

2. Loading CSS

Except if you are using a framework, CSS is generally loaded using the HTML <link> tag.

<head>
    <link href="/assets/style.css" rel="stylesheet" type="text/css">
</head>

Last updated