We started out by saying that HTML isn’t really a programming language. Instead, it is a “markup language” – in effect, a giant, digital set of those highlighter markers that everyone owns but no one uses. When I drag that neon-orange magic marker across the page of my Chem textbook, picking and choosing the extra juicy parts of any chapter, I’m not changing the textbook itself, but I’m adding a layer of extra data about the text that is already there. “This is important,” my highlighter screams. “Read this, not that!”
That extra data (the “markup”) – exists on top of the original data – and is therefore called “metadata.” A markup language like HTML allows us to create data about data.
CSS is not really a true programming language, either, but it comes awfully close to being one: CSS is a set of rules – of conditions – that are applied to the content of your HTML document based on its metadata layer.
Let’s start simply: Here’s a snippet of a CSS file that will make all of our HTML files' h1 headers very large and very red. It also introduces a gold stripe behind the heading.
NB: The block above is actually a working snippet of code (a “pen”) from the site codepen.io. You can click on the link to open up the original pen on their site, or you can click on either the HTML or CSS buttons to see and edit the code that is already there. In any case, these boxes offer you a chance to play around with the code and see how your changes affect the result.
CSS Syntax Overview
So how does it work? Each rule in CSS begins with a SELECTOR. The selector is just the simple counterpart to the ELEMENT TAG in HTML. When I want my CSS to look for all of the paragraphs
<p> in an HTML file, then I use the CSS
p selector. Alternatively, when I want to assign a style to the footer in my HTML file, I use the CSS
footer selector. Want to make all of the top-level headings stand out? Then start with the
The SELECTOR goes on the first line, and is followed immediately by an opening curly brace; a closing curly brace sits a few lines below. In between those curly braces are a series of CSS DECLARATIONS. Those declarations vary a great deal, but they are always related to the SELECTOR and they are usually pretty easy to figure out because the “language” of CSS has such strict rules about syntax. Each declaration will look exactly like this:
Sometimes there will be just one
property:value pair; in some cases, there may be dozens. All of them refer to rules that must be enacted upon its SELECTOR, in the order in which the rule is encountered. Getting the grammar and syntax of these declarations right is the first step in understanding CSS.
Here’s an annotated version of our first CSS statement from above. Note that just about everything is lowercase, and the punctuation (curly braces, colons, and semicolons) are very predictably placed.
Not all CSS is created equal. Just like there are some elements you encounter in HTML all the time (
<img>) and ones you rarely see (
<h6>), the same will be true of your CSS. Similarly, you will find that there are
values you use all the time, while you will discover others you have never heard of.
I’ve tried to find a good beginner’s cheat sheet for your reference, but the fact of the matter is that no one online seems to understand that “cheat sheet” means “only the most important parts, not every @$#%@ bit of information you can squeeze onto a page.”
Why does that matter? Because CSS:
- Often uses a shorthand version that is extra hard to read (more on this presently);
- Is full of all sorts of complicated rules that will confuse and confound beginners;
- Honestly only works about 95% of the time for 95% of visitors. The number of hacks that are necessary to make the web work is astonishing to me.
So maybe we’ll try making our own cheatsheet as we go along. Meanwhile, until we figure out something better, here’s one option: cheatsheet.pdf. Honestly, though, can anything that is 11 pages long call itself a “cheatsheet”? No, it cannot.
Prof. LeMasters' Straight Talk(tm)
Look: I don’t want you to feel put-off by the complexity of it all: Granted, some some of you may not find CSS complicated at all, but I do. While it has its moments, I dislike CSS because I feel like it pretends to be both simple and straightforward (in practice, it seldom is). I am also suspicious of CSS because of the people who advocate on its behalf: The CSS true-believer crowd evangelizes endlessly about how their approach to CSS solves all problems (“grid!”, “flex-box!”, “flex-grid!"). To the contrary, CSS is complicated because it was invented as a hack to solve a problem that can’t be solved: “How can I use technology from the 1980’s to make everybody’s screen look amazing, always?”