Cascading Style Sheets: The How and the Why - An example of an external style sheet
(Page 4 of 6 )
External style sheets are similar to internal style sheets, however, they are stripped of the <style> and </style> tags, and need to be referenced from another HTML file to be used.
Create a new file called “mystyle.css” and enter the following code into it:
h1
{
color: #a00808;
font-family: Verdana;
size: 18pt
}Next, create a HTML file and name it external.html. Enter the following code into external.html:
<html>
<head>
<title> External Style Sheet Reference Example </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is one big H1 tag!</h1>
</body>
</html>As mentioned above, you can see that the actual code in mystyle.css is exactly the same as it was in the inline example. In our HTML file, we simply place a <link> tag in the <head> section of our page. The rel=”stylesheet” attribute tells the browser that the link to the external file is a style sheet. The type=”text/css” attribute tells the browser that mystyle.css is a text file containing css (cascading style sheet) declarations. Lastly, the href=”mystyle.css” attribute tells the browser that the actual file we want to load is mystyle.css.
Next: A more advanced style sheet example >>
More HTML Articles
More By Mitchell Harper
