AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Forums Forum ] [Contact Us Contact ] |WebDevTips Privacy Privacy |

WebDevTips Pick Of The Day : ".$todaytip[$today]." |

"; ?>
Print This Page



 


You are here : Home - Web Development - Style Sheets - Guide - Embedded Styles

Embedded 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?






Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]