An Introduction to Cascading Style Sheets

Cascading Style Sheets or CSS as they are commonly known, is a method of adding styles (such as font, font color, font size, spacing) to a collection of web pages or documents.

CSS was originally designed to solve a set of problems. CSS was created by the World Wide Web Consortium (W3C) as the two most recognized browsers (Netscape and Internet Explorer) were continuing to add new attributes and HTML tags. What was getting difficult was creating web sites with separation between the HTML content and the visual layout / presentation.

The first thing that one should point out is that Cascading Style Sheets (CSS) save the web designer time. As styles determine how the web page or web document will look; and because the style of a project is stored in an external file (.css), you can edit one file only and by doing so change all the web page’s styles at once.

CSS is considered ‘a breakthrough’ for web site designers because when a designer defines a particular style to an element (i.e. Header font and color); the designer can apply that element where he or she chooses. When the designer wishes to update or change that particular style, he or she simply edits the ‘.css’ file and the changes are global.

CSS styles are referenced in the <head> tags of a web page. These styles can be specified in one particular page or by an external Cascading Style Sheet file. Here is what the reference could look like:

<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

There is an order in which styles will be applied in a document. This order is important when there is more than one style defined in a web document. Styles will cascade into a virtual style sheet in the following order. The highest priority belongs to the forth position.

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element)

Order referenced from http://www.w3schools.com/css/css_intro.asp

CSS is a primary designing tool for use on a variety of platforms. Even though all browsers do not yet support CSS; Cascading Style Sheets uses are further being explored for mobile phones (CSS Mobile Profile 1.0), printers (CSS Print Profile), and for browsers that operate on television sets (CSS TV Profile 1.0).

The development of CSS by the World Wide Web Consortium has created a powerful design tool which any web designer or developer should be familiar with.

Start your career today! Search our network of web design schools and request information without any cost or obligation. Find a web design school near you >>