Ensure files in the same repository and link name is correct (e.g. styles.css)
Why?
Way easier when you have multiple styles.
Today
Source Code
---title: π Style!---# π Introduction## Goals1. Create a *webpage*2. Make it *well-formed*3. **Make it *stylish***5. Make it *graphical*4. Make it *interactive*## Today- [ ] Style!- [ ]`id`!- [ ] CSS!# π Color## What?- HTML can *emphasize* or **strengthen** text.```{.html}<p> This is <strong> bold </strong> and this is <em> italicized. </em></p>```<p> This is <strong> bold </strong> and this is <em> italicized. </em></p>- Okay, how do you make text <span style="color:blue">blue</span>? - Not `<blue>` and `<green>` for *every color*!## How?- Attributes - Like links `<a href="xkcd.com">link</a>`- We use the `style` attribute. - Often with `<span>` - text-without-linebreak.```{.html}This is<span style="color:green"> green</span>and this is <span style="color:pink"> pink.</span>```<p> This is <span style="color:green"> green </span> and this is <span style="color:pink"> pink. </span></p>## Why?- What if you want: - Bold - Italic - Underline - Centered - Pink text on a green background.```{.html}<p style="font-weight:bold;font-style:italic;text-decoration:underline;text-align:center;color:pink;background:green">No problem.</p>```<p style="font-weight:bold;font-style:italic;text-decoration:underline;text-align:center;color:pink;background:green">No problem.</p># πͺͺ `id`## What?- This is annoying:```{.html}<p style="font-weight:bold;font-style:italic;text-decoration:underline;text-align:center;color:pink;background:green">No problem.</p>```- Must better would be:```{.html}<p id="stylish">No problem</a>```- And write the style down elsewhere.## How?- CSS (Cascading Style Sheets)- In your `<head>`, add a `<style>` element.- Write out all the styling you want!- We'll show a minimal example!## π Visually```{.html filename="styled.html"}<!DOCTYPE html><html> <head> <style> #stylish { font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; color: pink; background: green; } </style> </head> <body> <p id="stylish">No problem</a> </body></html>```## Why?- More consistent. - Can say "stylish" anywhere!- Less messy. - Easier to e.g. translate "No problem!" ⇒ "Β‘No hay problema!"- Can be placed in a separate file...# π Style## What?- Moving all the formatting to a header is nice enough...- But what if we have multiple pages on our website! - "About me" and "Cool poems", perhaps.- We may want to style them both the same!## How?1. Make a CSS file!2. Include it in your HTML file with a `<link>`::::{.columns}:::{.column width="50%"}```{.css filename="styles.css"}#stylish { font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; color: pink; background: green;}```::::::{.column width="50%"}```{.html filename="styled.html"}<!DOCTYPE html><html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <p id="stylish">No problem</p> </body></html>```:::::::- Ensure files in the same repository and link name is correct (e.g. `styles.css`)## Why?- *Way* easier when you have multiple styles.## Today- [x] Style!- [x]`id`!- [x] CSS!