Making Your Site Pop With CSS

As I said in the HTML basics tutorial, HTML is very good for defining what text on a page is, but not very good at setting what that text looks like. That's a job for stylesheets, or CSS.

CSS (Cascading StyleSheets) is the language you use to tell the browser how elements of your page look. Everything from font families, text size, colors and background colors, borders, image effects and tints, and so on are the domain of CSS. You'll also use CSS to lay your page out, setting things such as width, margins, padding, text alignment, and browser behavior such as whitespace handling and box behavior.

Sound complicated? It's very much not. I'll walk you through using CSS to take a header and a paragraph and making it more attractive to read.

The structure of a stylesheet

A stylesheet at its core is made up of rulesets. A ruleset is an element selector and a list of declarations—basically, what you're styling and what that looks like. You can style any element that gets displayed on the page itself, even <body>. Here's a few declarations applied to a sample <body> element (or, the <body> ruleset):

body {
	width: 800px;
	background-color: #eee;
	padding: 10px;
	line-height: 1.5;
	font-family: Georgia, Serif; }

Whitespace (line breaks and spaces) doesn't matter much in a stylesheet. This could be one line if you so chose. I've split it up into a list to make it much easier to read, and I recommend you do the same.

Explanation

To explain each line of this:

  1. body {...} (element selector)—To style an element, write its tag name and follow with a set of curly brackets. All declarations need to go within these curly brackets!
  2. width: 800px; (width declaration)—This is a stylesheet declaration, which defines a visual aspect of an element. Every declaration has two parts to it, a property (width) and then its property value (800px). This sets the width of the <body> element to 800 pixels wide. Every declaration needs to have a semicolon at the end of it, or else it can cause the rest of the stylesheet to fail.
  3. background-color: #eee; (background color declaration)—Colors are a prime example of what CSS is good for. This sets the background of the entire page to an off-white color, which softens it a bit.
  4. padding: 10px; (padding declaration)—The padding declaration sets the amount of space between the sides of the element and the text inside it. Padding makes text more comfortable to read by giving it a bit of space. In our example, we have ten pixels of padding on all sides of the element.
  5. line-height: 1.5; (text line height declaration)—The browser default of 1.2 for the line height of the text is very dense. We've set it to 1.5 to make it a little easier to follow. (If your page is supposed to look like a school paper, you can double space your text by setting line-height: 2; on an element.) If you don't specify a unit for the line height, the number acts as a multiplier for the font size, in this case, 1em x 1.5.
  6. font-family: Georgia, Serif; (font declaration)—font-family sets the font the text will use. If the browser can't find the font you specify, it will fall back to the next one in the list, or if it can't find any in your list, the user's default font. For this page, I've set the preferred font to Georgia. If it isn't available, the browser instead uses the default serif font.

Results

Here's what a paragraph looks like with your browser's default styling, versus my custom styling:

Lorem ipsum dolor amet glossier dolore portland, tbh forage eiusmod keytar master cleanse meh hell of. Narwhal gentrify messenger bag single-origin coffee cloud bread. La croix food truck everyday carry air plant hella woke beard biodiesel viral YOLO health goth selfies marfa officia. Brooklyn echo park sint aute tofu cardigan esse.

Lorem ipsum dolor amet glossier dolore portland, tbh forage eiusmod keytar master cleanse meh hell of. Narwhal gentrify messenger bag single-origin coffee cloud bread. La croix food truck everyday carry air plant hella woke beard biodiesel viral YOLO health goth selfies marfa officia. Brooklyn echo park sint aute tofu cardigan esse.

Just from those few lines, I've made the page much more aesthetically pleasing to read. As you get further along with CSS, you'll be able to do pretty much anything visually with it. I'll leave you with a link to this site's stylesheet, so you can study it for yourself.

Summary:

  1. CSS is a language for determining how things on your page look. It's used for everything visually, from colors to layout.
  2. CSS is made up of rulesets. Each ruleset has an element selector, or how you select what you're styling, and then a list of declarations.
  3. Declarations are made up of two parts, a property and then its property value. Together, they specify one visual aspect of that element. Setting p to color: white makes all paragraphs on that page white.
  4. Every ruleset needs to have a set of curly brackets, and every declaration needs to be followed with a semicolon. If something breaks, check your syntax.

Further reading