Learn CSS and stylesheets with CSS Bro

CSS was invented over twenty years ago, around the same time JavaScript was created. The web we know today could not exist without CSS or JavaScript: CSS has become so advanced that you can actually program (very simple) apps with CSS only. (Do an online search for "CSS experiments" - you'll be amazed.)

The basics: what is CSS?

A cascade IRL CSS stands for "Cascading Style Sheets". The "style sheets" part is self-explanatory: those are the files whose content adds styling your HTML content.

A "cascade" is a small waterfall: water falls through from the top and ends at the bottom. At the bottom, you have a mix of water that comes from all levels.

This not-so-great metaphor describes what happens with CSS. (It's especially unclear since most people don't know what a cascade is, so they can't relate to the concept from the start). I'll do my best to clarify.

User Agent Styles

Elements have default styles in your browser: a top-header (<h1>), for example, is much larger than regular text. That's the "user-agent styles" - meaning the ones built into your browser. If you manually add a style to <h1> tags, your styles will cascade over (overwrite) the browser's default styling for that element. Here are two <h1> tags - one with default styling and one with custom styling: H1 tags with and without custom styling

Note: if you're curious, I used the style attribute to inject CSS code into the second <h1>. This is what it looks like behind the scenes: Injecting inline CSS code to style an element

Rules, declarations, selectors properties, and values

A CSS file contains two things: comments (ignored by the browser, only there to help humans) and CSS code that adds styles to various HTML elements.

CSS Comments

You start a CSS comment by typing a forward-slash and an asterisk, without spaces in between: /*. Anything that follows these two characters will be ignored by the browser. To end a CSS comment, type these same characters in reverse - an asterisk followed by an asterisk: */. Below are two separate CSS comments. The first one is a "single-line comment" and the second is a "multiline comment": CSS single-line comment and multiline comment

CSS Rules

A CSS rule is a label for CSS code. That label determines what elements will be affected. The content of the rule describes the changes that this rule will make on the elements matched by the label. For example, a rule can make all buttons red. Or only some buttons. Or all links - etc. A rule contains two parts: the selector is the label that describes the targeted elements. The second part is the body of the rule: an opening curly brace { starts the body of the rule, and a closing curly brace ends } the body. Here's a rule that affects any button in our document: An empty CSS rule for buttons

This is an empty rule: since there's nothing between the curly braces, that rule doesn't do anything. Some people like to put a space before the opening curly brace. I don't. Others like putting the opening curly brace on its own line. I don't either. It doesn't matter: use the convention that makes sense in your brain.

Selectors

The label I talked about is called a selector. That's because it selects the HTML elements that are targeted. In the empty rule above, CSS actually did something: it looked at the web page and selected all <button> elements. But nothing happened visually since we didn't tell it what to do to buttons. A selector can be a tag name (button, h1, p, etc.) It can also be other things we'll cover later.

Notice how on this page the secondary headings (h2 and h3) look similar. That's because I have a CSS rule that targets both and applies some shared styles to all h2 elements and all h3 elements. Fortunately, I didn't have to write a duplicate rule. Several selectors, separated by a comma, can share the same rule. This rule assigns to all secondary headers a blue background and some white text: Multiple selectors sharing the same rule

Declarations

A CSS declaration is a visual instruction. The selector portion of the rule told the browser what element(s) to match. The body portion of the rule contains one or more declarations (instructions). Each declaration includes a property name and a value for that property. A property is like a CSS attribute: each element has a font size, a color, sometimes a border, etc. All these attributes can be customized using a CSS property. The value you type after the property applies the change.

Below is a rule that gives all buttons on our page a red background. Notice the colon (:) after the property and the semicolon (;) after the value: A CSS declaration: a property-value combo

Since text would be hard to read, let's add a second declaration to our rule: A CSS rule that includes two declarations

Note: the semicolon (;) is optional after the last declaration in the rule.

Linking a stylesheet from a web page

One way to import styles into your website is by using the <link> tag. When you add the rel attribute and set it to stylesheet, the browser knows that it's supposed to retrieve styles from a CSS file. A specialized editor or IDE will also know that and helpfully suggest CSS (or SASS/SCSS) files: Linking a stylesheet from an HTML document

Hard-coding styles into a web page

Another way to spruce up a web page is to include a <style> tag in your HTML file. Ideally, you should place your <style> tag in the <head> tag. When a web browser parses your HTML code, it will first look for external resources to download inside the <head> tag (see tip below). The only content you should type inside a <style> tag is CSS rules or CSS comments, like this: A style tag can contain CSS rules and comments

Tip: for top performance, all styles should be referenced in the <head> of the document. Also, avoid importing stylesheets using the CSS @import directive. "FOUC" is an acronym for "Flash Of Unstyled Content": it's what happens when the browser loads CSS after the page has already loaded. You definitely don't want your visitors to experience FOUC.

Injecting styles into a specific element

Nearly all HTML elements support the style attribute. The value (content) of the style attribute is any valid CSS code: that includes CSS comments and CSS declarations. Styles added that way are called "inline styles", and they have the highest cascading priority. Here's an example of inline styles for a <p> tag:

Note: you can overwrite an inline style by using the "!important" modifier after a CSS declaration. This is frowned upon because it makes your CSS harder to reason about and debug. If you're tempted to use !important in your code, it's generally a sign that your CSS isn't well architected.