Custom stylesheets

Communicating with Data in the Tidyverse

Timo Grossenbacher

Data Journalist

Cascading Style Sheets (CSS): Basic selectors

<h2>Summary</h2>

<p>The <strong>International 
Labour Organization (ILO)</strong> 
has many 
<a href="http://test.htm">data sets
</a> on working conditions.

h2 {
  font-family: "Bookman", serif;
}

body, h1, h2 {
  font-family: "Bookman", serif;
}

strong {
    color: "red";
}

a {
    color: #0000FF;
    font-weight: bold;
}

Cascading Style Sheets (CSS): Class selectors

<h2>Strong elements</h2>

Here are two <strong class = "red">
bold</strong> 
<strong>elements</strong>.

strong {
  color: "blue";
}

strong.red {
  color: "red";
}

Cascading Style Sheets (CSS): Combinators

<div>

  <p>
    This is a 
    <strong>bold element</strong>
    inside a paragraph
  </p>

  This is another
  <strong>bold element</strong>
  outside a paragraph.

</div>

div strong {
  color: "green";
}

div > strong {
  color: "red";
}

Find many more selectors and a full CSS reference on the Mozilla Developer Network.

Let's practice!

Communicating with Data in the Tidyverse