More HTML

id and class are important attributes, mainly for styling.
- id → typically for unique elements; elements are limited a single id
- class → typically for general elements.
Multiple id and class are space-delimited, such as rounded bold for rounded & bold.
id and class attributes can be accessed through CSS or JS:

/* id="foo" */
#foo {
    background: red;
}

const foo = document.getElementById("foo"); // id="foo"
const bar = document.getElementsByClassName("bar"); // class="bar"

Layout

The layout of a website is essentially the website’s structure.
A website should be intuitive; information should be accessible.
Each page has a header, navigation bar, content, and footer.
- Within the content, there are different headings, paragraphs, etc.

Layouts make or break websites.

Through CSS, you can change how websites look
- Including size, color, margins, padding, etc.
CSS is not uniformly implemented in browsers, mainly Internet Explorer
- Internet Explorer is dead anyways, there’s no reason to tailor your website for IE
For example, to make all h1 elements blue, and set their font family to “Helvetica”:
- For class attributes, use .{class}
- For id attributes, use #{id}

h1 {
    color: blue;
    font-family: "Helvetica";
}

You can use the style attribute on elements to add CSS to one specific element
Not recommended for more complex CSS → not syntax highlighted, and annoying to edit

<h1 style="color: red;">Hello</h1>

<style>
    body {
        background: black;
    }
</style>

External style sheets are particularly helpful for making pages with the same style.
- If you’re using embedded CSS, and you change the color of something, you need to change it for all sites.
To use an external stylesheet within your page, use a link element:

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

h1 {
    color: blue;
    font-size: 2em;
}
 
h1 {
    color: red; /* this overrides the h1 color from blue */
}

/*
    Name: Your Name
    Course: CSCI 1210
    Asssignment: Lab x
    Date: mm.dd.yyyy
    Description: Learning CSS
*/

cm → centimeters
mm → millimeters
in → inches (96px)
px* → pixels
- px are relative to the viewing device; for high-resolution screens, 1px implies multiple device pixels