HTML & CSS: Semantic Text & Typography

Why Text First?

There's thee major sides to web design: text, layout, and interaction

We won't really get to interaction - that typically involves JavaScript, though if you'll need it for your project, we'll work together

Text, without styling, is the easiest way to envision how HTML works

Before We Get to Text: HTML File Setup

There's some basics to HTML that need to be there so the browser knows that it's an HTML file

Document Type

At the top of every HTML file, you have to declare the document type

You use <!DOCTYPE html> to say "this is an HTML5 document"

It used to be more complex. If you see more info, that's for earlier HTML versions

The <html> Element

<html lang="en">

This starts an HTML document.

The "lang" is an attribute - this adds additional information to a tag

Like most tags, must open (<html>) and close (</html>)

The <head> Element

This marks off machine-readable data about the document

For now, just add a <title> element to the head

The title shows in the tab and is a strong signal for what shows in Google Search

The title the strongest signal of what the page is "about"

The <body> Element

The body tag has everything that displays

This is the main place we're going to work.

What Should We Have?

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page!</title>
</head>
<body>
</body>
</html>

Getting Text to Show

So, you can just type in the body, and text will show

Like we will touch on in the Accessibility talk, we want to always use the most semantic code so that screen readers (and web crawlers) know what the content means

There's also built-in styling for each element

A List of Text Tags

Images Aren't Text, But…

Images are inline elements, which mean they flow through the copy (unless you style them otherwise)

Images don't need to be closed

<img src="/your-file-name.jpg" alt="An image with alternative text" width="100" height="150">

Glyphs & Encoding

You sometimes need punctuation or other text that is hard to show in standard text

Easier to provide a link than list them all: CSS-Tricks has the best list that I constantly reference

Let's Make It Look Good!

By styling text, we can see the basics of styling anything

Adding Stylesheets

In the <head> section, add a link element with an href attribute

References a file that you typically create, but Glitch adds a style.css file by default

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

If you don't add anything in the file, it won't change anything

CSS Syntax

selector { property: value }

CSS Selectors

When Should You Use a Selector

Use the least specific selector as possible without breaking your styling

Easy guide to CSS Specificity

Random Caveats about Selectors

You should have only 1 element that matches a given #ID

You don't need to put the whole chain of elements if you don't have to. E.g. you don't need to do html body p a to target all <a> tags, especially if they're only inside <p> tags

[attribute] selectors have interesting matching: = for "exactly matches, ^= for "starts with," $= for "ends with," and *= for "contains"

Pseudo-classes for Typography

CSS Colors

The color property sets the color of what's in that element

I.e. using body { color:green } will turn the text in the body green, not the background of the box

We'll get to changing the color of the background later, but the property for that is background-color

Declaring Color

Three ways to select colors

CSS Units

CSS for typography

I'd suggest setting a base font size in the body{ }, then using em to manage sizes from there

This makes things really easy to scale logically when you're creating headings or "small" text

CSS Properties

CSS Properties vs. Print Typography

A diagram of typographical terminology, comparing Print and Web terminology. In print, ems are a width, on the web, they're a unit of font size. In print, tracking measures spaces between letters; on the web, letter-spacing is the CSS property. In print, leading measures spaces from the baseline of one line to the topline of the next; on the web, line-height measures from topline-to-topline.