😎 Style!

Coding Camp

Prof. Calvin

👋 Introduction

Goals

  1. Create a webpage
  2. Make it well-formed
  3. Make it stylish
  4. Make it graphical
  5. Make it interactive

Today

💐 Color

What?

  • HTML can emphasize or strengthen text.
<p>
    This is
    <strong>
        bold
    </strong>
    and this is 
    <em>
        italicized.
    </em>
</p>

This is bold and this is italicized.

  • Okay, how do you make text blue?
    • 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.
    This is
<span style="color:green">
  green
</span>
and this is 
<span style="color:pink">
  pink.
</span>

    This is green and this is pink.

Why?

  • What if you want:
    • Bold
    • Italic
    • Underline
    • Centered
    • Pink text on a green background.
<p style="font-weight:bold;font-style:italic;text-decoration:underline;text-align:center;color:pink;background:green">No problem.</p>

No problem.

🪪 id

What?

  • This is annoying:
<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:
<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

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>
styles.css
#stylish {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-align: center;
    color: pink;
    background: green;
}
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