Time to learn about CSS. Finally.
This is the part that tells your computer how things should look. You know how HTML gives semantic information and structures your content? CSS is the part of a website that gives your content some style. This language is all about (megamind voice) Presentation!
Where HTML can label things, CSS takes a look at those labels, and then describes how each thing should look and where it goes.
CSS is all about rules. A single rule is about what you're doing to things labeled a particular way. Each rule starts with a selector, which says what element (rule) the rule is applied to. Then we have the declarations block, which holds all the instructions of the rule. This sits inside curly brackets. Have the final curly bracket sit on its own line, tab indented, so it's obvious when and where each rule ends. The start of a rule should have the selector and the opening curly bracket on their own line. This keeps your code human readable.
Inside the declarations block is where you're setting the rules for how things look. You start with a property, then a colon, then we give the values of that property. Always end with a semicolon!
You want a .css file that you can reference, so you can decide how things should look and only have to make changes in one place.
You call this file by putting in your head.
This is a relative link, so your page will go looking in the same folder that your page is in.
I'm using that style.css file in this folder, so my learningWebsite will look different from the rest of my website.
(You know, once I have a “rest of my website.”)
Here's a reminder that good folder ordering and relative/root-relative links are important!
You can give your entire website a unified feel, and then in certain sections make specific styles if you'd like.
To make is a root-relative link, put '/style.css' in instead, and put your overarching stylesheet in your main folder for every page on your website to find.
I don't feel like writing redundant shit, so check out my style.css page or the actual tutorial for informational shit.
This site is mostly demonstrative, with any information being revealed by how transparent the site is.
My content/text is intended to provide description and emotional context so it might stick with you, and explaining what I learn is for my benefit, and only incidentally yours right now.
While I will (and in some cases already did) go back to what I've written and cleared things up, or used current knowledge, I also try to have my first use of something be as I explain it, and then link to that explanation when I put my new knowledge to use on “past” pages.
But let's make a liar out of me by giving you some non-CSS rules.
CSS uses boxes for everything.
Your HTML headers and paragraphs
The em and strong tags are in-line elements, meaning their style happens on a line inside and on top of blocks.
display: block; but I don't yet know why you'd want to.I feel like a gremlin who wants to order boxes horizontally, flipping what width and height mean. This sounds like a super bad idea I probably won't go through with, because doing it completely sounds ugly as hell. I might do it as an exercise in working backwards to define-back what I need until it's obvious what happened, but it's aesthetically tolerable.
Here's what's going on with a box:
The padding of a box is still part of it, so if you make the box clickable or give it a background color, those values apply to the padding as well.
Margins are blank, and “collapse vertically.“
When margins overlap vertically, only the biggest margin appears, not a combination of both margins.
This means margins define the minimum amount of space between objects.
To prevent this, and add the margins instead, just stick an invisible block with no margin in there!
You have to be sure that it's invisible, so you should label it distinctly so it doesn't get some style accidentally applied. There's also the flexbox for “modern websites,” which I haven't learned about yet, but doesn't have collapsing margins.
Containers that don't hold semantic content, but are used for graphic purposes. <div> makes blocks, while <span> makes inline elements. Be sure to give invisible elements a specific class so you don't style them into the visible spectrum.
width and height override the default of letting html elements define stuff, and give things an explicit size for the content.
The padding and border are still there unless you add the property and value of
box-sizing: border-box; /* Add this */
to your rule, so the padding and borders are counted when making something n pixels tall or wide.
It's considered best practice to do this, and means you know how big something ACTUALLY is.
You also have to have a width listed in order to align it with the page! If you don't give something a width or max-width, it extends from edge to edge, and alignment is meaningless.
They're an attribute in HTML, they're a selector in CSS, they're… classes!
When someone talks about what ‘robots’ read of a site, they also mean anything that looks for an outline. Such as screenreaders. This is important for you! Talking to robots isn't all about searches and SEO, robots are important tools that provide information that others can easily access using programs you might not have expected. I know that if I hadn't known a tiny, tiny bit about how screenreaders worked, I probably would have ignored any advice about Search Engine Optimization.
You can give something more than one class value. All the values of an attribute in HTML can just be listed with a space seperating them in a single class attribute. What order they're applied in is determined by the order they're given in the CSS only.
There are also pseudo-classes.