Internal Stylesheets and the Style Tag

An internal stylesheet is a set of CSS style blocks that are contained within an HTML document. These blocks must be contained within a pair of style tags. Well, lets start by looking at the style tag itself.

The HTML Style Tag

First we’ll consider the style tag without reference to the rest of the web page…just to simplify things for now. That way we can focus on how the style tag works. Later we can see how it relates to the rest of the HTML document.

Well, the style tag is just the word “style” inside the angle brackets. The <style> tag has a single attribute called type. The only value that the type attribute can have (in a style tag) is “text/CSS”. Whether you set the type attribute or not, there’ll be no difference in how the browser displays the webpage. However, it is customary to set the type attribute on a <style> tag. So, without adding any style rules for now, let’s see what a pair of typical style tags look like.

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

Adding the CSS Style Blocks

Of course, the style tags by themselves are pointless without the CSS style blocks. All you need to do is insert whatever CSS blocks you want between the style tags. So, for example, a block of CSS rules that set all DIVs to little, red 20×20 squares might look like the example below.

<style type="text/css">
div {
    width: 20px;
    height: 20px;
    background-color: red;
}
</style>

It’s optional (and rarely done anymore) to wrap the CSS blocks within a pair of HTML comment tags (<!‐‐   ‐‐>). This is done to prevent ancient browsers that don’t understand the <style> tag from displaying the CSS rules as text on the webpage. I still generally do this… perhaps more out of habit than anything else. Below I reprint the above example but this time with the comment tags…just so you can see what it looks like.

<style type="text/css">
<!‐‐
div {
    width: 20px;
    height: 20px;
    background-color: red;
}
‐‐>
</style>

Internal Style Sheet Placement

You can actually have more than one internal style sheet within an HTML document. And you can put them anywhere between the <html></html> tags that you want. However, it is customary (and recommended) to have a single internal style sheet and to place it inside the <head> of the document.

Below is a simple HTML document with an internal stylesheet that makes all DIVs appear as small red boxes and it makes all paragraphs (<p>) appear with bold, blue text.

<html>
<head>
<title>Internal Stylesheet Example</title>

<style type="text/css">
div {
    width: 20px;
    height: 20px;
    background: red;
}    

p {
    color: blue;
    font-weight: bold;
}
</style>
</head>

<p>Here is a paragraph.</p>

<div></div>

</html>

Internal stylesheets are best for providing style information that affects elements on a single page, but if you want to make style rules that affect all pages across your site, then you should use an external stylesheet. So, on to my next lesson: External Stylesheets.

This entry was posted in CSS Tutorials. Bookmark the permalink.

Leave a Reply