Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are used to style and animate

  • 🌍 Websites
  • 🖥️ Desktop applications (Electron/JavaFX/...)
  • 📱 Mobile applications (Android XML layouts/...)
  • ...

Where to learn?

CSS versions

⚠️ CSS selectors/rules are now modularized, so CSS3 is the last CSS version. You should refer to caniuse to see what properties/... are supported, and "CSS4"/CSSDB for potential new features.


Some CSS tools

🚀 CSS frameworks 🚀

As CSS rules can be complex (responsive design, accessibility), many CSS frameworks with predefined rules were created.

Based on Material Design (Google UX Guidelines)

🏫 About CSS 🏫

CSS files (.css) are defining rules to apply on a target called selector. A rule is made of a property, and its value.

Example: Links should have the color blue. Every text in bold should have a yellow background. 

a {
    color: yellow;
}

b {
    background: blue;
}
  • Selector: Links (a) and texts in bold (b)
  • Rule
    • Property: color, or background
    • Value: yellow, or blue

Notes

  • 🔎 One rule per line is a good practice
  • 🔎 The semicolon (;) is mandatory (unless there is only one rule)

Specificity

Styles are applied in cascade! There could be many selectors that are defining a rule that could be applied to the same tag.

If there are conflicts (ex: two selectors defining the same property), the Specificity is used to determine which rule is applied. In a nutshell, every selector has a weight (~=how specific the selector is) which is used to determine which rule is more important.

a { color: yellow; }
a:hover { color: red; } /* will override the other */

➡️ You can use !important to manually force a style to be applied.

a { color: yellow !important; }
a:hover { color: red; } /* won't override the other */

Getting started

There are 3 ways to write CSS for a website.

Inline CSS 🤮STYLE tag 🤢External CSS file 😍

You can use the attribute style to add inline CSS. It's convenient for testing.

<p style="background: darkcyan">
    ...
</p>

You can use <style> tags. They are usually added in the head, but you can add them everywhere.

<style>
    p {
        background: darkcyan;
    }
</style>

You can link an external CSS file. This is the proper way to do it (CSP policy+caching, CDNs, SoC...).

<link rel="stylesheet"
      href="/path/to/style.css">

⚠️ Note: Modern browsers are usually caching CSS files. If you changed a file, and don't see any changes, reload the page while ignoring the cache: CTRL+SHIFT+R or SHIFT+F5 or CTRL+F5.

Selectors

A selector is a target, or a set of targets, on which the style will be applied. ➡️ To test a selector, we usually change the background. If the background changes, it means that the selector works.

YOUR_SELECTOR_HERE {
    background: yellow;
}

Tag selector

The style will be applied to every element having this tag.

<p>xxx</p>

p { /* ... */ }

ID selector

The style will be applied to the tag having the matching ID.

<p id="my-id">xxx</p>

#my-id { /* ... */ }

Class selector

The style will be applied to any tag having this class.

<p class="name ...">xxx</p>

.name { /* ... */ }

Universal selector

The style will be applied to every element.

<p>xxx</p>

* { /* ... */ }

Property/Attribute selector

We can select something based on them having a property.

<p hidden>xxx</p>

[hidden] { /* ... */ }

We can select something based on the value of a property.

<input type="text" />
<path d="16 95 3"/>

[type="text"] { /* ... */ }
[d~="95"] { /* ... */ }

Pseudo-selectors

They are additional selectors based on a state/condition. These are called Pseudo-classes. See the complete list on W3Schools.

:hover { /* mouseover */ }
:not(p) { /* every tag aside from "<p>" */ }
:not(p, a) { /* [...] aside from "<p>" and "<a>" */ }
:is(h1, h2) { /* either h1 or h2 */ }
:first-child { /* [ ... ] */ }
:nth-child(0) { /* [ ... ] */ }
:last-child { /* [ ... ] */ }

➡️ There are also Pseudo-elements providing access to a fake element. They start with :: such as ::first-line.


👉 Chain selectors

We can chain any selectors!

<p class="one two">xxx</p>
<input type="text" hidden>xxx</input>

p.one.two { /* ... */ }
input[type="text"][hidden] { /* */ }

➡️ Using .name is the same as *.name...


🛣️ Combinators

They can apply a selection based on the structure of the page.

div, a { /* applied on both "div" and "a" */ }
div > a { /* "links" having a "div" as parent */ }
div a { /* "links" having a "div" as ancestor */ }
p + a { /* an adjacent "link" right after a "p" */ }

➡️ Obviously, you can use any selectors instead of a, p, and div.

🥂 Properties Values 🥂

Properties (ex: background) are taking values (ex: a color).

Colors

You can use rgb, rgba (alpha=transparency), a hexadecimal code...

.x {
    background: red; /* alias to a color */
    background: rgb(255, 0, 0); /* red */
    background: rgba(255, 0, 0, 0.8); /* lighter red */
    background: #dd4441; /** hexadecimal code **/
}

Sizes

You must provide a value, and a unit.

.x {
    width: 10px; /* px = pixels */
    margin: 0; /* no unit needed */
    height: 100%; /* a percentage */
}

Calculations

You can only do some calculations inside calc.

.x {
    width: calc(100% - 15px);
}

Variables

:root {
    --primary-color: red;
    --p1: 10px;
}
p {
    color: var(--primary-color);
    padding: var(--p1); /* usage */
}

🔎 Properties 🔎

👻 I'm not too familiar with CSS, these examples are properties that I used before moving to CSS frameworks. 👻

Background

.xxx {
    background: yellow; /* change background */
    background: url("..."); /** path/URL **/
    /* if it's an image, you may use */
    background-size: 100% 100%; /* expand */
    background-size: auto; /* auto */
    background-size: cover; /* cover */
    background-repeat: repeat;
    /* mix of rules */
    background: url("...") no-repeat fixed;
}

Colors

.xxx {
    color: #FFDD33; /* text color */
}

Fonts

.xxx {
    font-size: 15px; /* font size */
    /* the second/... are fallback fonts (if not found) */
    font-family: "Open Sans", sans-serif;
    font-weight: 400; /* bold, light, lighter, ... */
}

Display

.xxx {
    display: block; /* show */
    display: none; /* hide */

    overflow:hidden; /* hide */
    overflow:auto; /* show a scroll bar */

    opacity: 1;

    position: absolute; /* relative, fixed */
    /* set a specific value */
    top: 0; left: 0; right: 0; border: 0;
    z-index: 1; /* on top = the highest z index */
}

Text utilities

.xxx {
    line-height: 50px; /* ... */
    text-align: justify; /* center, left, right, ... */
    text-decoration: underline #dd4441; /* add underline */
    text-decoration: none; /* remove underline */
    white-space: pre-line; /* multiline */
}

Size, Margins, Padding

.xxx {
    width: 5px; /* width */
    height: 5px; /* height */

    padding: 15px; /* all */
    padding: 15px 5px; /* y=15, x=5 */
    /* top, right, bottom, left */
    padding: 15px 5px 15px 5px;
    padding-bottom: 15px; /* one by one */
    /* you can use the 4 above with margin */
    /* and, you have this "new" value */
    margin: auto;
}

Alignment

.xxx {
    justify-content: center;
    align-self: center;
    align-items: center;
    float: left;
    float: right;
}

Borders

.xxx {
    /* add border, size=1px, type=solid and black */
    border: 1px solid #202735;
    border-radius: 4px; /* round corners */
}

Random

.xxx {
    cursor: pointer; /* change cursor */
    list-style-type: circle; /* change list style */
    list-style-type: none; /* change list style */
}

Responsive design & Accessibility

You should adapt your website according to

  • 👉 the browser (browser-specific CSS properties)
  • 👉 the screen size (media queries, responsive sizes...)
  • 👉 the mode (light/dark) (media queries)
  • ...

Adapt to the size of the screen

First, you need to add one of these lines in your head, to make the website automatically adapt itself to the size of the screen.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Then, in your CSS, you can write CSS code that will only be executed when the condition of the media query is fulfilled.

@media screen and (max-width: 950px) {}
@media screen and (max-width: 1100px) and (min-width: 950px) {}

Light/Dark theme

In modern browsers, there is a media query to detect the theme.

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">

➡️ The CSS files are intended to be used to define variables in :root, which will be used by another CSS file, such as main.css.

You can add a media query directly inside the CSS too.

@media screen and (prefers-color-scheme: dark) { }
@media screen and (prefers-color-scheme: light) { }

👻 To-do 👻

Stuff that I found, but never read/used yet.

Random