An Intro to CSS

CSS stands for Cascading Style Sheets

CSS is the standard language/format for styling web pages, which specifies what the page’s HTML will look like in the browser.

CSS – MDN
MDN, as is custom.
Basics of CSS
Another ASMR introduction from Laurel.
Google’s web.dev CSS Course
Different order from ours, but pretty good.
HTML Color Codes
Too many ads, but some nice tools for color.
Google Fonts
We’ll use this for free font families.
Wakamai Fondue
“What can my font do?”

In our ongoing analogy, CSS is the skin of the web. Just like HTML, at its most basic it is still just text, in a file, on a computer. It can live inside HTML documents themselves, but is more commonly seen on its own with the extension .css

CSS came after HTML, first proposed by Håkon Wium Lie in 1994⁠—who was working with our friend Tim at CERN and wanted more control over the presentation of web pages. (Tim was against the idea, thinking it should be up to each user⁠—he lost.) It’s had three major revisions that have grown the vocabulary:

CSS 1, 1996
CSS 2, 1998
CSS 3, 1999

For the past decade or so, features have been added incrementally by browsers “within” the CSS 3 “standard” (as it was/is with HTML). That’s how it goes, these days.

The change in relationship between generator and consumer of information is going to take some getting used to.

•••

I’ll comment that style sheets constitute a wormhole into unspeakable universes. People start thinking they’ll just set up a little file […] and soon it grows uncontrollable.

James D. Mason, 1994

Where CSS Lives

Before we get into the CSS syntax itself, let’s talk about how it is incorporated with your HTML.

There are three ways it can be added:

Inline on HTML tags themselves
Via <style> elements in HTML documents
As separate/external .css files, via <link> elements

1. Inline with `style=`

This is the most straightforward way to add styles, directly as attributes in HTML tags:

						<p style="color: red;">This text will be red!</p>

Seems obvious. However this has some downsides⁠—imagine you want to style all of your paragraphs in the same way, and with multiple properties:

						<p style="color: red; font-family: sans-serif;">This text will be red!</p>
<p style="color: red; font-family: sans-serif;">I’d also like this to be red.</p>
<p style="color: red; font-family: sans-serif;">And they are all sans-serif, too.</p>

It makes it hard to read, and hard to change and maintain⁠—you’d have to update every single instance. (In software, we’d refer to this as brittle⁠—meaning it is easy to break.)

2. `<style>` in HTML

So the next way that was added to the standard was using a special HTML element, <style>, that wraps blocks of CSS that then apply to an entire document. They go up in the <head> of our HTML documents.

The rules are written written with selectors⁠—more on those, below. But importantly, we can now control styling of all the paragraphs easily, at once.

						<!doctype html>
<html>
	<head>
		<title>Page title</title>
		<style>
			p {
				color: red;
				font-family: sans-serif;
			}
		</style>
	</head>
	<body>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<p>This is third paragraph.</p>
	</body>
</html>

3. External with `<link>`

So this is already much better, allowing us to style whole pages easily and consistently. But what about when we have multiple pages?

If you wanted a whole site to use the same styles, you’d have to duplicate the <style> tag over and over, updating it everywhere whenever it changes. Still brittle. So along comes the <link> element.

						<!-- `index.html` -->
<!doctype html>
<html>
	<head>
		<title>Page title</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<p>This is third paragraph.</p>
	</body>
</html>

And then in a separate style.css file (in this case, in the same directory as our HTML file), we can have the same rules as before⁠—no need for the outside wrapping <style> tag.

This will apply to any page that we add the <link> to, and updating the styles will now change the color of the paragraphs for our entire web site.

						/* `style.css` */
p {
	color: red;
	font-family: sans-serif;
}

We’ll talk more about specificity later, but know that the inline approach takes precedent over other methods⁠—under the “closest, then lowest” logic.

Separation of Concerns

Separation of Concerns is an ideology that code should be split up into sections that are responsible for a single behavior⁠—the smaller, the better. In the case of websites⁠—our HTML, CSS, and JS map to the different behaviors of content, form, and function. (Or in our anatomical analogy: skeleton, skin, and muscles.) These are different concerns.

It’s much easier to understand how it all comes together if you keep the code for these three behaviors in separate files. Your IDE will be easier to use; your diffs more sensical; you’ll know where to start looking to figure something out.

CSS Rules

Even though it is used to style HTML elements, the syntax of CSS is very different. CSS rules are made up of selectors⁠—used to target certain elements⁠—and then the declarations that you want to apply to them. For this thing, do this!

CSS Syntax – MDN
They really need to update their diagrams.
CSS Reference – MDN
Their exhaustive list goes into the hundreds.

The curly brackets { } (also known as mustaches or handlebars, for their shape) enclose all the declarations you want to apply to a given selector. These declarations are in turn made up of properties and values.

Properties are always separated from their corresponding values by a colon :, and each declaration line has to end in a semicolon ;. (It’s just how it is!) Also, there are no spaces between values and their units (like 2rem)! You will get used to it.

There are many, many, many CSS properties. We’ll go over some in our exercises, but look through these to become more familiar.

Ergonomics

Just like HTML, CSS usually does not care about capitalization, extra white space, or line breaks. Folks generally use tabs/indenting to indicate hierarchy, but again it is just whatever makes it easier for you!

Capitalization does matter when using id or classes as selectors, which have to match the HTML to target correctly.

Like with HTML, it’s easiest just to be consistent and stick to lowercase (and no spaces)!

						p {
	color: red;
	font-family: 'Gorton', sans-serif;
}

/* Is the same as… */

P{COLOR:RED;FONT-FAMILY:'GORTON',SANS-SERIF;}

Basic Selectors

Selectors are used to target certain HTML elements within the page. These can get pretty complicated, but we’ll look at the three simplest and most common targeting methods to start:

Type, Class, and ID Selectors – MDN
MDN again, as we do.
Selectors – web.dev
Google, too.

Elements (like p a main etc.)
Classes (written .class-name )
Identifiers (and #some-id )

1. By Element Type: `p` `a` `main` etc.

If you want to change the styles for all instances of a given HTML element, you drop the < > from the tag for an element selector. These are called type selectors:

Note that CSS has different /* comment syntax */ too.

2. With a Class: `.class-name`

But maybe you don’t want to style all of the paragraphs. You can then use a class to target specific instances. They are added as an attribute on the element you want to target:

The value here is our class name, which we write in CSS by prefixing with a . as with .highlight and .faded.

You can use these over and over, on any kind of element. And individual elements can have multiple classes, too. Class names can be whatever you want⁠—there are whole methodologies about what to call these things! (And many an argument.) They are the most common way to target things in CSS, especially at scale.

We’ll talk about how conflicting rules are handled, below.

3. With an Identifier: `#some-id`

You can also use an id, which is a kind of special attribute that can only be used once in an HTML document. These are useful thus useful for targeting singular things⁠—like your navigation, the document title, specific headings, etc:

These are prefixed by # in CSS, as with #title and #introduction. If you remember, they can also be used as link destinations!

Fancy Selectors

Combinations and Groups: `selector.selector`

You can use combinations of the above elements, classes, and identifiers to be even more specific⁠—however, this likely means you just need to rethink your HTML structure. (We’ll unpack specificity, below.)

More commonly, you might apply declarations to multiple selectors, called group selectors, with a comma-delineated selector list:

With Specific Attributes: `selector[attribute]`

You can use the various attributes as selectors too, using square brackets [ ]. These are usually very similar to using classes, but can help you differentiate things like internal and external links, for example:

Pseudo-Classes: `selector:state` `selector:instance`

These are special selectors, added to element, class, or id, separated with :, which target unique states or instances of HTML elements. You’ll often see these used to target link states:

Note that :hover works on any element, not just links!

Other common pseudo-Class examples have to do with counts and positions. The syntax for these can be complicated, but they are very powerful:

Pseudo-Elements: `selector::pseudo`

Slightly different the various pseudo-elements, which let you style a particular part of an element. You’ll most often see these as ::before and ::after, which let us insert things around text⁠—or targeting first letters/lines:

Note the difference in : for pseudo-selectors and :: for pseudo-elements.

Finally, Combinators: `>` `+` `~`

Last, you will often want to target something based on its relationship to other elements⁠—its siblings or its parents. For this, CSS has combinators, which let you relate all the various selectors we’ve learned about here together:

Importantly, combinators can only target elements top-down, meaning that it can only “see” elements before and above themselves⁠—meaning their previous (older?) siblings or their parents. This directionality somewhat corresponds with the cascade, which we’ll talk about shortly.

The Golden Age of CSS

`:has()` Really …Has Changed Things!

For many, many years folks have wanted a “parent selector” in CSS⁠—meaning a way to apply a style to a parent/container based on one of its children. This has not been possible before, as we mentioned above.

CSS has finally added the :has() pseudo-class, just in the past couple years. It allows us to write much simpler, logical styles:

						div:has(p) { background-color: red; }

The property is applied on the parent (here, the div) based on the presence of the child (the p). You can use any selector, in either position. This is very powerful, especially with dynamic content. All the major browsers have baseline (widely available) support for it now.

Oh Also, Nesting?!

While we’re on the subject of cutting-edge additions to CSS⁠—even more recently browsers have added support for nesting selectors.

This more straightforward style of writing descendent/child selectors was popularized by the ubiquitous SASS extension⁠—which improved the ergonomics of CSS ahead of the language incorporating new features.

Instead of writing like this:

						header,
footer { color: blue; }

header .child,
footer .child { color: teal; }

header .another-child,
footer .another-child { color: aqua; }

You can write like this:

						header,
footer {
	color: blue;

	.child { color: teal; }

	.another-child { color: aqua; }
}

…to make the hierarchical relationship self-evident, less redundant, and easier to change⁠—especially as your stylesheets inevitably grow! Each level (generation?) can be any CSS selector.

These can dramatically improve your editing experience!

Specificity

We can’t talk about CSS without talking about specificity⁠—bane of many a front-end developer.

Specifics on CSS Specificity – CSS Tricks
A brief overview of a very complicated thing.
Specificity Calculator
Compare selector values and see who wins.

The first three targeting methods (element, .class, #id) are listed in increasing order of specificity, meaning that a class trumps an element rule, and an id trumps a class. Identifiers are thus more specific than classes, which are more specific than element selectors. (And you shouldn’t really use them, but inline styles beat them all.) Take this example:

You could write a long book (and many people have) about CSS specificity⁠—the myriad of ways that some CSS rules take precedent over others. It is often one the more frustrating parts (especially when working with legacy code that is poorly considered).

Oh Right, the Cascade

Yikes, we haven’t even talked about that first C ! Remember, it stands for cascading.

Introducing the CSS Cascade – MDN
MDN is particularly dry on this one.
The CSS Cascade
A much nicer interactive explanation from Amelia Wattenberger.

This means that when there is a tie (like two classes applying the same property), the lowest rule wins⁠—literally the one further down within a CSS document, or within a style tag. If you have multiple CSS documents with <link> element, the lower linked document will take precedence:

Try to avoid relying on this or even having it come up! This is one of the reasons people are frustrated by CSS.

And Inheritance

To add even more confusion, some CSS properties set on a parent also apply to their children⁠—such as color or font-family. Most spacing/layout properties, like width and margin do not. (More on those, next week.)

Inheritance – web.dev
Google is better on this one.

This allows you to quickly set some properties globally, without having many brittle/redundant rules, as we did before:

All the children inherit the body styles. Ah, finally, sans-serif.

Color and Type Properties

Alright, so all this has been about targeting elements⁠—what about actually styling them? Let’s introduce a few quick properties to get us started.

Color

Besides the basic examples above, color can be specified in a few different ways:

CSS Colors – MDN
Come for the picker, stay for all the info.

There are 147 named CSS colors! tomato is a favorite.

Named colors are quick to work with when you know a few, but hsla (and recently, color-mix) offer a much more intuitive/human way to adjust and work with colors and transparency.

These can also all be applied to background-color (and border, but we’ll talk about that next week).

Fonts

Then perhaps most importantly, you’ll always be customizing your typography⁠—starting with the font-family property. Remember, the web is text all the way down:

Fundamental Text and Font Styling – MDN
All your properties.

With great power comes great responsibility.

Web font licensing is a Whole Big Thing⁠—so let’s start out by making use of Google Fonts, which offers many open-source typefaces nicely packaged for web use. You can select families and weights there to easily include in your pages, as in the example above.

Other Type Properties

Once you’ve got a font-family in, there are many additional properties to control the typography:

Web Typography –
Interneting Is Hard
A more qualitative take.

For now, just eyeball your units in rem, focusing on relationships. We’ll talk about other absolute and relative units soon.

Resets

As we talked about last week, browsers have their own, built-in way that they display HTML elements. These user-agent styles are specific, somewhat, to each platform and each browser.

This is the “look” we have been seeing when we write plain HTML without any CSS⁠—usually Times New Roman, with blue links, and small spacing between elements.

Often, when you are working towards your own design, you will find yourself fighting against these built-in styles. So many designers/front-end folk instead start with resets⁠—a semi-standard collection of CSS rules that “zero out” the browser’s built-in styles.

This means you have to write everything yourself, but you have more control and aren’t building on unknown foundations. And things should be (more) consistent, across browsers and platforms.

Here is a simple, modern one for your <head>:

						<link href="https://typography-interaction-2526.github.io/assets/reset.css" rel="stylesheet">

This is what we use here for our course site!

The author of HTML documents has no influence over the presentation. Indeed, if conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

The last point has especially been a source of much frustration among professions that are used to being in control of paper-based publishing.

This proposal tries to soften the tension between the author and the reader.

Håkon Wium Lie, 1994