Lesson #3: Cascading Style Sheets (CSS)

Okay, now that I've finally remembered this project, we're back! Today's lesson is CSS.

CSS is a big topic. Not as big as HTML, but big enough for its own books to be justified. You don't strictly need CSS to use HTML, but without it, you'd go crazy. After all, why reinvent the wheel?

CSS, or Cascading Style Sheets, controls how your HTML document will look in a web browser. It does that by using a common scheme in the computer world... a properties list. Here's an example of some CSS.

Code:: body { background-image:url('images/background.jpg'); background-color:#FFFFFF; color:black; } a:link {color:#000099;} /* unvisited link */ a:visited {color:#660066;} /* visited link */ a:hover {color:#660066} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ p { margin-right:85px; margin-left:85px; font-family:serif; text-indent:50px; } /*Header*/ div#header { height:67px; text-align:center; background-color:#000000; background-image:url('images/panel.png'); } /*Right Sidebar*/ div#rightbar { text-align:center; position:absolute; right:8px; top:94px; } /*Stuff with borders*/ .bordered { border:3px solid black; } hr { height:3px; color:black; background-color:black; } /*The Content Section*/ div#content { background-color:white; height:100%; width:60%; margin: 0 auto; } /*The Footer*/ #footer { text-align:center; margin-left:100px; margin-right:100px; font-family:monospace; font-size:11px; }

See how it works? You tell it how your site should look by specifying options in a list. First, you tell the CSS what section of the HTML document you want to style. Let's say you want to style every paragraph, so you'd just put a "p" at the front, for the <p> tag in HTML. Next, you open the list with a curly bracket. Then, you type out your list in the format of "option:answer;", and then close it with another curly bracket. Like this:

Code:: p{color:red;font-size:20px;font-family:serif;}

That CSS code will make text look like this:

Red text, 20px in size, with a Serif font.

Of course, there are more options than just size, color, and font. You can see the complete list here if you want.

If you'd like to put a comment in your CSS, you can use the fairly standard slash and then asterisk, then your comment, then an asterisk and a final slash. Like this:

Code:: /* no comment */

Coincidentally, I have a T-Shirt that says that on it.

The important thing for this lesson is where to put your CSS code. You have three options, each suited for a particular use case. The first is the most simple.

If you want to stylize one individual tag, use the "style" attribute, like this:

Code:: <p style="color:red;font-size:20px;font-family:serif;">Red text, 20px in size, with a Serif font.</p>

That way, the style is confined to the contents of that <p> tag. The only problem is, if you only use this method, you've got a lot of code on your hands, and it would be a pain to change even the simplest things, like color. So, you could put all your CSS code in your HTML <head> tag, like this:

Code:: <head> <style> p {color:green;font-family:monospace;} body {background-color:black;} p.red {color:red;} </style> </head>

The CSS code in the <style> tags will apply to the entire page. Sure saves a lot of time.

Now, notice how you specify which tag has what style. On the first line of CSS code, the attributes of green and monospace are given to the <p> tag, and on the next line we see that the <body> has a black background. On the next line, things are shaken up... CSS classes.

What that .red means is that any <p> tag with the class="red" attribute will use the p.red style instead of the p style. This way, you can have more than one style for one tag type. This is especially helpful with <div> tags, because they don't do much on their own.

Also note that you can use hashes to specify an ID, like this:

Code:: p#blue {color:blue;}

This way, you'd tell a paragraph to be blue like this:

Code:: <p id="blue">I'm blue!</p>

I have no idea why you have both class and ID to choose from. Beyond me.

The last way to insert CSS code is often the best, but not always- putting CSS code in its own file, with a .css extension. This way, you can have the same CSS code apply to multiple HTML pages.

You put all the CSS code in this .css file, perhaps, theme.css. Then you reference that .css file in the HTML document, like this:

Code:: <link rel="stylesheet" type="text/css" href="theme.css"/>

Put that code in the <head> tag of your HTML document, and your web browser will look for a file named theme.css in the same folder on your hard drive as the HTML document. If found, the CSS code will be applied to the page.

So, to recap, CSS uses a properties list to tell web browsers how to display an HTML web page. You specify styles per HTML tag type, and you can use IDs or Classes to narrow down exactly what tags receive what format.

Some CSS attributes you'll use a lot are as follows:

"color" changes text color. Example: color:white;

"background-color" changes anything's background color. Example: background-color:green;

"margins" will allow you to add padding space around something. Example: margins:10px;

"border" will let you add a border around an item. Example: border:5px solid periwinkle;

There are tons of different attributes out there, I can't possibly list them all, but thankfully, that's what the W3C is for. If you understand the syntax, you know everything you have to know to make use of CSS.

Today's challenge is to use CSS and an HTML document to make a generic movie poster.

Lesson #3: Cascading Style Sheets (CSS)

Lesson #3: Cascading Style Sheets (CSS)

Lesson #3: Cascading Style Sheets (CSS) :: Comments

Tasks

Quick Links

Social