Introduction to CSS

Garrick Aden-Buie & Silvia Canelón

Tweet from @ijeamaka_a on April 17, 2021: 'lol I can't believe that a desire to customize shiny apps and my xaringan slides scammed me into finally getting a baseline knowledge of css + HTML.' 179 likes.

@ijeamaka_a on April 17, 2021

Let's do this together!

Restart your R session Ctrl + Shift + F10

Open 06-intro-css/06-start.Rmd

.pull-left⁠[
!⁠[cute lemur]⁠(lemur.jpg)
]
.pull-right⁠[
Lemurs are the cutest.
]
.footnote⁠[Duke Lemur Center⁠]

You've probably encountered remark's dot-name-bracket notation before. The most common examples in the default slides are .pull-left[], .pull-right[] and .footnote[]. We can use this syntax to modify the appearance or position of the text in our slides. And most importantly, we can create our own versions.

Use .big⁠[] in the first slide

Launch infinite_moon_reader()
Put .big[ ] around just a few words on the slide

01:00

06-start.Rmd

---
class: center middle
Lemurs are the .big[most endangered] mammals on Earth
![A cute lemur](lemur.jpg)

Your slide source code probably looks like this now

Lemurs are the most endangered mammals on Earth

A cute lemur

Lemurs are the most endangered mammals on Earth

A cute lemur

RStudio viewer popout Open the slides in your browser

Open the slides in Chrome or Firefox.

Right click on the embiggened words and select Inspect Element

What rules are being applied to this element?

Adjust font-size rule of the .big class

Make the .big class your own

Set the color to your favorite color.

Here are a few to try:
- DeepPink
- CornFlowerBlue
- RosyBrown
- SeaGreen
Find another property to change.

Try typing font- and pressing Tab

01:00

Copy the rule into your extra.css file

Right Click on the rule and select Copy Rule
Paste the rule into extra.css and save to update

Write your own rule

Follow the pattern from .big to write your own rule called .fade
- Set opacity to 0.66
Then, put .fade[] around the lemur image

02:00

Write your own rule

Follow the pattern from .big to write your own rule called .fade
- Set opacity to 0.66
Then, put .fade[] around the lemur image

02:00

extra.css

.fade {
  opacity: 0.66;
}

06-start.Rmd

.fade[
![A cute lemur](lemur.jpg)
]

Anatomy of a CSS rule

selector {
property: value;
property: value;
}

Anatomy of a CSS rule

.big {
font-size: 2em;
color: CornFlowerBlue;
}

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest

.pull-right⁠[
Lemurs are .big⁠[the cutest⁠]
]

Lemurs are the cutest

Inline elements are like inline R code. They modify a small snippet of text

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest

Block elements are like R code chunks. They're a whole chunk of something.

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest.

RStudio viewer popout Inspect the output

Let's see how xaringan and remark render the markdown on the left.

<div class="pull-right">
  <p>
    Lemurs are 
    <span class="big">
      the cutest
    </span>.
  </p>
</div>

Lemurs are the cutest.

In the HTML we see the .pull-right is used for a <div> tag (block element) and the .pull-left is used for a <span> tag (inline element).

Another place to put CSS (temporarily)

The second slide contains a figure, using the knitr::fig_chunk() trick we learned earlier.

With infinite_moon_reader() running...

Add a <style> tag to the slide markdown
```
<style>
</style>
```
In the next task, write you CSS inside the <style> tag. The slides will update live!

Move the figure

Put the figure in a .bottom-right[].
Create a new CSS rule in extra.css called .bottom-right
Set the position property to absolute
Set the width and height properties
- Try values like 200px or 450px
Set the bottom and right properties to a CSS distance
- Try values like 1.5em or 2em
Bonus Give the plot a border

03:00

Slide result using the `.bottom-right` class

.bottom-right {
  position: absolute;
  bottom: 1.5em;
  right: 2em;
  width: 450px;
  height: 200px;
  border: 2px solid gray;
}

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

Clone slideshow

Toggle presenter mode

Restart the presentation timer

?, h

Toggle this help

Tile View: Overview of Slides

Introduction to CSS

Garrick Aden-Buie & Silvia Canelón

Professional, Polished, Presentable

@ijeamaka_a on April 17, 2021

Let's do this together!

Restart your R session Ctrl + Shift + F10

Open 06-intro-css/06-start.Rmd

.pull-left⁠[
!⁠[cute lemur]⁠(lemur.jpg)
]
.pull-right⁠[
Lemurs are the cutest.
]
.footnote⁠[Duke Lemur Center⁠]

Use .big⁠[] in the first slide

Launch infinite_moon_reader()
Put .big[ ] around just a few words on the slide

01:00

06-start.Rmd

---
class: center middle
Lemurs are the .big[most endangered] mammals on Earth
![A cute lemur](lemur.jpg)

Your slide source code probably looks like this now

Lemurs are the most endangered mammals on Earth

A cute lemur

Lemurs are the most endangered mammals on Earth

A cute lemur

RStudio viewer popout Open the slides in your browser

Open the slides in Chrome or Firefox.

Right click on the embiggened words and select Inspect Element

What rules are being applied to this element?

Adjust font-size rule of the .big class

Make the .big class your own

Set the color to your favorite color.

Here are a few to try:
- DeepPink
- CornFlowerBlue
- RosyBrown
- SeaGreen
Find another property to change.

Try typing font- and pressing Tab

01:00

Copy the rule into your extra.css file

Right Click on the rule and select Copy Rule
Paste the rule into extra.css and save to update

Write your own rule

Follow the pattern from .big to write your own rule called .fade
- Set opacity to 0.66
Then, put .fade[] around the lemur image

02:00

Write your own rule

Follow the pattern from .big to write your own rule called .fade
- Set opacity to 0.66
Then, put .fade[] around the lemur image

02:00

extra.css

.fade {
  opacity: 0.66;
}

06-start.Rmd

.fade[
![A cute lemur](lemur.jpg)
]

Anatomy of a CSS rule

selector {
property: value;
property: value;
}

Anatomy of a CSS rule

.big {
font-size: 2em;
color: CornFlowerBlue;
}

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest

.pull-right⁠[
Lemurs are .big⁠[the cutest⁠]
]

Lemurs are the cutest

Inline elements are like inline R code. They modify a small snippet of text

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest

Block elements are like R code chunks. They're a whole chunk of something.

.pull-right⁠[
Lemurs are .big⁠[the cutest].
]

Lemurs are the cutest.

RStudio viewer popout Inspect the output

Let's see how xaringan and remark render the markdown on the left.

<div class="pull-right">
  <p>
    Lemurs are 
    <span class="big">
      the cutest
    </span>.
  </p>
</div>

Lemurs are the cutest.

In the HTML we see the .pull-right is used for a <div> tag (block element) and the .pull-left is used for a <span> tag (inline element).

Another place to put CSS (temporarily)

The second slide contains a figure, using the knitr::fig_chunk() trick we learned earlier.

With infinite_moon_reader() running...

Add a <style> tag to the slide markdown
```
<style>
</style>
```
In the next task, write you CSS inside the <style> tag. The slides will update live!

Move the figure

Put the figure in a .bottom-right[].
Create a new CSS rule in extra.css called .bottom-right
Set the position property to absolute
Set the width and height properties
- Try values like 200px or 450px
Set the bottom and right properties to a CSS distance
- Try values like 1.5em or 2em
Bonus Give the plot a border

03:00

Slide result using the `.bottom-right` class

.bottom-right {
  position: absolute;
  bottom: 1.5em;
  right: 2em;
  width: 450px;
  height: 200px;
  border: 2px solid gray;
}