CSS Basics

Here at this website, we’re just going to dip our toes in CSS. I’m not a CSS guru, and I’m not promising to make you one. But I do want to lay down the basic principles for you.

Now, I can’t imagine having a lesson on CSS basics and not telling you what CSS stands for. It stands for Cascading Style Sheets.

Cascading? What’s that mean?

The Cascade: The Last Rule Wins

In this case, cascade is referring to fact that the rules are applied sequentially to the HTML elements. The CSS interpreter applies the rules starting with the first rule and works its way down the list until it reaches the last rule. The main effect is that each rule builds on the result of all the previous rules. For example, if you have a CSS rule that underlines some text and the next CSS rule says to make that text red, you end up with text that is both red and underlined.

Another effect of this sequential handling of the rules is that if you specify two or more rules that conflict with each other, the last rule will override all the previous rules. In other words, the last rule is the one that “wins” and gets applied.

Sound confusing?

Let’s look at a example that has nothing to do with CSS or HTML. Pretend your boss gave you a list of things to do to a box.

  1. Fill the box with feathers,
  2. Tape the box shut,
  3. Paint the box blue,
  4. Put the box on the table,
  5. Paint the box red

Notice how the boss asks you to paint the box blue at first. Then, later, he asks you to paint it red. If you follow these rules in order, you will paint the box twice. In the end, the box will be red. Why not just paint it red and ignore the rule to paint it blue? The end result is a red box either way, right?

That’s what CSS does. It only applies the last rule specified for a particular styling action on a particular element or group of elements. In other words, if CSS were following the rules about the box above, it would review the list and see that there are two paint instructions for the same box. It would (virtually) cross out the first paint instruction, then it would perform the actions on the list. It would fill the box with feathers, tape the box shut and put the box on the table and then paint the box red.

This can be rather handy. Let’s say we have 30 boxes, and we want 28 of them to be blue, but we want 2 of them to be red. We can first make a rule that paints all boxes blue, then we can make a rule that paints these two boxes red. Don’t worry about how to do that right now, just know that the “last rule wins” is something we’ll use to our advantage often in CSS.

What can we use CSS for?

So, what can we use CSS for? CSS can provide styling information for almost any HTML element. You can specify tons of different things. Since we’re just learning CSS basics, though, I’ll only list some of the more common things that you can specify with CSS style rules…

  • Size,
  • Position,
  • Background colors and images,
  • Font information (bold, italics, color, size, font family, etc.),
  • Text alignment,
  • Margins, padding, and borders,
  • Some mouse-over effects,
  • And much, much, more.

What Do CSS Rules Look Like?

CSS rules are actually called “properties,” and they consist of a property name and a property value. The pattern is always the property name followed by a colon, followed by the property value, followed by a semicolon (name: value;). For instance, if we were specifying the height of an element, we would do so with the height property. Below is an example of the CSS property specifying a height of 100 pixels.

height: 100px;

The space between the colon (:) and the value is optional. In other words, it doesn’t matter if you write height:100px; or height: 100px;. The semicolon (;) is required in all cases except two, in which case it’s optional (I’ll cover the exceptions later). It is never wrong to follow the property with the semicolon; so, if in doubt, add the semicolon.

The property names must be written in lower case.

Adding CSS Rules to a Webpage

Knowing CSS basics like what it stands for and a general idea of how it works is of no use if we don’t know how to put CSS rules into a web page. There are three ways to add CSS rules to a web page:

  1. External style sheets,
  2. Internal CSS style sheets, or
  3. Inline styles.

We’ll cover inline styles first. Inline styles can be added by using the HTML style attribute.

This entry was posted in CSS Tutorials. Bookmark the permalink.

Leave a Reply