Using Cascading Style Sheets

By: Dachary Carey

Cascading style sheets, abbreviated CSS, are primarily used in HTML and XHTML Web design. Cascading style sheets contain a set of rules to display HTML documents, including such things as font size, color, spacing, graphics and rules for different sections of a page.

The benefits of CSS

In addition to being Web 2.0 compliant and functional with the new Web standard, XHTML, cascading style sheets are an elegant solution to formatting multiple Web pages. In old-fashioned HTML, you had to duplicate style instructions on every single page, including long lists of code that have nothing to do with content and everything to do with presentation. This content varied from browser to browser.

CSS simplifies the process by containing all style rules for a page in a single document. When you use CSS, you create references in the HTML file to individual sections of the CSS style sheet, which tells the browser how to display content.

How are cascading style sheets used?

CSS may be embedded in HTML code, but it is more commonly stored as a separate sheet, usually some variation of style.css. In a cascading style sheet, you define rules for how each display type is handled. For example, you may have several different heading designs, depending on where they fall in the hierarchy; headings (H1), subheadings (H2) and sub-subheadings (H3). Once you define the rules for how each of these heading types is handled, you can then simply reference the tag in your HTML document and include the content. You tell your HTML page to access the style.css page for instructions on displaying the style, and then if you wanted to use the first heading style, you would simply put

Type Your Content Here

in your HTML document.

The HTML code references the style.css document for rules on how to display the content, and your content comes out in different styles depending on which tag you use and how it's defined in the CSS sheet. This saves you the trouble of typing a new set of instructions for every heading, subheading and paragraph that you want to use on your website. A master CSS document can contain styles for every page on your site.

With a separate style.css file, you can change the look and feel of your site simply by editing a few settings, such as color and font size. If you want a specific section of a Web page to look different, you can either specify it as a class in the style.css file or use in-line CSS to overwrite the general rules for the site. As with reglar HTML, you'll need to use opening and closing tags to confine style overrides to the places you want them to appear.

CSS resources

Once you get the hang of using them, cascading style sheets are a simple and elegant way to store all your style information and create easy, streamlined HTML and XHTML pages. If you need help getting started with CSS, check out the CSS Tutorial at W3 Schools: http://www.w3schools.com/css/. This site contains plenty of examples and instructions to help you learn CSS.

Related Life123 Articles

Web site building is easier than you think. You'll need a Web site hosting provider, a little technical know-how and an understanding of good Web design principles to make your site useful.

If you want to increase Web site traffic, there are good ways and bad ways to do it. Using focused, relevant keywords, getting inbound links and adding useful content regularly provide the best results.

Frequently Asked Questions on Ask.com
More Related Life123 Articles

How do you make a Webshow? A Webshow is a lot like a television show, but you'll need to know a bit more about uploading your resulting video to the Web and promoting it online.

When using meta tags, you should sum up your Web site as accurately as possible because many people decide to visit your site based on what your meta tags say.

Learn how to make a thumbnail of a document so you can get a small image of a document to display on your Web page. This way, users can click on the thumbnail to see a larger version.

Answers Partner Sites: Ask Answers  |  Kids Answers  |  Ask How-To  |  Reference Answers  |  Life123 Answers  |  GardenandHearth Answers
Partner Sites: Insider Pages  |  MerchantCircle  |  Urbanspoon  |  Ask Kids  |  Thesaurus
© 2012 Life123, Inc. All rights reserved. An IAC Company