Share via

Creating a CSS File for your Web site

  • Article

Dave Berry wrote an excellent article about Cascading Style Sheets (CSS) on MSDN (Using Cascading Style Sheets on Your Web Site), so I won't bore you with the details of CSS.  However, one reader commented that the article didn't cover how to create an external CSS file.  This is very easy, so here's how.

Say you have the following embedded style sheet on a page and you want to share the styles with other pages in your site. (See "Three Types of Cascading Style Sheets: External, Embedded, and Inline" in Dave's article.)

 <style>
BODY
{font-family: Comic Sans, Verdana, Tahoma, Arial;
font-size: 10pt;
margin: 0em;}

P
{padding-left: 5;
padding-right: 5;}

H1
{font-size: 11pt;
font-weight: bold;
color: white;
background: #FF3399;
padding-top: 10;
padding-bottom: 5;
padding-left: 10;
padding-right: 10;}
</style>

All you do is copy the contents of the STYLE element (the text between the tags but not the tags themselves) into a new file.  (In FrontPage 2003, you can create a new blank page, display the page in Code view, and paste the CSS code.  In earlier versions, you can either use HTML view or Notepad.)  Then save the file with a .CSS extension.  I usually call the main CSS file for a Web site web.css just for the sake of consistency, but you can name it anything you want.

The contents of your new file should look something like this:

 BODY
 {font-family: Comic Sans, Verdana, Tahoma, Arial;
 font-size: 10pt;
 margin: 0em;}

P
 {padding-left: 5;
 padding-right: 5;}

H1
 {font-size: 11pt;
 font-weight: bold;
 color: white;
 background: #FF3399;
 padding-top: 10;
 padding-bottom: 5;
 padding-left: 10;
 padding-right: 10;}

Once you have the CSS file, you can remove the STYLE element and it's contents from the first page, and add a LINK element or an @Import statement.  I rarely have more than one CSS file for a Web site, so I generally use the LINK element (like the one shown below).

 <link rel="stylesheet" type="text/css" href="web.css">

But if you anticipate using more than one CSS file in a Web site, you can use the @import statement, as shown in the following code:

 <style type="text/css">
 @import url(web.css);
 @import url(page.css);
 </style>

Dave gives a great explanation of the difference between these two and what happens if two styles conflict with each other.

It really is that simple.  Deciding which styles to use is much more difficult.  I (personally) like the CSS attribute reference list on MSDN, but keep in mind that some of the CSS attributes listed are IE only (like the scrollbar styles).  Plus, there are literally dozens of online CSS resources.  Here are just a few that I found through the new MSN search.  Try your own search and find your own CSS resources.

Comments