by Timothy Purdy

Created on: October 15, 2008   Last Updated: November 08, 2011

Think of Hypertext Markup Language (HTML) as a set of uniform wooden blocks. You can arrange them in any way you want. However, since they are all the same it gets monotonous and you are unable to do a whole lot, so we use Cascading Style Sheets (CSS) in conjunction with HTML. Think of CSS like the magic wand that unleashes the potential of those wooden blocks. Since CSS controls the appearance of HTML, what used to be a boring pile of wooden blocks is now an eye catching and dynamic creation.

A pure HTML web page will be made up of a few things. Elements (<h1></h1>) , content (Lorem ipsum dolor sit amet...) and formatting (<strong></strong>). With these three things, you can skate by getting the job done but with minimal options and it wont be dynamic. Now at first when websites were not depended upon as much as they do now, it was fine. Today, if you created a website purely built with HTML, it would not be able to compete because of many factors including how different web browsers render the page, how individual users screen resolution will affect it and one of the most important, file size and how fast the page will be rendered.

Thanks to CSS, these problems have been solved and websites have evolved over time. With the help of CSS, not only can web pages fulfill the different needs of the individual visiting the page, but pages becomes dynamic, reacting to the users actions. For example, links changing colors after you have already visited them and even images that change when you hover over them.

To use CSS in conjunction with HTML, there are a few things you will have to understand. First being the way you use CSS. You can either create a separate file (style sheet) to store the CSS information and link the two together, you can store the CSS in an internal style sheet on the web page or you can define the CSS properties within the HTML tags. Although, keep in mind when the browser renders the page, it will first read the defaults set by the browser on how different elements are rendered. Then it looks to an external style sheet for further instructions. Finally, it looks to internal style sheets and CSS that is located within HTML tags (in-line).

For external style sheets, you must create a CSS file. "style.css" is the most commonly used title for this file from what I have seen after working at a web design firm. This style sheet will hold the CSS formatting for the entire website and be linked to each page that

• 1
• 2
• Next Page >>