STYLE

Intro

Cascading Style Sheet

Motivation: One HTML Page - Multiple Styles

CSS controls layout, colors, typefaces, non-content images, and more

Way too big a topic to cover in this short time. We look at a useful subset

`<head>`

<head></head>

is where we keep all the stuff that isn’t content. Metadata, style information, info for search engines, crawlers.

`<title>`

`<style>`

`<link>`

<link rel="stylesheet" href="style.css">

Text Color

<style>
  body {
    color: red;
  }
</style>

<style> goes in the <head>, along with <title>

(can also be in a separate file)

<html>
  <head>
    <title>David's super awesome website</title>
    <style>
      body {
        color: red;
      }
    </style>
  </head>
  <body>
  ...
  </body>
</html>

What if I use p instead of body, what about h1?

Styles are INHERITED

Let’s add multiple rules

Selectors

We will consider 2: element-based and class-based.

There are more (identity, inheritance, attributes). These are less useful for what we’re doing

selector {
  property1: value1;
  property2: value2;
}

When selector is a tag name, it affects ALL tags of that type.

Classes

We can also mark elements specifically for styling

<style>
  .xyzzy {
    color: green
  }
</style>
...
<h2 class="xyzzy">This heading will appear in green<h2>

This can be a bit confusing. The best question to ask is “Do i want to change how EVERY paragraph/list/heading looks, or just how THIS paragraph/list/heading looks”?

`background-color`

Let’s change the background of the page

Let’s change the background of a heading

All about fonts

font-size font-weight text-align text-decoration

Let’s try them.

font-family

Can be exact font name, or one of sans-serif, serif, monospace

Requires the user to have the font installed

body {
  font-family: sans-serif;
}

h1 {
  font-family: "Gothica";
}

What if they don’t have it installed?

Let’s go on a web fonts based tangent…

Google Fonts

dafont.com

Let’s get a custom font from there

@font-face {
  font-family: Conviva; /* set name */
  src: url(Conviva.ttf); /* url of the font */
}

...

h1 {
  font-family: Conviva;
}

style.css

If we have multiple pages, we often want to have a single style block that applies to all of them.

We can make a .css file.

…

<link rel="stylesheet" href="style.css">

How to we arrange stuff?

Let’s all start from the same HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Let's Play With Layouts</title>
        <style>

        </style>
    </head>
    <body>
        <h1>Layouts</h1>
        <main>
          <section>
            <h2>Links</h2>
            <p>
                <a href="links.html">Links to my friends</a>
            </p>
          </section>
          <section>
            <h2>About</h2>
            <p>All <u>about</u> me</p>
            <p>I am a human and</p>
            <p>I like to eat <br>potatoes, they are<br>delicious</p>
          </section>
          <section>
            <h2>Stuff I like</h2>
            <ul>
                <li>Computers</li>
                <li>Chickpeas</li>
                <li>Bike Rides</li>
            </ul>
          </section>
          <section>
            <h2>A cat</h2>
            <img src="https://placecats.com/640/400" alt="A picture of a cat">
          </section>
        </main>
    </body>
</html>

THE BOX MODEL

border/margin/padding

grid

EXAMPLE

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

flex

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

If this is all too much and complicated

Put everything in the middle.

“max-width margin” layout

background-image

Left this until later because there’s more here than you might expect

https://gifcities.org/

![images/tile1.png]

CONTROVERSIAL POINT OF ORDER

LLMs are quite good at writing CSS

What actually happens when you open a web page

Request

GET /index.html

Response

200 OK

<html>
...

Weird Websites for a Post Social Media World