HomeEmbedded Style Sheets
Following on from the inline example, we'll apply styles to the page. Here is an example of embedded html.
<head><title>title</title>
<style type="text/css">
<!--
B {
color:red;
text-decoration:underline;
}
-->
</style>
</head>
Your style declarations get placed between the
<style type="text/css"> </style> tags which gets placed between <head> </head> tags.
The format for defining your style is
B {
color:red;
text-decoration:underline;
}
You must be careful with your syntax when using style sheets. When creating a style we follow this rule
[TAGNAME] { [properties we want to change for this tag] }
example : B{ [your stuff] }
The properties syntax follows this pattern
[ELEMENT] : [VALUE] ;
Example : color:red;
In the above example all the <b> tags on the page will have the style applied. We are now progressing in making maintenance easier. To change the style for the <b> tag in future all we have to do is change the style properties in the style sheet in the document head - no more hunting and editing the <b> tags.
The only problem with embedded style sheets is that it only changes that 1 page - the style isn't applied to the whole site.
To create a style sheet that can be applied to the whole site we need to use an external style sheet.
Why not discuss this article in our forum?
]
[
]