Cascading Style Sheets: The How and the Why - An example of an inline style sheet
(Page 3 of 6 )
Style sheets can either be inline (included as part of a HTML document), or, referenced externally (Contained in a separate file and referenced from the HTML document). Inline style sheets are contained wholly within a HTML document and will only change the look and layout of that HTML file.
Open your favorite text editor and enter the following code. Save the file as stylesheet.html and open it in your browser:
<html>
<head>
<title> Cascading Style Sheet Example </title>
<style>
h1
{
color: #636594;
font-family: Verdana;
size: 18pt;
}
</style>
</head>
<body>
<h1>This is one big H1 tag!</h1>
</body>
</html>
When you fire up your browser, you should get a page that looks like this:
Let's step through the style code step by step.
Firstly, we have a pretty standard HTML header. The page starts with the <html> tag followed by the <head> tag. Next, we use a standard <title> tag to set the title of the page we are working with.
Notice, though, that before the <head> tag is closed, we have our <style> tag, its contents, and then the closing </style> tag.
<style>
h1
{
color: #636594;
font-family: Verdana;
size: 18pt;
}
</style>When you add the style sheet code inline (as part of the HTML document), it must be bound by <style> and </style> tags respectively. Our example is working with the <h1> tag. We are changing three attributes of the <h1>'s style: the text color (color), the font that any <h1> tags on the page will be displayed in (font-family), and lastly, the size of the font (size).
The code between the { and } are known as the declarations. Our sample code has three. Try changing the hexadecimal value of the color attribute to #A00808 and then save and refresh the page. It should look like this:
Next: An example of an external style sheet >>
More HTML Articles
More By Mitchell Harper
