This page covers:
Intro to CSS
Adding Style Sheets to HTML Pages
Adding Inline Style Tags
Linking to an External Style Sheet
Introduction to CSS
HTML 4.0 deprecated many tags that were related to layout control of HTML pages in
an effort to detach the structural from the presentation aspects of documents. This encourages the
use of style sheets instead of HTML for rendering of presentation. Cascading Style Sheets
allow you define a set of markup elements and their attributes for a consistent layout with
minimal coding. CSS definitions can also be kept in an external file which allows you to use
one css file for an entire site allowing for quick and easy updating and a consistent look throughout
the site.
Adding Style Sheets to HTML Pages
Style sheets tags can be included at the top of your HTML page, used inline (within the file), or as
an external file (via linking). When writing style sheet definitions within your html page, you need
to place them within the HEAD element. View the example below:
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
P {font-family: Arial;
font-size: 12px;}
</STYLE>
</HEAD>
<BODY>
body of page goes here
</BODY>
</HTML>
Adding Inline Style Tags
When adding style tags to individual elements, for example if you want to change the look of
of the text in just one paragraph, you add inline style tags. The code would like like this:
<P STYLE="font-family: Times; font-size: 16px; line-height: 3; color: blue; background-color: white;">
This is the what the
paragraph would look like using the above example code. Notice the difference in font face, size,
color, line height, and background color from the rest of this page
NOTE: Be mindful when using an external style sheet with inline style tags. In
Explorer you can do this with no problem. In Netscape Navigator however, if you link to an
external style sheet and try to use inline style tags, the definitions in the external style sheet
do not work. For this example, I had to include the above style definitions and assign them to
the ".example" class and then use <P class="example"> in order to not
lose the definitions I had originally set up for the rest of the page. Please go to the next
page to learn more about style classes.
Linking to an External Style Sheet
When using an external style sheet you will need to create a link to that style sheet page.
This link, like the inline style sheet definitions, goes within the HEAD element.
For an example of what a .css page looks like, click here.
The link on the .html page looks like this:
<LINK REL="stylesheet" HREF="mystyle.css" TYPE="text/css">
|
