There will be some hands-on activities sprinkled throughout this talk!
Until just a couple years ago, I really didn’t know anything about what goes into making a web page look the way it does…knowing even just a tiny bit now feels powerful and magical and fun.
HTML (Hypertext Markup Language) is a markup language that tells web browsers how to structure web pages. You can think of HTML as the skeleton of a web page. It gives authors the means to create elements like headings, text, tables, lists, add media, etc.
Source: Adapted from Nicolas Karasiak
CSS (Cascading Style Sheets) is a programming language that allows you to control how HTML elements look on a web page. You can think of CSS as the outfit that is styling the skeleton. It allows authors to control aspects such as the colors, layout, and font style.
Source: Adapted from Nicolas Karasiak
Your browser will style HTML documents using an internal style sheet, which ensures that headings are larger than normal text, links are highlighted, lists and tables are structured correctly, etc.
HTML
Browser default styling
CSS allows website developers to add additional styling to web browser defaults. Otherwise, websites would be pretty boring to look at (and they’d all generally look the same).
Browser default styling
CSS styling
Elements comprise start tags and end tags that render some form of content in a particular way.
The basic anatomy of an HTML element:
In Markdown syntax, this HTML element would be written as: # Welcome to your website customization workshop
Note: Some HTML elements have no content (e.g. the <br>, or “break” element) – these are called empty elements and do not have an end tag.
Remember to close out tags from the inside-out to avoid unexpected renderings.
Nested HTML elements:
In Markdown syntax, this HTML element would be written as: # Welcome to your **website customization** workshop
Important: Take extra care to never skip (or incorrectly type) an end tag! Some elements will still display correctly if you forget an end tag, but you cannot rely on this. Forgotten end tags will cause you headaches as you try troubleshoot unexpected results and errors .
Attributes provide extra information about elements. They are always specified in the start tag and usually come in value/name pairs (e.g. attributeName="attributeValue").
Attributes can be used for targeted styling with CSS (e.g. class attributes) – more on this soon!
Check out the following HTML by opening the practice-html.html file in RStudio
To open in RStudio, click on the practice-html.html file in Files pane, then Open in Editor
<!DOCTYPE html> <!-- All HTML docs start with a doc type declaration-->
<html> <!-- This tag represents the root of the HTML doc -->
<head>
<!-- Write any metadata about the HTML doc here (inluding the link to an external CSS file) -->
</head>
<body>
<!-- Write all the contents of the HTML doc here -->
<h1>Here is my level one header</h1>
<p>Here is my first paragraph</p>
<p>Here is my second paragraph, where you can read more about NCEAS <a href="https://www.nceas.ucsb.edu/roundtable">Roundtables</a>.</p>
<p>This is very important text!</p>
</body>
</html>Click Preview to render the HTML
Check out the following markdown by opening the practice-markdown.qmd file in RStudio
To open in RStudio, click on the practice-markdown.qmd file in Files pane
Click Render to render your .qmd file as HTML – it should open in RStudio’s Viewer pane and generate a practice-markdown.html file. Note: Quarto applies the default Bootstrap 5 theme to rendered markdown (giving it a bit of styling as compared to our HTML on the previous slide).
CSS is a rule-based language – it allows you to define groups of styles that should be applied to particular elements or groups of elements on a web page. For example, “I want all level one (<h1>) headings to be green text with a bit of extra space between each letter” could be coded as:
We’re going to focus on element and class selectors, but check out these slides for an overview of other simple selectors. W3 Schools is also an excellent resource for learning about CSS selectors, exploring the many CSS properties, and much much more (I use this all the time!).
Any HTML element can be used as a selector. The declarations specified apply to all HTML elements of that type.
Group multiple element selectors together (separated by commas) if you want them all styled the same way.
A class selector uses the class attribute of an HTML element to style that specific element. Class selectors are written using a . followed by the selector name, e.g. .selector. HTML elements can have more than one class, e.g. <p class="class1 class2">
The HTML <span> tag is used to apply class selectors to part of an element.
It is common to have more than one CSS rule that points to the same element. As you build more complex stylesheets, determining which CSS rule “wins out” can get complicated. At a very basic level, the more specific CSS “wins”. In the context of today’s talk, class selectors are more specific than element selectors and will take precedence.
Let’s write some CSS and apply our practice-styles.css stylesheet to practice-html.html.
/* ------- element selectors ------- */
/* style level one headers */
h1 {
background-color: #49bf96;
border-radius: 25px;
letter-spacing: 5px;
text-align: center;
}
/* purple italicized hyperlinks */
a {
color: purple;
font-style: italic;
}
/* ------- class selectors ------- */
/* blue text */
.blue-text {
color: blue;
}
/* large red text */
.important-text {
color: red;
font-size: 30px;
}Below, we (a) link our stylesheet (line 5), and (b) use our class selectors to apply targeted styling (lines 10 & 12). These follow the general syntax:
<html-tag class="class-selector">Content</html-tag>
<!DOCTYPE html> <!-- All HTML docs start with a doc type declaration-->
<html> <!-- This tag represents the root of the HTML doc -->
<head>
<!-- Write any metadata about the HTML doc here (inluding the link to an external CSS file) -->
<link rel="stylesheet" href="practice-styles.css">
</head>
<body>
<!-- Write all the contents of the HTML doc here -->
<h1>Here is my level one header</h1>
<p class="blue-text">Here is my first paragraph</p>
<p>Here is my second paragraph, where you can read more about NCEAS <a href="https://www.nceas.ucsb.edu/roundtable">Roundtables</a>.</p>
<p class="important-text">This is <span class="blue-text">very</span> important text!</p>
</body>
</html>
Note the required /*-- scss:rules --*/ region decorator, which has been added at the top of the file (required by Quarto).
/*-- scss:rules --*/
/* ------- element selectors ------- */
/* style level one headers */
h1 {
background-color: #49bf96;
border-radius: 25px;
letter-spacing: 5px;
text-align: center;
}
/* purple italicized hyperlinks */
a {
color: purple;
font-style: italic;
}
/* ------- class selectors ------- */
/* blue text */
.blue-text {
color: blue;
}
/* large red text */
.important-text {
color: red;
font-size: 30px;
}Below, we (a) call our stylesheet in the YAML metadata header using the theme option (line 2), and (b) use our class selectors to apply targeted styling (lines 7 & 11).
---
theme: practice-styles.css
---
# Here is my level one header
<p class="blue-text">Here is my first paragraph</p>
Here is my second paragraph, where you can read more about NCEAS [Roundtables](https://www.nceas.ucsb.edu/roundtable).
<p class="important-text">This is <span class="blue-text">very</span> important text!</p>Note: Quarto also provides its own syntax for applying classes to elements. For example:
To me, writing a little CSS always feels a bit magical
Syntactically Awesome Stylesheets
- Sass is a CSS extension (provides additional features, like variables)
- Sass is a CSS preprocesser (converts Sass code into standard CSS because browsers can’t interpret Sass)
Sass extends existing CSS features in a number of exciting ways, but importantly reduces repetition. For example, let’s say you’re working on a website/web page that uses three main colors:
You might imagine how often you’ll need to type those HEX codes out as you develop your stylesheet…it can get annoying rather quickly.
Open & render cuteness-report.qmd by clicking the Render button in RStudio
Start by exploring fonts at https://fonts.google.com/. Once you found a one (or more) that you like:
Select which weights and styles to import from the Styles section – click the + button,
, to the right of the style you want.Click on View selected families,
(top right corner), to see all of your selected fonts. Under the Use on the web section, select the radio button for @import and copy everything between the <style> </style>tags (starting with@importand ending with;) to your clipboard.
Without my-report-styles.scss applied
With my-report-styles.scss applied
Next up: fine-tuning with some CSS
Temporarily “edit” CSS selectors (refreshing your browser will revert your page back to its original state) – helps to identify exactly which elements different selectors are manipulating and allows you to try out styles before actually hard-coding them.
Let’s say we want to better highlight the very last sentence of our report, which links out to our GitHub repo & provides instructions for contributing:
We can create three new classes that:
- increase the size of the text (
.large-text) - center the text (
.center-text) - color/style the background of our text to make it stand out (
.highlight-text)
/*-- scss:defaults --*/
// import fonts from fonts.google.com
@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Nunito:wght@400;800&display=swap');
// colors
$green: #348553;
$light-green: #589244;
$yellow: #E9A300;
$red: #A23601;
$white: #FFFFFF;
$gray: #ADADAD;
$black: #525452;
// font styles
$font-family-sans-serif: 'Nunito', sans-serif;
$font-family-serif: 'Arvo', serif;
// find all Quarto Sass vars here: https://quarto.org/docs/output-formats/html-themes.html#sass-variables
$body-color: $black;
$link-color: $red;
$toc-color: $green;
$toc-active-border: $yellow;
$toc-inactive-border: $gray;
$code-color: $light-green;
/*-- scss:rules --*/
// level two styling
h2 {
color: $green;
border-bottom: 3px solid $yellow;
font-family: $font-family-serif;
}
// level three stying
h3 {
color: $green;
}
// style document title
.title {
color: $green;
font-family: $font-family-serif;
font-size: 2.3em;
}
// adjust size of documment subtitle
.lead {
font-size: 1.5em;
}
// center text
.center-text {
text-align: center;
}
.large-text {
font-size: 1.4em;
}
// yellow highlight
.highlight-text {
background-color: rgba(233, 163, 0, 0.2);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
border-radius: 25px;
}
Now that we’ve written our class selectors, we need to apply them to the HTML elements we want to style (recall, HTML elements can have more than one class):
which will render as:
^ I feel this way often when trying to write CSS
For me, it’s a lot of it is trial and error. Inspecting your website can take patience and persistence to figure out how exactly to target your desired element. Some things that have helped me:
- re-rendering often to ensure your Sass/CSS is working as expected
- Google! (lots of queries that look like, “CSS underline text”, “CSS rounded corners”, etc.)
- W3 Schools – seriously such a valuable resource (especially their interactive tutorials)
- drawing inspiration (and borrowing source code) from other webpages
This is a Quarto Presentation. To learn more, visit https://quarto.org.
If you see mistakes or want to suggest changes, please create an issue on the source repository.