CSS Basics

If you've never seen styles before, you're likely to be a bit confused when you look at them. It looks like strange computer code, because that's what it is, but you'll understand it a little better by the time that we're done. I'll give you a quick example that will hopefully help demystify things a little bit. Here is an example of a simple style:

body {
  background-color: white;
  color: black;
  margin: 0;
  }

The above style says that the background color for the body of the HTML will be white, the text color will be black, and there will be no margins around the edge of the page, meaning that the text will go all the way to the edge of the screen in the browser. The braces, or "curly braces" as they are sometimes called, { } are used in CSS in a way that is similar to the "pointy brackets" in HTML. You have an opening curly brace { and a closing curly brace }. The word before the opening curly brace — "body" in this case — indicates where to apply the style: to the <body> tag in this example. If we want the style to apply to something else, we have to change the word before the first curly bracket. In the example below, the same style is applied to the <p> tag, rather than the <body> tag:

p {
  background-color: white;
  color: black;
  margin: 0;
  }

This means that every paragraph will have a white background, black text, and no margin. We could change things up a bit, by applying different styles to all of the level 1 headings, like this:

h1 {
  background-color: red;
  color: white;
  margin: 10px;
  padding: 10px;
  font-size: 200%;
  font-weight: bold;
  }

The above style will give all level 1 headings a red background, white text, and a margin of 10 pixels. In addition, the text will have a padding of 10 pixels around it, and the font will appear twice as large as normal text, and it will be bold. It will look like this:

Here is an example with the styles applied.

Note: In case you didn't know, pixels are "The basic unit of the composition of an image on a television screen, computer monitor, or similar display" (American Heritage Dictionary, 4th edition). There are other units of measurement for use in CSS too, such as inches, centimeters, percentage, and even units you probably haven't heard of before, such as em. Pixels is usually NOT the preferred unit of measurement. Usually em and % are preferred. I'll discuss this in more detail later.

Now you've seen some style definitions, and you've seen how they can look in a browser. Of course we've only scratched the surface. Styles can do a lot more than these few things. We'll get into those details as we go along. First, though, it's helpful to know how styles work.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.