SHARE
Facebook X Pinterest WhatsApp

Style Sheets ‘Made’ Easy

Written By
thumbnail
Lee Underwood
Lee Underwood
Aug 7, 2007

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”
 “http://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=”http://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.


This article first appeared on WebReference.com.

Recommended for you...

Importing Custom Less Styles at Run-time in Angular
Rob Gravelle
Jun 14, 2022
Setting CSS Values from Less Variables in Angular
Rob Gravelle
Jun 4, 2022
Color Manipulation with JavaScript
Rob Gravelle
May 21, 2022
An Introduction to CSS-in-JS
Rob Gravelle
May 14, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.