AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
WebDevTips Pick Of The Day : Beat The Spam Bots |

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.

<style type="text/css"> 
B { 


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 { 

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


[back to top of page]   

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

[Copyright © WebDevTips]