Look Sharp!

Style with CSS

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

What are some examples of inline elements?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

What are some examples of inline elements?

Examples of block elements?

Display

.not-down {
   display: block;
  background: red;
  color: white;
}

<p class="not-down">
  ...never gonna...
</p>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

Oh, Danny Boy.

I get knocked down, but I get up again. You're never gonna to keep me down.

Display

.best {
  display: inline;
  background: red;
  color: white;
}

<span class="best">
  the best times
</span>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

Oh, Danny Boy.

I get knocked down, but I get up again. You're never gonna to keep me down.

Display

.danny {
  display: none;
  background: red;
  color: white;
}

<p class="danny">
  Oh Danny Boy
</span>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

I get knocked down, but I get up again. You're never gonna to keep me down.

CSS Box Model
9

Everything is (in) a box

js4shiny.com/box-size

Focus on the parts of the box

Border and Shorthand Properties

border: 1px solid turquoise;

Border and Shorthand Properties

border: 1px solid turquoise;

border-width: 1px;
border-style: solid;
border-color: turquoise;

Margin and Padding

margin: 1em;

margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;

padding: 1em;

padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;

Margin and Padding

margin: 0 1em;

margin-top: 0;
margin-right: 1em;
margin-bottom: 0;
margin-left: 1em;

padding: 0 1em;

padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;

Margin and Padding

margin: 1em 0;

margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;

padding: 1em 0;

padding-top: 1em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 0;

Margin and Padding

margin: 1px 2px 3px 4px;

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

padding: 1px 2px 3px 4px;

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

Earlier we saw

<p style="text-align: center">
  <img src="http://placekitten.com/200/200" />
</p>

Earlier we saw

<p style="text-align: center">
  <img src="http://placekitten.com/200/200" />
</p>

Is <img> inline or block?

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

What will happen?

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

#out-kitten-block-img :hover {
  background: var(--washed-red);
  outline: 1px solid var(--red);
}

Image is inline but we can make it block

<div class="kitten-container">
  <div class="kitten"></div>
</div>

Image is inline but we can make it block

<div class="kitten-container">
  <div class="kitten"></div>
</div>

.kitten {
  margin: 0 auto;
  height: 200px;
  width: 200px;
  background: url('http://placekitten.com/200/200');
}

Center Text

.centered {
  text-align: center
}

meow

Center Block

.centered {
  display: block;
  width: 33%;
  margin-left: auto;
  margin-right: auto;
}

Center Block

.centered {
  display: block;
  width: 33%;
  margin: 0 auto;
}

Vertical Center

.container-of-item {
  display: flex;
  align-items: center;
}

All Center

.container-of-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

CSS Selectors30

Joining Selectors

<div class="card card-eyeshadow">
  <header>
    <div class="pan">
      <div class="shade almost-there"></div>
    </div>
    <h1 id="item">Super Shock Shadow</h1>
  </header>
  <p>By <em class="brand">Colourpop</em></p>
  <div id="cost" class="us-dollar">$8</div>
</div>

Joining Selectors

<div class="card card-eyeshadow">
  <header>
    <div class="pan">
      <div class="shade almost-there"></div>
    </div>
    <h1 id="item">Super Shock Shadow</h1>
  </header>
  <p>By <em class="brand">Colourpop</em></p>
  <div id="cost" class="us-dollar">$8</div>
</div>

Multiple Rules

h1, p

Siblings

p + div

Beyond Element, ID, Class

Type
Example Selector


Element
p

Class
.shiny

IDs
#shiny

Pseudo-classes
:hover, :active, :empty

Attributes
[attribute]

Pseudo-elements
::before

Anything
*

48

Type	Example Selector
Element	`p`
Class	`.shiny`
IDs	`#shiny`
Pseudo-classes	`:hover`, `:active`, `:empty`
Attributes	`[attribute]`
Pseudo-elements	`::before`
Anything	`*`

Attribute selectors are awesome and are super helpful in tricky situations where you don't have control over the HTML or the classes (hello shiny!)

Attribute Selectors

div[id]

A <div> that has an id attribute

Attribute Selectors

div[id="cost"]

A <div> that has an id attribute whose value is cost

Attribute Selectors

[class*="brand"]

An element where brand appears in the class attribute

Attribute Selectors

[class*="brand"]

An element where brand appears in the class attribute

Attribute Selectors

bit.ly/mdn-attribute-selectors

Cascade54

wattenberger.com/blog/css-cascade

We're usually not creating the CSS from scratch, instead we modify existing CSS to make things look better.

The browser is a jumble of competing CSS rules.

When two rules collide...

h1 .shiny {
  color: lightblue;
}

#title.shiny {
  color: red;
}

...which one wins?

CSS Cascade

Importance

What type of rule is it?

transition
!important
animation
normal

.shiny {
  color: lightblue;
}

.shiny {
  color: blue !important;
}

CSS Cascade

Importance

Origin

Where was the rule defined?

website
user
browser

/* browser default */
p {
  color: black;
}

/* shiny.css */
p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

How specific is the rule?

inline styles style="color: lightblue"
id #shiny
class, attribute, pseudo-class .shiny:hover
element, pseudo-elements strong

.shiny {
  color: blue;
}

#shiny {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

p.shiny {
  color: blue;
}

.shiny:first-child {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

Ties can be broken within specificity by points one level down

#shiny .paragraph {
  color: blue;
}

#shiny p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

Ties can be broken within specificity by points one level down

How selectors are combined doesn't matter

#shiny ~ p {
  color: blue;
}

#shiny + p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

Position

Which rule was defined last?

.shiny {
  color: blue;
}

.shiny {
  color: red;
}

Test Your CSS Aim

js4shiny.com/css-aim

Next: Ghost in the Machine (JavaScript)

Look Sharp!

Style with CSS

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

What are some examples of inline elements?

Quick Review: Block v Inline

Which type of display doesn't have a width or height?

Which type of display is shown on its own line?

What are some examples of inline elements?

Examples of block elements?

Display

.not-down {
   display: block;
  background: red;
  color: white;
}

<p class="not-down">
  ...never gonna...
</p>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

Oh, Danny Boy.

I get knocked down, but I get up again. You're never gonna to keep me down.

Display

.best {
  display: inline;
  background: red;
  color: white;
}

<span class="best">
  the best times
</span>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

Oh, Danny Boy.

I get knocked down, but I get up again. You're never gonna to keep me down.

Display

.danny {
  display: none;
  background: red;
  color: white;
}

<p class="danny">
  Oh Danny Boy
</span>

He sings the songs that remind him of the good times. He sings the songs that remind him of the best times.

I get knocked down, but I get up again. You're never gonna to keep me down.

CSS Box Model
9

Everything is (in) a box

js4shiny.com/box-size

Focus on the parts of the box

Border and Shorthand Properties

border: 1px solid turquoise;

Border and Shorthand Properties

border: 1px solid turquoise;

border-width: 1px;
border-style: solid;
border-color: turquoise;

Margin and Padding

margin: 1em;

margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;

padding: 1em;

padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;

Margin and Padding

margin: 0 1em;

margin-top: 0;
margin-right: 1em;
margin-bottom: 0;
margin-left: 1em;

padding: 0 1em;

padding-top: 0;
padding-right: 1em;
padding-bottom: 0;
padding-left: 1em;

Margin and Padding

margin: 1em 0;

margin-top: 1em;
margin-right: 0;
margin-bottom: 1em;
margin-left: 0;

padding: 1em 0;

padding-top: 1em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 0;

Margin and Padding

margin: 1px 2px 3px 4px;

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

padding: 1px 2px 3px 4px;

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

Earlier we saw

<p style="text-align: center">
  <img src="http://placekitten.com/200/200" />
</p>

Earlier we saw

<p style="text-align: center">
  <img src="http://placekitten.com/200/200" />
</p>

Is <img> inline or block?

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

What will happen?

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

Image is inline but we can make it block

<p style="text-align: center">
  <img style="display:block;" src="http://placekitten.com/200/200" />
</p>

#out-kitten-block-img :hover {
  background: var(--washed-red);
  outline: 1px solid var(--red);
}

Image is inline but we can make it block

<div class="kitten-container">
  <div class="kitten"></div>
</div>

Image is inline but we can make it block

<div class="kitten-container">
  <div class="kitten"></div>
</div>

.kitten {
  margin: 0 auto;
  height: 200px;
  width: 200px;
  background: url('http://placekitten.com/200/200');
}

Center Text

.centered {
  text-align: center
}

meow

Center Block

.centered {
  display: block;
  width: 33%;
  margin-left: auto;
  margin-right: auto;
}

Center Block

.centered {
  display: block;
  width: 33%;
  margin: 0 auto;
}

Vertical Center

.container-of-item {
  display: flex;
  align-items: center;
}

All Center

.container-of-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

CSS Selectors30

Joining Selectors

<div class="card card-eyeshadow">
  <header>
    <div class="pan">
      <div class="shade almost-there"></div>
    </div>
    <h1 id="item">Super Shock Shadow</h1>
  </header>
  <p>By <em class="brand">Colourpop</em></p>
  <div id="cost" class="us-dollar">$8</div>
</div>

Joining Selectors

<div class="card card-eyeshadow">
  <header>
    <div class="pan">
      <div class="shade almost-there"></div>
    </div>
    <h1 id="item">Super Shock Shadow</h1>
  </header>
  <p>By <em class="brand">Colourpop</em></p>
  <div id="cost" class="us-dollar">$8</div>
</div>

Beyond Element, ID, Class

Type
Example Selector


Element
p

Class
.shiny

IDs
#shiny

Pseudo-classes
:hover, :active, :empty

Attributes
[attribute]

Pseudo-elements
::before

Anything
*

48

Type	Example Selector
Element	`p`
Class	`.shiny`
IDs	`#shiny`
Pseudo-classes	`:hover`, `:active`, `:empty`
Attributes	`[attribute]`
Pseudo-elements	`::before`
Anything	`*`

Attribute selectors are awesome and are super helpful in tricky situations where you don't have control over the HTML or the classes (hello shiny!)

Attribute Selectors

div[id]

A <div> that has an id attribute

Attribute Selectors

div[id="cost"]

A <div> that has an id attribute whose value is cost

Attribute Selectors

[class*="brand"]

An element where brand appears in the class attribute

Attribute Selectors

[class*="brand"]

An element where brand appears in the class attribute

Attribute Selectors

bit.ly/mdn-attribute-selectors

Cascade54

wattenberger.com/blog/css-cascade

We're usually not creating the CSS from scratch, instead we modify existing CSS to make things look better.

The browser is a jumble of competing CSS rules.

When two rules collide...

h1 .shiny {
  color: lightblue;
}

#title.shiny {
  color: red;
}

...which one wins?

CSS Cascade

Importance

What type of rule is it?

transition
!important
animation
normal

.shiny {
  color: lightblue;
}

.shiny {
  color: blue !important;
}

CSS Cascade

Importance

Origin

Where was the rule defined?

website
user
browser

/* browser default */
p {
  color: black;
}

/* shiny.css */
p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

How specific is the rule?

inline styles style="color: lightblue"
id #shiny
class, attribute, pseudo-class .shiny:hover
element, pseudo-elements strong

.shiny {
  color: blue;
}

#shiny {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

p.shiny {
  color: blue;
}

.shiny:first-child {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

Ties can be broken within specificity by points one level down

#shiny .paragraph {
  color: blue;
}

#shiny p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

The most points on the highest level wins

Ties can be broken within specificity by points one level down

How selectors are combined doesn't matter

#shiny ~ p {
  color: blue;
}

#shiny + p {
  color: lightblue;
}

CSS Cascade

Importance

Origin

Specificity

Position

Which rule was defined last?

.shiny {
  color: blue;
}

.shiny {
  color: red;
}

Test Your CSS Aim

js4shiny.com/css-aim

Next: Ghost in the Machine (JavaScript)

↑, ←, 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
o	Tile View: Overview of Slides