CSS Overview

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.

In effect, each new line in a CSS document says to your visitor’s browser “Oh, and if you see this on the webpage, then do that.” Because HTML and CSS both have a well-defined, highly prescriptive syntax, web developers can create sites that are responsive and engaging: That is, sites that are dynamically built to meet the perceived needs of each new visitor. Are you a first-time visitor to my site from France on an old Android phone? Are you opening my site from an office in Mexico, using a new Macbook connected to a fancy wrap-around HD screen? Or are you maybe connecting to my server via a satellite phone, precariously linked to an ancient teletype machine? Is your browser the latest version, or something out of date? Do you have javascript temporarily deactivated? Is the window reduced to a 300x240 rectangle in the corner of your screen? It is hard to anticipate every possible visitor to your site, but well-built CSS can usually make the most those combinations, presenting visitors with a version of your HTML that presents your content to its best advantage.

CSS Example

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 h1 selector.

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:

property:  value;

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.

CSS syntax

Not all CSS is created equal. Just like there are some elements you encounter in HTML all the time (<p>, <img>) and ones you rarely see (<h6>), the same will be true of your CSS. Similarly, you will find that there are properties and 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:

  1. Often uses a shorthand version that is extra hard to read (more on this presently);
  2. Is full of all sorts of complicated rules that will confuse and confound beginners;
  3. 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?”