So how do you really do it?
Let's take a look at the code needed to link to an external CSS from an HTML document as well as the code for a sample CSS file. Styles can be embedded within an HTML page, but the true strength of CSS is recognized when external CSS files are used. Unlike a hyperlink that appears on the page when displayed in a browser, the link to an external CSS is embedded in the HTML header code pointing to the .css file. Here’s an example:
HTML Code
<html>
<head>
<title>Creating Accessible Web Sites Tutorial: CSS</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="sample.css">
<META CONTENT="Creating Accessible Web Sites Tutorial">
</head>
As you will notice in the example below, the syntax used for CSS is very basic. The names used to define styles for a particular element are exactly the same as the tags used in HTML code (H1 for heading 1, p for paragraph, a for links, etc.) Each element has different characteristics you can specify, such as color, font and font family, and size. Some elements have characteristics that apply only to that element, such as the text-decoration characteristic for the element a:link (which removes the underline from a text link). CSS files can be typed in a text editor and then saved as a plain text file with the .css extension. To learn more of the possibilities, visit one of the CSS resources listed below.
CSS Code
body {
background-color: #ffffff;
font-family: Garamond, Times, Palatino, serif;
font-size: 150%
}
h1 {
color: #000033;
font-size: 32pt;
line-height: 32pt;
font-family: Verdana, Tahoma, Arial, sanserif;
}
p {
font-family: Garamond, Times, Palatino, serif;
line-height: 18pt;
margin-left: 20pt;
margin-right: 70pt
}
A:link {
color: #874582;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
Ready to try it?
