Introduction to CSS

Cascading Style Sheets (CSS) define the styles on your web pages.

Cascading Style Sheets (CSS) were created by the World Wide Web Consortium, known as W3C. The W3C have set the international standards for the web since its inception in 1994. As web sites grew more complex, a standardized format for controlling the growing number of colors and fonts became necessary. Using CSS meant that the formatting information could be stored in a separate file from the HTML data, and would also allow format changes to be applied universally to all web pages---saving a lot of work for web programmers and designers.

Style Sheets

Style sheets are generally thought of as document "rules." These rules dictate the properties, or parameters for HTML tags, and define how a document will appear. Web pages load much more quickly and consistently with style sheets. And if the browser is unable to display the web page as intended, style sheets can ensure a backup or default style will still happen.

CSS Properties

There are six main categories of CSS properties: color, fonts, text, boxes, positioning, and classification. Color properties refers to both text and background colors. Font properties include the sizes of all fonts used in the style sheets. Text properties involve all word and letter spacing, and any specialized text, such as underlining. Box properties define margins and borders, while positioning properties manage the layout of web pages. Classification properties handle an element's display, white space and list elements.

CSS Rules

CSS style rules assign a specified style to an HTML tag. For example, if we wanted all second-level headers on a website to be blue, we would place the information in brackets using either the color name, or hexadecimal color code, which would display as: h2 {color: blue;} or h2 { color: # 003F87; }.

Additional rules assigned to the same tag would be designated by semicolons. As a result, you could set the header's color, font, and other specifics on the same line of text within the same brackets: h2 {color: blue; background-color: white; font-family: Helvetica, sans-serif;}.

Adding Style Sheets

You will need to link the style sheets to your document, which can be done in a few different ways. The first way is to use a link tag, such as: <link rel="stylesheet" href="styles.css" type="content/css" />.

Another way is to define the style rules in the HTML document header, by using the style tag: <style type="text/css">.

The other way to link your style sheets to the document is by using a style attribute with an HTML markup tag.

Browser Compatibility

When using CSS, browser compatibility can sometimes be a challenge. Different browsers may display CSS in various ways, so researching how your web page will show up in each of the most commonly used browsers is a good idea. It is also smart to check your HTML and CSS for mistakes, since even the smallest error can affect the way your content displays. Also, take advantage of the W3C's free online validator (validator.w3.org/) to be certain your style sheets meet current web standards.

References

• The University of Texas at Austin: Cascading Style Sheets
• W3 Schools: CSS Introduction

Resources

• Arizona State University: ASU Help Center: Learn CSS