free for webmasters
webmaster resources

Path = Home > Using CSS > How To Use Embedded Cascading Style Sheets

How To Use Embedded Cascading Style Sheets

An embedded cascading style sheet is, as the name suggests, embedded in a web page. This means that you can use different styles on each page if you wish. However, the disadvantage is that if for example, you want to change the page background color for every page on your site, you will need to edit every page to do this.

A CSS style consists of two main parts - called the selector and the declaration. The selector is the name of the style (for example, <h1>, or <p>) and the declaration defines what the style elements are. It is formed of two parts, the property (for example, <font-size>), and value (for example, 14px).

A basic embedded style sheet looks like this :-

<style type="text/css">
<!--
the selector goes here{
}
the declaration goes here }
-->
</style>

This code is placed in the <head> section of your web page after the title and other metatags - usually just before the closing </head> tag.

<html>
<head>
<title>title</title>
<metatags>
<style type="text/css">
<!--
the selector goes here{
}
the declaration goes here }
-->
</style>
</head>

A sample embedded style sheet might look like this :-

<style type="text/css">
<!--
A:link
{
color: #3535BB;
text-decoration: underline;
}
A:active
{
COLOR: #660099;
text-decoration: underline;
}
A:visited
{
COLOR: #3535BB;
text-decoration: underline;
}
A:hover
{
COLOR: #FF0000;
text-decoration: underline;
}
h1
{
font: bold 16px Verdana, Arial, Helvetica, sans-serif;
color: #595959;
}
hr
{
text-decoration: none;
height: 1px;
color: #B7B7B7;
}
body {
background: #BFDFDF;
font-family: Arial, Helvetica, sans-serif;
}
.menu {
padding: 4px;
font: 11px Geneva, Arial, Helvetica, sans-serif;
background: #E9F3F3;
color: #6E6E6E;
}
-->
</style>