Introduction To CSS
Embedded Stylesheets

All style definitions must be entered within the <style> tag which should be placed in the <head> section of the web page.

Example of a style definition

<style type="text/css">
h1 {
font-family: Arial;
font-size: 12pt;
}
</style>

Each style rule is made up of the selector (in this case h1) and the declaration block (everything between the curly braces). In this case all instances of the h1 tag in the web page would be displayed using the font Arial and in 12pt size. Notice that each declaration is separated from the others with a semicolon.

Imagine that you only want these style rules to apply to some instances of the h1 tag. The style rules would then be specified as follows,

<style type="text/css">
h1.apply {
font-family: Arial;
font-size: 12pt;
}
</style>

To apply these rules you would enter the h1 tag as follows,

<h1 class="apply">My heading</h1>

To have rules which can be applied to more than one type of tag you could modify the selector further.

<style type="text/css">
.apply {
font-family: Arial;
font-size: 12pt;
}
</style>

Any tag which has the attribute class="apply" would now be displayed following these rules.

You can also use id selectors. The id attribute of a tag can be used to uniquely identify an element of a web page and apply specific formatting rules.

<style type="text/css">
h1#apply {
font-family: Arial;
font-size: 12pt;
}
</style>

To apply these rules you would enter the h1 tag as follows,

<h1 id="apply">My heading</h1>