---
# System prepended metadata

title: ACIT 1620 Week 3 notes
tags: ['1620']

---

---
type: slide
slideOptions:
  display: block
---

# ACIT 1620

## Week 3

---

<!-- .slide: data-transition="zoom convex-out" -->
Objectives:

- Learn how to style web pages using CSS
- CSS selectors and specificity
- Backgrounds and colors
- Box model
- Layout

---

<!-- .slide: data-transition="zoom convex-out" -->
## Including CSS in HTML

The `style` attribute - Inline CSS:

``` html
<p style="color: purple;">I am purple text</p>
```

----

The `<style>` element - internal styles:

```
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>I am red text</p>
</body>
```

----

The `<link>` element - External styles:

```
<head>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <p>I am green text</p>
</body>
```

_styles.css_:
```
p {
    color: green;
}
```

---

<!-- .slide: data-transition="zoom convex-out" -->
## Selectors:

- Type selector
- ID selector
- Class selector
- Attribute selector
- Pseudo classes
- Pseudo elements

----

Combining selectors:

```
div,
ul,
ol {
    margin: 0;
}

p.highlighted {
    background: yellow;
}

a#home {
    color: green;
}
```

---

<!-- .slide: data-transition="zoom convex-out" -->
## Anatomy of a ruleset

```
selector {    /* declaration */
    property: values;
}
```

- Values can be:
    - strings
    - quantities: integers, percentages, em, rem, px, ...
    - functions

---

<!-- .slide: data-transition="zoom convex-out" -->
## Specificity

- Deciding between competing rulesets
- Inline styles always take precedence
- `ID` selector is more specific than `class` and `type`
- `class` is more specific than `type`
- The order in which rulesets appear in the stylesheet also matters


---

<!-- .slide: data-transition="zoom convex-out" -->
## Box Model

![Box-model](https://hackmd.io/_uploads/Syy6_TjKa.svg)

---

<!-- .slide: data-transition="zoom convex-out" -->
## Layout

- Normal flow
- Floats
- Flex
- Grid
- Positioning

---

<!-- .slide: data-transition="zoom convex-out" -->
## Media queries

- Specify different styles for different display targets
- Useful for responsive design

```
@media screen and (max-width: 600px) {
    .container {
        display: block;
    }
}
```

---

<!-- .slide: data-transition="zoom convex-out" -->
## Reading List


- [Pseudo Classes and Pseudo Elements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
- [Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
- [Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
- [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
- [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
- [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)