HTML Advanced Topics

12b. More On Style Sheets:

You may have noticed that there is a certain limitation to creating styles that effect every instance of the tag in a document. For example, in this set of attributes.... 

<head>
	<style>
	h3 {
		font: 24pt Arial Black, Arial;
		color:palegreen;
		background-color:ForestGreen;
		font-weight: bold;
		text-decoration:underline;}
	</style>
</head>

...every instance of h3 throughout the document will carry these attributes.

However, there is a way to assign specific styles to specific tags. Lets say you wanted some of your <h3> tags to carry the above attributes and some of your tags to carry a different set of attributes. You would then assign each of the styles a name. So here are our new tag style assignments:

<head>
	<style>
	h3.greenset {
		font: 24pt Arial Black, Arial;
		color:palegreen;
		background-color:ForestGreen;
		font-weight: bold;
		text-decoration:underline;}

	h3.pinkset {
		font: 24pt Arial Black, Arial;
		color:violet;
		background-color:pink;
		font-weight: bold;
		text-decoration:underline;}
	</style>
</head>

To name a style assigned to a tag you add a .name to the tag within the style tag, be it within a header style tag or within an external style sheet. You cannot assign a name to an in-line style tag. In-line style tags are assigned to the tag in which they are coded and cannot be reused this is why webmasters use header embeded tags and external style sheets.

When you add a name to a style to assign that style to a specific tag you MUST ’call’ the style. To call the style see the section Calling a Style From a Tag below.

You can also create generic styles that you can call from any tag. To create a generic style you just name the tag without adding an assigned tag to the front. For example... 

	.purpletag {
		font: 24pt Arial Black, Arial;
		color:violet;}

...can be called from any tag.


Calling a Style From a Tag

Here is a sample HTML page with an header embedded style tag complete with style ’calls’: 

<html>
<head>
	<title>Title Bar</title>
<style>
h3.greenset{
		font: 18pt Arial Black, Arial;
		color:palegreen;
		background-color:ForestGreen;
		font-weight: bold;
		text-decoration:underline;}
		
h3.pinkset{
		font: 18pt Arial Black, Arial;
		color:violet;
		background-color:pink;
		font-weight: bold;
		text-decoration:underline;}
.purpletag {
		font: 18pt Arial Black, Arial;
		color:violet;}
</style>

</head>

<body>
    <h3 class="greenset">This is my green h3 tag.</h3>
    <h3 class="pinkset">This is my pink h3 tag.</h3>
    <p class="purpletag">This is my generic tag call
</body>
</html>

The class="purpletag" is the ’call’ to the style. The class="purpletag" calls the purpletag style and assigns it to the tag in which it has been inserted in. So in the above example the purpletag style is assigned to the paragraph.

Here is how the above code effects the text:

This is my green h3 tag.

This is my pink h3 tag.

This is my generic tag call


Misc Notes About Style Sheets

You can also do multiple tag assignment to a single style like this: 

<style>
	h2, h3, h4 {font: 14pt Arial;}
</style>

You can assign a style to every tag on a page by using a wildcard character: 

<style>
	* {font: 14pt Arial;}
</style>

A List of Attributes

color:  nameofcolor;Sets the text color
background-color:  nameofcolor;Sets the background color
background-image:   url("picturename.jpg");Puts a picture in the background.
background-attachment:  fixed;This attribute is used with a background picture.
It sets the background picture in place so that
the text NOT the picture scrolls on the screen.
background-repeat:   repeat-x;Take the background image and repeat it horizontally.
background-repeat:   repeat-y;Take the background image and repeat it vertically.
font-weight:   bold;bold the text
font-size:   7;Sets font size to any number between +-7 and 0, 0 and 7
font-style: italic;set font to italic
border-color:   colorname;set border color for all 4 sides
border-top-color:   colorname;set border color for all the top
border-right-color:   colorname;set border color for the right side
border-left-color:   colorname;set border color for the left side
border-top-style:   dotted;set border for top side *see 1.for list of values
border-right-style:   dotted;set border for right side *see 1.for list of values
border-left-style:   dotted;set border for left side *see 1.for list of values
border-bottom-style:   dotted;set border for bottom side *see 1.for list of values
1.dotted, dashed, solid, double, groove, ridge, inset

There are MANY style sheet attributes that you can use in your style tags/sheets, but this should be enough to get you started.

Return To The Top

Creative Commons License
This work is licensed under a Creative Commons License.
(<< Back)     [Home]     (Next >>)
Hosted by www.Geocities.ws

1