This is an example of a document that uses an external style sheet. The style settings for each tag are set in the external style sheet and every page that is linked to it will look the same. To link to the style sheet put the following line (with appropriate changes to the file name) inside of the head tags (see the source for this page):
<link rel=stylesheet type="text/css" href="styleSheetExample.css">You will, of course, have to create and save a file with the settings. It needs to be saved with a css extension. My example page, styleSheetExample.css, is given below. These settings are the same as for the internal style sheet example.
Here is a link to styleSheetExample.css . You can right click on the link to save to a disk or open in a text editor like notepad.p {If you want to change the style for a single instance just put the style attributes directly into the html tag. For example, to make only one item of an ordered list be viewed as arial, 8pt, and blue:
font-family: Helvetica, Arial, Verdana;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12pt;
color: #55aa55
}
blockquote {
font-family: Verdana, Helvetica;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 8pt;
color: #550000
}
h2 {
font-family: Arial, Verdana, Helvetica;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 14pt;
color: #ff0000
}
a {
background-color: #ccccee;
color: #ff5555;
letter-spacing: 2pt;
font-family: arial;
font-weight: bold;
font-variant: normal;
font-size: 8pt;
font-style: normal;
text-decoration: underline;
text-transform: none;
}
a:hover {
background-color: #0000cc;
color: #ffffcc;
letter-spacing: normal;
font-family: serif;
font-weight: bold;
font-variant: normal;
font-size: 14pt;
font-style: italic;
text-decoration: none;
text-transform: none;
}
<ol>
<li style="font-family:arial,verdana,helvetica; font-size:8pt; color:#0000ff;">First one</li>
<li>next one</li>
</ol>