DES 3006 - Web Design II

Week Two | Part Two: How CSS Works

Thinking Inside the Box.

Take a close look at the following illustration:

The area at the center labeled 'content' can be any tag --- any content item --- you want to style.

You can style it's color, background color, size, position, visibility, font face, font style, font size ... everything.

The areas around the content box are additional things you can style such as lines, borders, the distance between a border and its content, the amount of space between one content item and another, and so on.

Selector Review.

This illustration should look to familiar to you by now, but we'll review it just the same:

The selector is the html tag you want to style:

The property is what you want to modify for the selector:

font-size:

A value is the attribute you apply to the property:

12px

The declaration is the attribute(s) and value(s) surrounded by curly brackets:

p {font-size: 12px;}

Building a Style Sheet.

Let's begin with something simple.

I want to style my h2 tags all the same way. I don't know exactly how yet, but I do know I want them all to look the same.

Step 1: I'll start by using one of the Web page templates I created:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<head>
<title>This is My Page Title</title>
</head>


<body>


</body>
</html>

Step 2: Next I'll add the h2 tag where I want it to appear in the body tag of my page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<head>
<title>This is My Page Title</title>
</head>


<body>


<h2>Here is my Page heading.</h2>


</body>
</html>

Step 3: In the head tag underneath the title tag at the top of my page I'll add the code to create the embedded cascading style sheet for my page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<head>
<title>This is My Page Title</title>

<style type="text/css">
	
<!--
	

	
-->
	
</style>
	
</head>


<body>


<h2>Here is my Page heading.</h2>


</body>
</html>

Step 4: Now I'll style my h2 selector using some of the properties and attributes for CSS.

Remember, the only differences between the h2 selector and the h2 tag is that the selector appears in my style sheet and the tag appears in the body surrounded by chevrons (< >):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<head>
<title>This is My Page Title</title>

<style type="text/css">
	
<!--
	
    h2 {font-family: Verdana, sans-serif;
	font-size: 1.7em;
	color:  #e2e3e1;
	margin: 5px 0 0 5px;
	background-color: transparent;
	}
	
-->
	
</style>
	
</head>


<body>


<h2>Here is my Page heading.</h2>


</body>
</html>

Step 5: The result when I open the file in my browser is:

Here is my Page heading.

Cool beans. Onward!

Go to Week Two - Part Three.