Tutorial: Add CSS to Your Page

for one page

For styling one page, put the stylesheet in the <head> area of your html. (I.e. between <head> and </head>)

Your information should look like this:

<style type="text/css">
<!--

/*CSS rules in here.*/


-->
</style>

for multiple pages

If you have more than one page sharing the same style (as most web sites do), you should create a special .css file and link to it. This will make your pages faster to download, since your visitor's web browser will "cache" the file when the first page is visited.

To create your CSS file, you can use a simple text editor such as Notepad. (You can, of course, also use a high-powered web editor such as Dreamweaver.) Just be sure to use the CSS extension. For example: mystyle.css.

Your CSS file will then be linked from the <head> section of your HTML pages. Here is what your link will look like *if* your style and your page are in the same folder:

<link href="mystyle.css" rel="stylesheet" type="text/css" media="screen">

You may wonder about "screen." I have included that, because you can create a separate style sheet for print. After all, what gets seen on the web might not really be necessary to get printed on paper. For example, in your print style sheet, you can take out your images, headers, etc, and just leave the main content of the page. This tutorial, however, is simply about linking. Here is a link to a print stylesheet:

<link href="myprintstyle.css" rel="stylesheet" type="text/css" media="print">

Of course, you can name your stylesheet whatever you wish, such as "fuddyduddy.css" etc.

 

« Return to tutorials main index.

Update your web browser: Internet Explorer|Firefox|Opera|Safari (Win & Mac)

Protect
your computer:

ESET Smart Security - Save 25% NOD32 v3.0 - Save 25% - Download Now
G. P. Concrete Specialist siteColumbia Benefit siteCovenant Classical Christian School siteCone Consulting Group siteMetanarrative music project siteTrinity Presbyterian Church siteTruth and Beauty arts siteChrist Covenant church siteTrinity Reformation Church site

SELECT PORTFOLIO

Click on the monitor for more info about a site.

all our docs recent work

AFFILIATE

Customize your presentation with original music from MrGoJingles.