4.4 Redefine existing tags and Create your own class

Let's have another look at the example of an HTML page with an internal style sheet:

<html>
<head>
<title> </title>

<style type="text/css">
body {background-color: #669900; }

h2{color: #FFFFFF;}

h3{font-style:italic ;

font-size:14px ; }

</style>

</head>

<body>

<h2> One heading </h2>

Just normal text

<h3> Another heading </h3>

Just normal text

</body>

</html>

Re-defining existing tags

With a little experimentation, you soon discover that the CSS rules are referring tags which already exist in HTML, and over-writing them with new rules. "Take the h2 tag and instead of displaying it at x size and colour, make it y size and colour."

Create your own class

You can go further than this and create your own custom class. Let's say you want to make a bit of text bold.

First, you choose a name for the class you are about to create – let's call it "fatter"

To create my own custom "fatter" class, I insert the following rule between the <style> tags, in my internal style sheet:

.fatter { font-weight: bold;}

Notice the little "." in front of the "fatter" property in that style definition.
How do I apply this in my HTML document? I make use of a generic tag such as <span>, and place it around the part of the text I wish to apply the rule to:

Sometimes I wonder what <span> this </span> is all really about.

This still won't work, until I link that <span> tag with the relevant class, like this:

Sometimes I wonder what <span class = "fatter"> this </span> is all really about.

Notice that you dont use the "." in front of the class name when you specify it in HTML

To make sure you know what to put where, here is the entire document again:

<html>
<head>
<title> </title>

<style type="text/css">
body {background-color: #669900; }

h2{color: #FFFFFF;}

h3{font-style:italic ;

font-size:14px ; }

.fatter { font-weight: bold;}

</style>

</head>

<body>

<h2> One heading </h2>

Sometimes I wonder what <span class = "fatter"> this </span> is all really about.

<h3> Another heading </h3>

Just normal text

</body>

</html>

In this example, I used a <span> tag because it is neutral – the span tag by itself does not change the look of the text in any way. But you can link any tag to a class. For example, you could link a <h2> tag – like this:

<h2 class = "fatter"> another bit of text </h2>

Tags: No Comments

bravemouse

teach yourself