CSS Properties vs. Print Typography
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
There's some basics to HTML that need to be there so the browser knows that it's an HTML file
<html> Element<head> Element<body> ElementAt 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
<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>)
<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"
<body> Element
The body tag has everything that displays
This is the main place we're going to work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page!</title>
</head>
<body>
</body>
</html>
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
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">
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
By styling text, we can see the basics of styling anything
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
selector { property: value }
p targets all <p> tagsp a targets all <a> tags inside a <p> tag<p class="class">, <a class="class">, etc<p class="class" id="id">p[data-magic="true"] targets when you hover over <p class="class" data-magic="true">p.class:hover targets when you hover over <p class="class">Use the least specific selector as possible without breaking your styling
Easy guide to CSS Specificity
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"
:first-of-type
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
Three ways to select colors
black, green, burlywood, rebeccapurple.#RRGGBB. Each spot takes 0-F, using hexadecimal numbers. #FFFFFF is white, #FF0000 is red, #800080 is purplergba(255,0,0,0.7). The first three are red, green, and blue in 0-255 scale, and the 4th is "alpha" in a decimal scale from 0-1.
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