Intro to CSS

Okay, we've learned HTML. Now we'll introduce you to power designing--using CSS.

CSS allows you to do a lot more than just the plain layout & design possible in HTML. For example, in HTML, indents and spacing is usually only available bilaterally--that is, affecting both sides (left and right, top and bottom) at the same time. It also allows only gross (not precise) control over things like font size. And finally, it is missing several key features completely--for example, the ability to do first-line or hanging indents, line spacing, or exact positioning of objects.

Here are several things that CSS can control:

  • control the top, right, bottom, and left sides independently with margins, padding, and borders;
  • control font size, character spacing, line spacing and all indents to the pixel or pica;
  • control exactly how backgrounds work;
  • control the exact positioning and behavior of images, tables, and other objects;
  • control the appearance and numbering / bullets in lists;
  • control the appearance of the cursor;
  • in limited (browser-specific) cases, create special effects such as rounded corners, drop shadows, and even animations.

Styles and Stylesheets

Additionally, CSS can be used to control the appearance of a whole web page, or a group of web pages. You can define styles which are then called for throughout a page or a site. For example, I might design a style which is called "greenbar" and assign to it several features--I might make it 800 pixels long, 50 pixels high, give it a light green background color, set it to the Verdana font at 20 pt., and give it a drop shadow. Once I have defined the style, all I have to do is add the attribute class="greenbar" to a tag, and all of those features will be applied.

Once I have defined the style, I can either place it at the top of a web page (in the <header> area) and use it for just that page, or I can create a "stylesheet," a special page with just a list of styles, and then link that stylesheet to as many other pages as I want. Then, if I want to change all the web pages on my entire site, all I have to do is change a little typing on my stylesheet, and then all web pages in the entire site change.

To get an idea of what I am talking about, first take a look at the Header above this text--the one that says "Intro to CSS." Remember the <h3> command? That's what I used. But notice that the header above has a blue-gray background, a slight 3-D appearance, and is indented about a half inch. That's because I set the style. To see what I mean, click on this link to see my stylesheet, and scroll down a little to see the "h3" adjustment--and you can see that I told the <h3> command to have special font, color, margin, padding, and border properties to make it look like that. Remember that it looks the same on all the other pages in this site. If I change the stylesheet, all those pages will change.

What We Will Learn

We will not learn the advanced stuff, however--it would take too long. What we will learn is very simple: it is called inline CSS. You do not need to create stylesheets or make style tags in the header. All you have to do is add one attribute to a tag, and then add a few CSS properties and values. So let's start by understanding a few basics.

Properties and Values

In CSS, the basic ways to define styles is with properties and values. This is very similar to attributes and values which we learned for HTML.

A property is the style you will change--for example, font size, color, border, margin, etc. A value is how you change it--for example, 18 pt., red, 4 pixels, etc.

In CSS, the property comes first, followed by a colon. Then you type the value, followed by a semicolon.

As an example, if I want to make a style which changes the font size to 18 points, I would do this:

font-size: 18pt;

That's it! Now, to make it be "inline," we have to put that into a "style" attribute:

style="font-size: 18pt;"

…And then we put the style attribute into a command:

<b style="font-size: 18pt;">

And then it will work. Here is some text using that style:

This is 18pt bold.

If you want more than just one property, just add a space and another property-and-value set--just like HTML command attributes.

Now, to really practice it, it helps to know some properties and values. It would be very hard to memorize all of them, so it is common to have a kind of "cheat sheet," and handy chart which lists the different Properties and Values you can use. Here is a very short cheat sheet:

Property Sample Value
font size: 18 pt;
text-decoration: underline;
line-height: 1.8;
text-indent: 50px;
background-color: white;
background-image: url(image.jpg);
border-width: 5px;
border-color: darkred;
border-style: dashed;
margin: 1in;
margin-left: 2em;
padding: 2pc;
padding-top: 10px;
cursor: crosshair;

Here are some notes. First, not every property works with every HTML tag, nor does it work the same way. For example, if you tried to use the "margin" property with the <b> tag, only the first line would have a margin, and only to the left; but if you used it with the <p> tag, the margin would be around the whole paragraph, on all sides. Not every CSS effect will work exactly the way you want.

Second, several kinds of measures can be used. When giving a font size, for example, you can define the size in points (18pt;), picas (2pc; =24 pt, where 1 pica=12pt), inches (0.5in;), pixels (16px;), or other measurements such as ex, em, mm, cm, or %. Many of these are professional measurements; just using points (pt) is fine.

Third, several properties, including margin, padding, and border, can be defined all at once, or one side at a time. For example, you could say "margin: 4px;" to define a 4-pixel margin, or you could write "margin-top: 2px; margin-right: 8px; margin-bottom: 6px; margin-left: 4px;" thus defining all sides individually. Or you could define just one margin, or just two, or three. The same goes with padding and borders.

This is not on any test for this class, but there is also a trick--a shortcut--you can use for the four-sides properties. For example, instead of writing:

style="margin-top: 2px; margin-right: 8px; margin-bottom: 6px; margin-left: 4px;"

You could write:

style="margin: 2px 8px 6px 4px;"

You just have to remember that the four numbers are Top, Right, Bottom, and Left--think of TRBL, or "TROUBLE" to help you remember.

To see what that looks like, here is sample HTML + CSS, and what it looks like rendered:

<p style="margin-left: 20px;
	padding: 5px 25px 5px 25px;
	width: 2in;
	border-width: 4px 5px 4px 5px;
	border-color: red gray green black;
	border-style: double solid double solid;
	background-color: lightyellow;
	cursor: crosshair;">
		Here is some text to fill up the box. 
		Go ahead and hover the cursor over 
		the box to see what happens--
		it should change to a "crosshairs" cursor.

Here is some text to fill up the box. Go ahead and hover the cursor over the box to see what happens-- it should change to a "crosshairs" cursor.

For a more extended Property & Value cheat sheet, see this page.

Go ahead and try some of this out in the Live Exercise below! I have included the sample above, which you can change as you like to get a feel for things.

Extra cursor types include pointer, move, text, wait, and help; extra border styles include dotted, dashed, solid, double, groove, ridge, inset, and outset (some of the borders will only show up with lighter colors).

If you would like to know how I made those special list types in another chapter, ask me and I'll show you how.



Video Review