&

🎯

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.

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.) It’s had three major revisions that have grown the vocabulary:

For the past decade or so, features have been added incrementally by browsers “within” the CSS 3 “standard.” 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. […] That said, I’ll comment that style sheets constitute a wormhole into unspeakable universes. People start thinking they’ll just set up a little file in SGML or something else, and soon it grows [uncontrollable].

James D. Mason

Where CSS lives

Before we get into CSS itself, let’s talk about how it is incorporated with HTML. There are three ways it can be added:

  1. Inline on HTML tags themselves
  2. Via <style> elements in HTML documents
  3. 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>

Seams 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. Along comes <style>

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.

<!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.

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

We’ll talk more about specificity later, but it is worth noting that the inline approach will usually take precedent over other methods—under the “closest, then lowest” logic.

Separation of Concerns

Separation of Concerns is the ideology that code should be split up into sections that are responsible for a single behavior. In the case of websites, HTML, CSS, and JS can be seen as content, form, and function. (Or in our analogy: skeleton, skin, and muscles.) It’s often easier to reason about the website’s code if you keep the code for those three behaviors in separate files.

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.

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 20px)!


There are many, many CSS properties. (Here is a shorter “common” list.) We’ll go over some in our exercise, but look through these to become more familiar.

Ergonomics

Just like HTML, CSS 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.

p {
	color: red;
}

/* Is the same as… */

P { COLOR: RED; }

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 methods to start:

  1. Elements
  2. Classes
  3. ID

1. By element type

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

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. They are the most common way to target things in CSS.

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

3. With an 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. They can also be used as link destinations.

Fancy selectors

Combinations and groups

You can use combinations of the above elements, classes, and ID 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

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

Pseudo-classes

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

:hover also works on any element, not just links!

Other common examples have to do with counts and positions:

Pseudo-elements

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.

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.

:has() will change this!

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 year. It will allow us to write much simpler, logical styles:

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

Safari and Chrome both added support—but Firefox is still notably absent. Someday!

Specificity

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. IDs 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).

Suffice it to say it’s complicated. The easiest way to avoid specificity problems is generally to stay at the same level throughout your HTML, usually by just using classes throughout.

Oh right, the cascade

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

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:

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.)

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:

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

Named colors are quick to work with when you know a few, but hsla offers a more intuitive way to adjust and work with colors.

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. Remember, the web is text all the way down:

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 additional properties to control the typography:

For now, you can just specify units in px to match Figma. 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-2324.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 be in control of paper-based publishing. This proposal tries to soften the tension between the author and the reader.

Håkon Wium Lie