Creating a CSS File for your Web site


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 (28)

  1. Dave says:

    One thing I’ve noticed. On high traffic sites such as yahoo or amazon. You’ll hardly ever see them use a .css file.

    Is this because .01% of the time IE fails to load external files (a known issue)? You’ve probably seen examples of this yourself, when you view a page that looks all messed up, then simply refreshing the page fixes the issue.

    It seems like if you want your page to load correctly 100% of the time you have to put your .css files and .js files inline and pay the extra bandwidth cost.

    Another thing developers need to know about when using external .css file is always version it via the name of the file. NEVER edit a css file without renaming it. Some users are behind corporate proxy servers that cache images and css files. Some simply refuse to get any new version of a .css file or image file regardless of filesize or timestamp change. By simply versioning in the name, you’ll be ensured they always get the latest version no matter how their browser or corporate proxy server is configured.

    My two cents.

  2. Visual Studio .NET 2003 has an excellent CSS editor

    http://moskalyuk.com/blog/my-favorite-css-editor-visual-studio-net/330

    Another great one is Firefox WebDeveloper toolbar, allowing CSS modifications on the fly.

    https://addons.update.mozilla.org/extensions/moreinfo.php?id=60

  3. Jim says:

    The code in the examples is invalid. With all due respect, shouldn’t somebody who is writing for the FrontPage developers blog be familiar enough with CSS to write it without making such basic errors? CSS lengths other than 0 require units. You’ve provided units for a 0 length (which isn’t necessary), and omitted units for every other length (which is necessary) – basically the opposite of what you are required to do.

    > Another thing developers need to know about when using external .css file is always version it via the name of the file. NEVER edit a css file without renaming it. Some users are behind corporate proxy servers that cache images and css files. Some simply refuse to get any new version of a .css file or image file regardless of filesize or timestamp change.

    This is normal and correct behaviour for these proxies. If this doesn’t suit you as a developer, there’s no need for workarounds like renaming the file, just learn a little more about how HTTP works. This is one good tutorial:

    http://www.mnot.net/cache_docs/

    Version numbers in the URI can be useful in the case of external stylesheets that don’t change for long periods of time, but if it’s something that you are currently developing or something that changes on a more frequent basis, you are probably better off using something like must-revalidate or short expiry times.

  4. MSDNArchive says:

    Just a comment to Jim: CSS will default to pixel measurement if a measurement type isn’t noted. So the code

    padding-left: 5;

    actually means:

    padding-left: 5px;

    This works across all the browsers I’ve tested it against, which is to say all major browsers. Perhaps that’s not the way we’re taught, it is the way it works.

  5. Jim says:

    > CSS will default to pixel measurement if a measurement type isn’t noted.

    This is not true. If you read the CSS 2.1 specification, you will find that the padding-left property requires either a length or a percentage property value:

    http://www.w3.org/TR/CSS21/box.html#padding-properties

    Non-zero lengths require a unit identifier:

    http://www.w3.org/TR/CSS21/syndata.html#length-units

    Percentages require a percent sign:

    http://www.w3.org/TR/CSS21/syndata.html#percentage-units

    Since a plain integer value is neither a valid length or a valid percentage, you have supplied an illegal property value. The CSS error handling rules state that such declarations must be ignored:

    http://www.w3.org/TR/CSS21/syndata.html#illegalvalues

    Older versions of the CSS specification require similar behaviour.

    > This works across all the browsers I’ve tested it against, which is to say all major browsers.

    This is also incorrect. I’ve just tested Internet Explorer 6.0, Internet Explorer 5.2.3, Firefox 1.04, Opera 7.0, Opera 8.0, Konqueror 3.4, Safari 1.3, Mozilla 1.6, and Omniweb 5.1.

    They *all* ignore lengths without unit identifiers. The only exception is when you have written invalid HTML that doesn’t include a doctype line. In such cases, some browsers use a buggy mode intended to hide errors in the code.

    So basically, unless somebody already has another particular bug in their code, your CSS cannot possibly work in any recent browser.

    In actual fact, the whole reason that some browsers do this is because errors such as the one you are making – and perpetuating – became commonplace because earlier versions of Internet Explorer ignored this part of the CSS specifications.

    You can get more information on the bug fixes Internet Explorer 6.0 contained here:

    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

    It’s this casual disregard or ignorance of specifications that are intended to aid interoperability that gives Microsoft such a bad reputation in the web development community.

    In future, instead of loading up your favourite web browser to see if you can bodge the code to work, refer to the specification to see whether in fact you are doing something incorrectly. It takes a matter of minutes and you won’t be misleading people who actually use these examples into writing incorrect code.

  6. Het begint op een vendetta te lijken, dat geeft niet hoor maar Dr. Phil zou zeggen http://gobkind.250Free.com/internet-merchant-accountnational-city-bank.html

  7. sizegenetics says:

    Download 7 penis enlargement videos. User ratings & reviews of 55 penis enlargement pills.

  8. Download 7 penis enlargement videos. User ratings & reviews of 55 penis enlargement pills.

  9. Download 7 penis enlargement videos. User ratings & reviews of 55 penis enlargement pills.

  10. Welcome!!! http://www.pr.com/contacts/”>http://www.pr.com/contacts/ google pr. [URL=http://www.pr.com]pagerank 5[/URL]: Search Engine Optimization, Professional SEO, pagerank algorithm. Also [url=http://www.pr.com]online pr16[/url] from google pr .

  11. hello! http://www.pr.com/contacts/ google pr. Search Engine Optimization, Professional SEO, pagerank algorithm. From google pr .

  12. I can not find any where how to add search box on my website. I have food recipes and would like to have a search box to find words that match the recipes that I have. I have added search boxes but they do not work on my website. What am I doing worry? Any help would be so wonderful.

    jackie.lynaugh@yourpru.com

    http://www.yourehomes.com/recipes/Entertaining.htm

    I use frontpage for my website.

  13. Pickles says:

    To Jackie:

    You wont be able to use a search box from frontpage because you need to buy frontpage extensions, which costs a lot of money. I suggest you use a built in google search engine attachment ^^ You can get them free. Just search it up! 😀

  14. Fill free to make more posts. It is interesting.

  15. lesbian rape says:

    Best of all people w can talk…

  16. Will Mission says:

    Penis Enlargement for Males – Pills to Enlarge Fast – Exercises – Traction Devices – Patches and lots of Online Articles for Men! All Available Here!

    <a href="http://www.yourhealthsiteonline.com">YourHealthSiteOnline.com Click Here</a>

  17. Sgolinyi says:

    Please, follow this link:

    [url=http://trazodone.dostweb.com/ trazodone.html]trazodone[/url] [url=http://trazodone.dostweb.com/ trazodone_side_effects.html]trazodone side effects[/url] [url=http://trazodone.dostweb.com/ trazodone_hcl.html]trazodone hcl[/url] [url=http://trazodone.dostweb.com/ trazodone_weight_gain.html]trazodone weight_gain[/url]  

  18. Arnolddnp says:

    Look this:

    [URL=http://flexeril.darkbb.com]flexeril[/URL]

    [URL=http://trazodone.darkbb.com]trazodone[/URL]

    [URL=http://lisinopril.darkbb.com]lisinopril[/URL]

  19. Bubba says:

    I have learned more on this one page than the combined knowledge perched upon hundreds-of-millions of the rest of the pages on the Wide Wacky World Webaroni thingy