CSS Properties vs. Print Typography
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
We've written text, structured it, and styled it
Now, we want to give structure to the page itself
<div>
<span> but for things other than text
Anything can go into a div
Think of it like "a box"
<div> from MDN
The
<div>element should be used only when no other semantic element (such as<article>or<nav>) is appropriate.
<div>
It's just a box. It doesn't mean anything inherently
When you check in MDN, the "Implicit ARIA role" is "No corresponding role"
Why do we need a more specific item?
Every page should answer:
<main> is for the main area of the page, where content would be unique per page
<article> is for "if it could stand on its own as a page"
<section> is for subdividing articles or main sections
I suggest using headings in all of these
<aside> is for additional content
If an <aside> is inside an <article> or <main>, it's understood that it's directly related to the content of the page
If an <aside> is outside an <article> or <main>, it's more related to the site itself than the individual page
<nav> is for navigation. Can be used anwhere.
<header> is for "banner" content like logos
<footer> is for lesser content info
The <img> tag is fine on its own
But if you want to have content that's related to that image, we can group it together with <figure>
To add a caption, inside a <figure>, we add a <figcaption> element
<figure>
<img src="/img/image.jpg" alt="Alternative Text" width="100" height="100">
<figcaption>A caption to the image</figcaption>
</figure>
We used main, header, footer, section, and nav
But it didn't really change how the page looked
We've done text styling, but that doesn't do layout
I'm introducing this early because it's the core concept in CSS
How does CSS render a box?
NOTE: There are ways to override this but let's start with the basics
Padding is the distance from the content to the inner edge of the container
Border is the distance from the inner edge of the container to the outer edge of the container
Padding and Border add to the width of the element, so a 100px element with a 10px padding and 2px border on both sides is 124px wide in CSS
Margin is the distance from the outer edge of the container to the next container
div with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)
The challenge with this is that there is no haslayout set, so it "collapses" the div
div with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)
We can set haslayout by saying overflow:hidden; in the CSS
Margin and padding are coded the same.
You need units! Any unit works - typically I like to use em or rem to make things even, but px works as well
element { margin: top right bottom left }
element { padding: top right bottom left }
Border can be more complicated, but we'll stick with the basics: a solid border even all the way around
Width takes any unit - unlike other times, I tend to use pixels here, but fractions of em/rem work fine.
Color takes any color unit.
Type takes any of solid, inset, outset, dashed, double
element { border: type width color }
The example above is … fine. But what if you need to put things next to each other
We're going to use the css property float to "float" things next to each other
float: left; clear:none
divs next to each other with 10px padding around it (yellow), 5px border (black), and 10px margin (blue)Because we floated them, the width shrunk because it's only the content of the div, not the whole width of the container
This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic, how many lines can i fit here? I'm just gonna repeat. This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic
This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic, how many lines can i fit here? I'm just gonna repeat. This is content that I'm just typing to fill some space and I could just go on and on kind of like my lectures and hopefully you get something out of it nullum ad quisquis nonsense ut allium onion garlic
element { float:left; clear:none; }
clear means that "nothing can be to this side"
clear: none means that content can wrap around to the right or left
clear: left means that content will only wrap around the right
Typically, you clear the side you want to float the element towards - e.g. float:left; clear:left; - so that there's no question about what is over there
However, it's a decision to make, especially when putting things together -- do you need to clear what's on the left? Will you have multiple items floated left in order?