+ - 0:00:00
Notes for current slide
Notes for next slide
8

More CSS

Garrick Aden-Buie & Silvia Canelón

Professional, Polished, Presentable

1

Identifying Elements with CSS

<div class="special" id="slide-facts">

2

Identifying Elements with CSS

<div class="special" id="slide-facts">

3

Identifying Elements with CSS

<div class="special" id="slide-facts">

4

Identifying Elements with CSS

<div class="special" id="slide-facts">

5

Identifying Elements with CSS

<div class="special" id="slide-facts">

6

Identifying Elements with CSS

<div class="special" id="slide-facts">

7

Identifying Elements with CSS

<div class="special" id="slide-facts">

8

Identifying Elements with CSS

<div class="special" id="slide-facts">

9

Identifying Elements with CSS

<div class="special" id="slide-facts">

10

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

11

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

What are some ways to identify this element?

12

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

What are some ways to identify this element?

div

.pull-right

.fact

13

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

What are some ways to identify this element?

div.pull-right.fact

14

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

What are some ways to identify this element?

.pull-right.fact

15

Selecting Elements with CSS

  <div class="pull-right fact">

  </div>

What are some ways to identify this element?

.pull-right.fact[
... content ...
]

16

Selecting Elements with CSS

  <div class="pull-right fact">
    <p>(lives in trees)</p>
  </div>

17

Selecting Elements with CSS

  <div class="pull-right fact">
    <p>(lives in trees)</p>
  </div>

What are some ways to identify the paragraph?

18

Selecting Elements with CSS

  <div class="pull-right fact">
    <p>(lives in trees)</p>
  </div>

What are some ways to identify the paragraph?

p

19

Selecting Elements with CSS

  <div class="pull-right fact">
    <p>(lives in trees)</p>
  </div>

What are some ways to identify the paragraph?

.fact p

20
---
name: facts
class: special
# Interesting Lemur Facts
Lemurs are .fact[arboreal]
.fact.pull-right[
Note about arboreal
]
Lemurs are .fact[diurnal]
<div id="slide-facts" class="remark-slide-content special">
  <h1 id="interesting-lemur-facts">
    Interesting Lemur Facts
  </h1>
  <p>
    Lemurs are <span class="fact">arboreal</span>
  </p>
  <div class="fact pull-right">
    <p>(lives in trees)</p>
  </div>
  <p>
    Lemurs are <span class="fact">diurnal</span>
  </p>
  <div class="remark-slide-number">22</div>
</div>

Interesting Lemur Facts

Lemurs are arboreal

(lives in trees)

Lemurs are diurnal

22
21

Interesting Lemur Facts

Lemurs are arboreal

(lives in trees)

Lemurs are diurnal

22

CSS Variables

23
:root {
  --hot-pink: #ff41b4;
}
.fact {
  color: var(--hot-pink);
}
⏭
24

25
26

xaringanthemer CSS Color Variables

library(xaringanthemer)
palette <- c(
  orange      = "#fb5607",
  pink        = "#ff006e",
  blue_violet = "#8338ec",
  zomp        = "#38A88E",
  shadow      = "#87826E"
)
style_duo_accent(colors = palette)
:root {
  --orange: #fb5607;
  --pink: #ff006e;
  --blue_violet: #8338ec;
  --zomp: #38A88E;
  --shadow: #87826E;
}
Foreground Background
.orange .bg-orange
.pink .bg-pink
.blue_violet .bg-blue_violet
.zomp .bg-zomp
.shadow .bg-shadow

Colors from coolors

27

Activity Time

materials/act-03/08-more-css

Practice using CSS variables and selectors.

28

Identifying Elements with CSS

<div class="special" id="slide-facts">

2
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
oTile View: Overview of Slides
sToggle scribble toolbox
Esc Back to slideshow