Creating a CSS File for your Web site

lisawoll — Tue, 01 Feb 2005 18:00:00 GMT

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.

Changing the appearance of the browser scrollbar

lisawoll — Fri, 03 Sep 2004 21:36:00 GMT

I wanted to call this tip "Why I love Internet Explorer" because you can only do this in Internet Explorer. I would guess that most, if not all, hard-core Web developers know how to do this, but for any of you who don't and want to know, this tip's for you.

There may be some of you who will want to criticize this tip because it only shows up in Internet Explorer and not any other browser, but using the code provided here doesn't cause any script errors, and if you display a page that uses it in another browser, the browser will just ignore it, so no harm done.

When I first saw a page where the scrollbar was different, I thought, "cool, I want to know how to do that." I found out that it was very simple. All you need to do is use one or more of the following seven CSS attributes:

scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-face-color
scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-base-color
scrollbar-arrow-color

You can change the appearance of the scrollbar for the APPLET, BDO, BODY, DIV, EMBED, OBJECT, and TEXTAREA elements just by putting the CSS attributes into the style attribute of the element, placing them within a STYLE element in the HEAD section of any page, or adding them to an external CSS file.

Note Some of the above elements only affect a portion of the page, for example the TEXTAREA element, and the appearance of the scrollbars will change only for that element and not the entire page. To affect the browser window for the entire page, put the settings in the style for the BODY element.
Also, if you want to change the appearance of the scrollbars within an IFRAME element, you would need to put the CSS attributes within the page referenced in the src attribute for the IFRAME element rather than in the page that contains the IFRAME element. Setting the scrollbar attributes for the IFRAME itself has no effect.

Here's some simple code. For more information on any of these CSS attributes, see the CSS reference documentation on MSDN.

<style>
body{
 scrollbar-3dlight-color: red;
 scrollbar-highlight-color: blue;
 scrollbar-face-color: navy;
 scrollbar-shadow-color: black;
 scrollbar-darkshadow-color: yellow;
 scrollbar-base-color: green;
 scrollbar-arrow-color: aqua;}
</style>

Copy and paste this code into the HEAD section of any page, and then open the page in Internet Explorer. Voila!

The following is an enlarged image of what the scrollbar looks like with these scrollbar settings. I intentionally specified different colors for each of the CSS attributes in this example to make it easy for you to determine which attribute applies to the different parts of the scroll bar.

Please don't copy this code wholesale without changing it because this code creates a MUCHO ugly scrollbar, and I don't want to be indirectly responsible for any MUCHO ugly web sites. However, with a little coordinating of the colors, you can create scrollbars that match the colors in your web site. Very cool!

Lisa Wollin : CSS

Creating a CSS File for your Web site

Changing the appearance of the browser scrollbar