NHS Designs
Web Design
HTML

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:

<style type="text/css">


</style>

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:

<html>
<head>
   <title>Starbuzz Coffee</title>
      <style type="text/css">


      </style>
   </head>
<body>
[remainder of HTML code]

 

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.

<html>
<head>
   <title>Starbuzz Coffee</title>
      <style type="text/css">
         body {
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border: 1px dotted gray;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif;
         }
      </style>
   </head>
<body>
[remainder of HTML code]

 

Cruisin' with Style

It's time for another test drive, so reload 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?

 

Assignment

Who Does What?

Match each line in the style definition to what it does.

Start by writing numbers 1 through 5 down the left side of your page, and then the matching letter for each.

CSS Code

 

What the Code Does

1.
background-color: #d2b48c;

 

a) defines the font to use for text

2.
margin-left: 20%;
margin-right: 20%

 

b) defines a border around the body that is dotted and the color gray

3.
border: 1px dotted gray;

 

c) sets the left and right margins to take up 20% of the page each

4.
padding: 10px 10px 10px 10px;

 

d) sets the background color to a tan color

5.
font-family: sans-serif;

 

e) creates some padding around the body of the page

 

  • Turn in your paper.
  • Turn in your lastnamefirstinitial_starbuzz folder.

 

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


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com
>