Style Sheets 'Made' Easy

One of the biggest problems many people have in setting up a Web site is creating the cascading style sheets (CSS). The proper method for designing a good site is to use HTML for structuring the pages and CSS for styling the content on the pages, but what if you don't know how to create a style sheet, or don't do it that often?

I'll admit, they can be a pain. In fact, they can be downright excruciating, but there are ways to get around that. There are many places to find instructions on how to create layouts. And while we have some resources on WebReference.com, sometimes it's easier to grab something and go.

If you're not looking to do anything out of the ordinary, here's an alternative. Often, Web sites are created for the main purpose of posting information. (In fact, that's how the whole Internet got started.) You might want to post a paper you have written on a specific subject, or create a basic site with some information. The bottom line is that you want it to look good. You might also build an entire Web site later, and then you can use what you already have set up. You are, of course, free to add navigation and anything else that's needed.

The Secret to Quick and Easy Style Sheets

The standards (actually "recommendations") for style sheets are set by the World Wide Web Consortium (W3C). The latest version of the specifications can be found at on the W3C Web site.

If you're not ready to sit down and learn CSS, you can still use a style sheet for your documents. The W3C has set up "core styles" for use on a generic site. Simply put, all you need to do is choose a style you like and then put a link to the style sheet (that's located on the W3C server) on your Web page.

How It Works

First, go to the W3C Core Style Sampler and choose one of the eight offerings: Chocolate, Midnight, Modernist, Oldstyle, Steely, Swiss, Traditional or Ultramarine. There you can select a style and have a page display, showing a sample of what it will look like.

Next, you need to add a link from the style sheet to your Web page. Be sure to add the correct DOCTYPE to the page. For instance, if you are using HTML 4.01, you can use the strict type. Place the DOCTYPE below at the very top of your Web page, before anything else on the page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">

Then place a link to the style sheet you have chosen. It should be place within the <head> section of your page, all on one line.

<link rel="stylesheet" href="https://www.w3.org/StyleSheets/Core/Modernist" type="text/css">

You will need to change the portion Modernist to match your selection, if you have chosen another style sheet.

That's it! Instant style sheet! You can even download the style sheet from the W3C Web site and make changes, if you wish. You can download it by entering the link to it in the Web browser's address bar. The style sheet should either display in the browser (use "Save As ..."), or it will ask you where you want to download it to. If you download it and place it on your Web site, remember, you will need to change the link to it on the Web page.

Conclusion

For many, this may not be the best solution but for those who need a headstart or a quick solution, it's a good place to begin. As I stated before, style sheets can be difficult. However, if you don't need something too specific, give it a try.

URL:

Style Sheets 'Made' Easy