CSS Basics

class: middle, center

# CSS

---
class: middle, center

---
class: middle, center

[CSS Zen Garden Examples](http://www.csszengarden.com/)

---

# .eight[Cascading Style Sheets]

- ~~programming language~~
- ~~markup language~~
- style sheet language
- declarative statements about style

---
count: false

# .eight[Cascading Style Sheets]

- ~~programming language~~
- ~~markup language~~
- style sheet language
- declarative statements about style
- overriding browser's default style

---

# CSS Syntax

- .eight[Rulesets]: Groups of rules to effect some HTML
- .eight[Selectors]: The HTML tags that the rules are targeting
- .eight[Declarations]: The rules
- .eight[Properties]: The attribute we are changing
- .eight[Values]: The style we are changing it to

---
class: middle

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

---

# Anatomy of a .eight[Ruleset]

---
class: middle, center

# .fourteen[But where do we write it?]

---

# Inline Style

```html
<body>
  <p style="color: red;">red paragraph</p>
</body>
```

---

# Internal Stylesheet

```html
<head>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>
```
---

# External Stylesheet

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

---
class: middle, center

# .eleven[Always use External Stylesheets.]

---
class: middle, center

# .fourteen[Let's Try It!]

---

# .eight[Selector]

Pattern at the start of the ruleset by which the browser will match, or select, all the elements that should be styled by the rulset.

---

# .eight[Declaration]

A single rule specifying a value for an element's property.

---

# .eight[Properties]

All of the attributes on a given element that you can style.

---

# .eight[Property Values]

All of the possible appearances for a given property.

---

# CSS Syntax

- Each ruleset is wrapped in curly braces: `{}`
- Separate the property from its value(s) with a colon: `:`
- Separate each declaration with a semicolon: `;`

---

# Multiple Declarations

```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```

---

# Multiple Selectors

```css
p, a, h1 {
  color: red;
}
```

---
class: middle, center

# .fourteen[So how do I style _some_ of my paragraphs?]

???
There's different selector types.

---

# .eight[Element Selector]

All HTML elements of the specified type.

```css
p {...}
```
Selects all `<p>` elements.

---

# .eight[Class Selector]

All elements on the page with the specified class.

```css
.my-class {...}
```
Selects `<p class="my-class">` _and_ `<a class="my-class">`

---

# .eight[ID Selector]

The single element on the page with the specified ID.

```css
#my-id {...}
```
Selects `<p id="my-id">` _or_ `<a id="my-id">`

.eleven[Do NOT overuse.]

---

# .eight[Attribute Selector]

All elements on the page with the specified attribute

```css
img[alt] {...}
```
Selects `<img src="logo.jpg" alt="Some Alt Text">` but _not_ `<img src="logo.jpg">`

---

# .eight[Attribute Selector]

...or attribute value

```css
input[type="radio"] {...}
```
Selects `<input type="radio">` but _not_ `<input type="text">`

---

# .eight[Pseudo-class Selector]

The specified element, but only when it's in the specified state.

```css
a:hover {...}
```

Selects `<a>` but only when the cursor is hovering over the link.

---

# Advanced Topic

[Learn More Selector Types](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)

- Pseudo-elements
- Combinators
- etc.

---

# .eight[Comments]

```css
/*
Anything here is
ignored by the browser
*/

p {
  color: red; /* same here! */
}
```

---

# Comments for Organizing

```css
/***** GENERAL *****/
...

/***** HEADER *****/
...

/***** NAVIGATION *****/
...
```

---
class: middle, center

# CSS Layout

.eight[Setting size, shape, position, etc. on a series of boxes.]

???
Block and Inline

---

class: center

# Box Model

![Box Model Diagram](https://mdn.mozillademos.org/files/9443/box-model.png)

---

# Try It!

- See which elements can follow these rules:
  - `padding: 10px;`
  - `margin: 2em;`
  - `border: 1px solid red;`
- See what happens when you use these rules:
  - `width: 50%;`
  - `background-color: lightblue;`
  - `display: block;`

---

# Advanced Topic

Which units can I use and when?

[CSS Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)

---

# Advanced Topic

That declaration for border had a few values. How did that work?

[CSS Shorthand Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties)

---

# So Many Properties!

[MDN's CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

---

# .fourteen[More Practice]

[MDN Styling Text](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text)

- Fundamental text and font styling
- Styling lists
- Styling links