Take the HTML 04 Quiz

HTML 04: The style element

Meet the Style Element

To add style, you add a new element to your page - the <style> element. Let's go back to the main Starbuzz page and add some style. Save the HTML page linked below to your desktop, then open it from Notepad.

Right-click and select Save Target As...

This is the code you'll add just below the title element:

The <style> tag requires an attribute, called type which tells the browser the kind of style you're using. Because you're going to use CSS, you need to specify the "text/css" type.

Attributes give you a way to provide additional information about an element. Like, if you have a style element, the attribute type allows you to say exactly what kidn of style you are talking about. Also, the src attribute in an image tag tells the browser where to find the file. You'll be seeing a lot more attributes in the future. Just remember they give you some extra info about the element.

Start Coding

Now you're going to define the styles for the page in between the <style> and </style> tags.

Make sure you've put the new code inside the head, like this:

Giving Starbuzz Some Style

Now that you've got a <style> element in the HTML, all you need to do is supply some CSS to give the page a little pizazz. Below you'll find some CSS already "baked" for you. Type it in as-is. You'll learn how the markup works later, after you've seen what it can do.

So take a look at the CSS and then add it to your file. Don't forget all the little semi-colons and braces. Once you've got it typed in, double-check your work and save your file.

Cruisin' with Style

It's time for another test drive, so relaod your HTML file in the browser again. This time you should see the Starbuzz Web page has a whole new look.

What did each line of the new style do to the page? Take notes for the quiz!

Source: "Head First HTML: with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

Take the HTML 04 Quiz