CSS - Introduction | Knowledge Kitchen

# Intro to Cascading Style Sheets

styling the content of a web page

---

# Agenda

1. [Overview](#overview)
1. [Separation of Concerns](#separation)
1. [Setup](#setup)
1. [Selectors](#selectors)
1. [Rules](#rules)
1. [Sizing Units](#sizing-units)
1. [More Selectors](#more-selectors)
1. [Conclusions](#conclusions)

---

# Overview

---

Cascading Style Sheets (CSS) is used to indicate the visual presentation of the content on a web page.

- What color(s) each element should be
- What font should be used
- The position of each element on the page
- The spacing between elements
- etc

---

# Separation of Concerns

---

The **separation of concerns** is a philosophy popular in technology that different tasks should be accomplished by different technologis. With regards the Web:

- The semantic content should be controlled by Hypertext Markup Language (HTML)
- The visual presentation of content should be controlled by Cascading Style Sheets (CSS)
- The interactive behavior of content should be controlled by Javascript (JS)

---

# Setup

---

## Including CSS into an HTML document

There are three ways that stylsheets can be included into an [HTML](../html) document:

- external stylesheet file
- internal style element
- inline style attribute

---

## External stylesheet file

The **preferred** method. Put style sheet code in a separate file and link to that file from the HTML document.

- place CSS files into a subdirectory named `css`.

A `link` element should be nested within the `head` element of your HTML document.

```html
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    ...
  </head>
  ...
</html>
```

---

## External stylesheet file (continued)

Now you can write CSS code into that separate file and it will be applied to the content in the HTML document.

```css
p {
  background-color: pink;
}
```

---

## Internal style element

A **discouraged** method. Put style sheet code into a `style` element within the HTML document.

A `style` element should be nested within the `head` element of your HTML document.

```html
<html lang="en">
  <head>
    <style>
      p {
        background-color: pink;
      }
      ...;
    </style>
    ...
  </head>
</html>
```

---

## Inline style attribute

A **discouraged** method. Put style sheet code into a `style` attribute inside any HTML tag.

- There is no need for selectors when using this method.

This attribute would be added to any elements within the `body` of the document.

```html
<html lang="en">
  ...
  <body>
    <p style="background-color: pink;">Lorem ipsum dolor sit amet</p>
    ...
  </body>
</html>
```

---

# Selectors

---

## Concept

Out of all the elements on a page, a selector picks those that will be styled by a given block of code.

For example, the following code selects for any and all `p` paragraph elements on the page and gives them a blue font color.

- The `p` is the 'selector', `color: blue;` is a 'rule'.

```css
p {
  color: blue;
}
```

---

## Selecting by tag name

Selectors can select by tag name:

Select all `p` elements and make the text within blue.

```css
p {
  color: blue;
}
```

Select all `img` elements and make the text within blue.

```css
img {
  width: 200px;
  height: 200px;
}
```

---

## Selecting by id attribute

Selectors can select by a _unique_ identifier optionally given to a particular element:

- HTML `id` attribute values must be unique - no two elements can share the same `id` value.

For example, given the following HTML code:

```html
<img id="donkey" src="images/donkey.jpg" />
```

---

## Selecting by id attribute (continued)

The following CSS code would select for just this one `donkey` image.

```css
img#donkey {
  width: 200px;
  height: 200px;
}
```

This can be rewritten to select for an element of any type with the id `donkey`.

```css
#donkey {
  width: 200px;
  height: 200px;
}
```

---

## Selecting by class attribute

Selectors can select by a _non-unique_ `class` optionally given to particular elements:

- HTML `class` attribute values _need not be unique_, but they can be if applied to only one element.

For example, given the following HTML code:

```html
<ul>
  <li class="odd">Tomatoes</li>
  <li class="even">Bananas</li>
  <li class="odd">Yuccas</li>
  <li class="even">Beets</li>
</ul>
```

---

## Selecting by class attribute (continued)

The following CSS code would select for only the `even` list items.

```css
li.even {
  background-color: pink;
}
```

This can be rewritten to select for elements of any type with the class `even`.

```css
.even {
  background-color: pink;
}
```

---

# Rules

---

## Concept

Rules are changes to a style property, applied to whichever element(s) have been selected.

- Each rule indicates the name of a property to be changed, and the new value to assign to it.

For example, the following CSS code contains three rules necessary to control the border of an element.

```css
header {
  /* the following three lines are rules */
  border-width: 1px;
  border-color: black;
  border-style: solid;
}
```

---

## Changing color

There are several properties related to color changes, including:

- `color` - the text color applied to text within the selected element(s)
- `background-color` - background color applied to the entire area of the selected element(s)
- `border-color` - the color of any border applied to the selected element(s)

Example:

```css
footer {
  color: black;
  background-color: #c0c0c0;
  border-color: blue;
  /* the other two border-related properties are necessary to show a border */
  border-width: 2px;
  border-style: dotted;
}
```

---

## Changing text

There are several properties related to text or font changes, including:

- `color` - the text color applied to text within the selected element(s)
- `font-family` - the font to be used for any text within the selected element(s)
- `font-size` - the size of the text can be specified in a variety of units (pt, px, etc)
- `text-decoration` - used to apply any `underline` or `overline` to the selected text
- `font-weight` - whether text is `bold`, `normal`, or `light`

Example:

```css
p#first {
  color: purple;
  font-family: helvetica;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline;
}
```

---

## Changing sizing and spacing

There are a few properties related to text or font changes, including:

- `width` - the width of an element
- `height` - the height of an element
- `margin` - the spacing _external_ to an element
- `padding` - the spacing _internal_ to an element

Example:

```css
aside {
  margin: 10px;
  padding: 20px;
  width: 400px;
  height: 600px; /* as a general rule, don't set the height of an element like this... let the height auto-adjust to fit the content within the element */
}
```

---

## More rules

There are many more properties to style... once you get the hang of the basic style properties we've discussed, learn some more.

- Try the [W3Schools.com CSS Tutorial](https://www.w3schools.com/css/default.asp)

---

# Sizing Units

---

## Concept

Whenever a CSS property has a _size_ - a width, a height, a margin, a font size - that size is written as a number followed by a **unit**.

```css
p {
  font-size: 16px;
  margin: 1em;
  width: 50%;
}
```

- CSS supports many different units. Each one has a different _origin_ and a different _meaning_.

- Choosing the right unit affects how a page responds when the user resizes the window, zooms in, or views the page on a different device.

---

## Absolute units: `px`, `pt`, `in`, `cm`

**Absolute units** have a fixed size that does not depend on anything else on the page.

- **`px`** is short for **"pixel"** - originally meaning a single tiny dot of light on a computer screen. On modern high-resolution screens, CSS treats `1px` as an _abstract_ unit roughly equal to a single dot at a comfortable viewing distance.

- **`pt`** is short for **"point"** - a unit borrowed from print typography, where 1 point = 1/72 of an inch. You will see this most often in word processors.

- **`in`** and **`cm`** are inches and centimeters - rarely used on screens, but useful when designing pages meant to be printed.

- Absolute units are predictable but inflexible. A heading sized in `px` will be the same size whether the visitor is reading on a phone or a giant TV.

---

## Font-relative units: `em` and `rem`

**Font-relative units** scale with the size of the text on the page.

- **`em`** gets its name from **the letter "M"** - in old typography, the capital `M` was as wide as it was tall, so type designers used "an em" to mean "the height of the current font."

- In CSS today, **`1em` means "the current font size of the parent element."** So `font-size: 2em` makes text twice as big as the surrounding text.

- **`rem`** stands for **"root em"** - the font size of the _root_ element of the page (the `<html>` element).

- `rem` is generally preferred because it is _not_ affected by how deeply nested an element is. `1rem` always means the same thing, no matter where on the page you use it.

```css
html { font-size: 16px; }
h1 { font-size: 2rem; }  /* always 32px */
p { font-size: 1rem; }    /* always 16px */
```

---

## Viewport units: `vw`, `vh`

**Viewport units** scale with the size of the browser window itself. The browser window is called the _viewport_, which is where these units get their `v`.

- **`vw`** stands for **"viewport width"**. `1vw` equals 1% of the browser window's _width_.

- **`vh`** stands for **"viewport height"**. `1vh` equals 1% of the browser window's _height_.

- So `width: 50vw` means "half as wide as the browser window," and `height: 100vh` means "exactly as tall as the browser window."

- Viewport units are especially useful for hero banners, full-screen sections, and any element that should always relate to the size of the window rather than to the page content.

---

## Percentage units: `%`

The percentage unit, **`%`**, expresses a size as a percentage of the _parent element's_ size for that same property.

```css
article {
  width: 80%;   /* 80% of the parent's width */
  padding: 5%;  /* 5% of the parent's width */
}
```

- Percentages are most useful for widths and heights in layouts that need to stretch and shrink with their container.

- Be careful: percentages mean _different things_ for different properties (e.g. `padding: 5%` is measured against the parent's _width_, not its height).

---

## Which should I use?

There is no single right answer, but here are some rules of thumb:

- Use **`rem`** for font sizes and most spacing - this lets users with vision difficulties enlarge the entire page just by changing their browser's font size setting.

- Use **`%`** for widths of layout containers that should stretch with their parent.

- Use **`vw`** or **`vh`** when something should scale with the _window_ rather than the page content.

- Use **`px`** for small fixed details like borders (`border: 1px solid black`) where exact size matters.

- Avoid mixing too many different units in the same project, or your page will be hard to predict and maintain.

---

# More Selectors

---

## Compound selectors

The following will apply the same set of rules to both `header` and `footer` elements:

- Note the use of the comma - `,`.

```css
header,
footer {
  background-color: #00ff00;
}
```

Here's another example with a mix of different kinds of selectors:

```css
section#first,
aside.nonesense,
p {
  background-color: #00ff00;
}
```

---

## Nesting selectors

The following will apply the rules to any `p` paragraph element within an `article` element.

- Note the use of the space.
- Note that `article` elements do not have their styles changed by this.

```css
article p {
  background-color: #00ff00;
}
```

Another example with a mix of different selector types:

```css
article#featured p.green {
  background-color: #00ff00;
}
```

---

## Direct descendent selectors

Given the following HTML code:

```html
<article class="featured">
  <h2>Something Important</h2>
  <p>Lorem ipsum dolor sit amet....</p>
  <aside>
    <h3>A Side Note</h3>
    <p>Twas brillig and the slithy toves...</p>
  </aside>
</article>

<article>
  <h2>Something Else</h2>
  <p>Lorem ipsum dolor sit amet....</p>
</article>
```

---

## Direct descendent selectors (continued)

The following CSS selector would only select the `p` paragraph that is nested directly within the `article` with the class `featured`, not any other paragraph.

- Note the use of the greater than sign, `>`.

```css
article.featured > p {
  background-color: #00ff00;
}
```

---

# Conclusions

---

You now have a basic understanding of the purpose of CSS, its syntax, and some of the common selectors and rules.

- Thank you. Bye.