---
# System prepended metadata

title: CSS Contd.
tags: ['1620']

---

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

# ACIT 1620

## Week 4

---

<!-- .slide: data-transition="zoom convex-out" style="text-align: left"-->
Topics (in no particular order):

- CSS selectors contd
- CSS variables
- CSS transforms
- CSS transitions
- CSS animations

---

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

- Checks correct syntax
- Checks proper usage of elements, ie. the tags used to markup the content reflect the meaning of the content

- [W3C Validator](https://validator.w3.org/)

---

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

- Expressing simultaneous conditions
- Expressing combinations, ie. selectors that match a set of elements
- Expressing nesting and relations

----

- Compound selector

```css=
a:hover {
    color: chocolate;
}
```

----

- Selector list

```css=
a:active,
a:hover,
a:focus {
    text-decoration: none;
    color: cyan;
}
```

----

- Combinators:
    - descendant (spacing)
    - child: `>`
    - Next sibling: `+`
    - Subsequent sibling: `~`


----

Examples:

```css=
/* Select paragraph siblings of 
 * level 3 headings sharing the same 
 * parent and occuring after the heading
 */
h3 ~ p {
    color: magenta;
}
```

```css
/* Select direct list children of section with class .content */
div.content > ul,
div.content > ol {
    margin: 0;
    padding: 1rem;
    list-style: none;
}
```


----

- `first-child`, `last-child`, `nth-child`, `nth-of-type`

```css=
table > tr:nth-child(odd) {
    background: hsl(120, 50%, 60%);
}
```

---

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

- CSS provides functions for creating different transformations:
    - translate: move elements horizontally, vertically
    - rotate
    - scale
    - etc

----

```css=
div.example {
    transform: scale(1.2) translateX(100px);
}
```

---

<!-- .slide: data-transition="zoom convex-out" -->
## Transitions and Animations

- Express different states of an element through time.
- Transitions: simple movements

```css
.btn:hover {
    background: chocolate;
    color: #fff;
    transition: all 1s ease-in;
}
```

----

- Animations: complex series of movements

```css
div.ball {
    animation-name: bounce;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-direction: alternate;
    animation-iteration-count: 5;
}

@keyframes bounce {
    0% {
        top: 0;
    }
    
    50% {
        top: 400px;
    }
    
    100% {
        top: 0;
    }
}
```

---

## Resources

Here is an enjoyable CSS transitions & animation example you can try out:

[Transitions in space](https://cssanimation.rocks/space-transitions/)