# Introduction to CSS (Cascading Style Sheets)

In the early days of the web, people used to style their pages using explicit styling tags such as `<font>`, `<center>` and `<strike>` (all of which have long been **deprecated** and should never be used today). This was inflexible, difficult to maintain, and conflated _presentation_ with the document structure.

CSS emerged in the mid-90s as a way to make styling webpages easier. It's core idea was to replace explicit styling in HTML with _styling rules_ which could be applied to multiple elements; this would have the benefits of (a) reducing duplication, and (b) separating styling instructions from content.

CSS works by selecting some group of elements (using a special reference called a **selector**) and defining a set of properties and values to apply to that group of elements. The general syntax for this is:

```css
selector {
  property: value;
  property: value;
}
```

A specific example is

```css
p {
  font-size: 24px;
  color: white;
  background-color: green;
  border-bottom: 5px solid red;
}
```

#### Adding CSS to a Webpage

To add CSS to a page, either include it

1. Inline, within an element.
2. Between two `<style>` tags, typically in the the `<head>` of the document.
3. **Most Common** In a separate file referred to by a `<link>` tag, also typically in the the `<head>`. The syntax for using a `<link>` tag is `<link rel="stylesheet" href="...">` where 'href' is set to the location of the desired stylesheet.

#### Basic Selectors

There are many different types of selectors you can use (See the table below). For now let's keep it simple and try out one or two selectors.

| Selector                | Name                |
| ----------------------- | ------------------- |
| `p`, `h1`               | Element selector    |
| `#container`            | ID selector         |
| `.todo-item`            | Class selector      |
| `.ancestor .descendant` | Descendant selector |
| `.parent > .child`      | Child selector      |

#### Properties

There are many, many CSS properties available to us. We will touch on a few properties, but we'll also want to get comfortable searching for what we need using the [CSS property documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index).

**Colour**

We can declare the colour of text inside a given element with the `color` property. To declare background colour, we can use `background` or `background-color`.

```css
h1 {
  /* Sets font color to black using a hex code */
  color: #000000;
  /* Sets background color to white using a hex code */
  background-color: #ffffff;
}
```

There are 6 different ways to specify colour in CSS. They are: keyword, hexadecimal, RGB, RGBA, HSL, and HSLA. All of these formats are reduced to RGB/A by the browser. In general, we want to use hexadecimal colours, whenever we aren't specifying transparency using the _alpha channel_ provided in the RGBA or HSLA formats.

You will most often see the use of hex codes, or hexadecimal codes, which represent the red, green, and blue values of the colour using letters and numbers.

You don't need to memorise these codes, instead there are many resources to use to find the hexadecimal code of a given colour, such as the [MDN Color Keywords Hex Code Table](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#color_keywords).

**Fonts**

We set fonts using the `font-family` property. In addition to the built-in fonts, you can also find fonts using Google Fonts or other services.

When defining a font, you can use family names, such as `'Garamond'`, or generic names, like `serif`.

```css
p {
  /* Sets the font-family to use 'Garamond'. If that font cannot be loaded,
  uses the generic serif font as a default. */
  font-family: 'Garamond', serif;
}
```

We don't know what fonts are installed on our users' computers, so we always specify a generic font family as a back up (i.e., `san-serif` or `serif`). The generic should be the last in the list of supplied `font-family` values. Note that specific font names are quoted, but the generic is not.

```css
p {
  /* If there's no Roboto available try Arial
    If there's no Arial use the default sans-serif
    font installed on the system.
  */
  font-family: "Roboto", "Arial", sans-serif;
}
```

Font sizes are controlled using the `font-size` property. `px` is a common unit in CSS (we will learn more of them in a future class). `px` sets an absolute pixel size.

```css
p {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 24px;
  font-weight: bold;
}
```

We can set the boldness of a font using the [`font-weight` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) using values of `normal`, `bold`, `lighter`, `bolder`, and numeric values (read the docs for how the numbers correspond to the weight of a font).

```css
p {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 24px;
  font-weight: bold;
}
```

#### Styling Lists

We can change the bullet style of HTML lists using the [`list-style-type` property](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type). The value can be `disc`, `circle`, `square`, any quoted text (like an emoji), and more.

```css
ul {
  list-style-type: "🦆 ";
}
```
