Lesson 1 : What is CSS and What You Need to Succeed

December 9th, 2008

What is CSS
CSS is an acronym for Cascading Style Sheets. These are used to define how HTML elements are displayed on a web page. They are made to control all things that have to do with the style of the web page, but not the content.

HTML should be used to control the content. Certain HTML tags are used to define paragraphs, headers, tables, etc. However, HTML tags were never intended to be used to define the style of the information. Tags that define font, color, background, etc. make it more difficult to separate the content of a web page from the style of a web page. CSS was introduced to solve this problem. CSS and HTML work together to display a web page. HTML contains the content of the web page, and CSS defines how that content should be displayed. Using CSS and HTML instead of using only HTML can save a great deal of time and effort.

Example: You have a website with 50 pages. Originally you develop your website with a particular style/template, but later you decide to change the style of the entire site. If your whole site was written in pure HTML, this would require that you manually edit every single one of your 50 pages. However, if you followed the advice of this tutorial, and many others like it, and wrote a single CSS document that defined the style of your entire website, the change would only require the editing of one document instead of fifty.
Another advantage of learning CSS: I'm not entirely sure about this, but I think that there are certain things that can be done in CSS that cannot be done in plain HTML. I guess we'll see as we go along.

CSS files are plain text files that have the extension ".css". All major web browsers support CSS, and it's development is handled by the World Wide Web Consortium or W3C.

What You Need to Succeed
One of the many nice things about CSS is that you don't need any expensive software to use it. All you really need is a simple text editor and a web browser. Everyone should already have these things. A web browser is what you are using to view this blog. Some popular examples are Internet Explorer or Firefox. Everyone should also already have a text editor. Windows comes with a program called "Notepad" that will serve as a fine text editor. However, it is important to note that word processors such as Microsoft Word should not be used in these lessons. Also, many free text editors are available online if for some reason you are not satisfied with the standard notepad program. My personal favorite is an editor called "Notepad++".

That's all we need to get started. Next we'll be looking at the basic structure of a web page and a sample web page made of HTML and CSS.

Thanks for reading,
Michael