What the heck is CSS? What every web site owner should know—part two

What the heck is CSS?

Cascading Style Sheets, better known as CSS allows web designers to add styles and other formatting to web pages by creating classes or modifying existing HTML tags.
OK, well then, what the heck does that mean?

Well, to really understand CSS it is important to understand at least the very most basic elements of HTML. HTML stands for Hypertext Markup Language. It is the basic language of the Internet. What HTML does in a nutshell is add links and pictures to, modify, and format simple text documents hence its name. For the purposes of this article I am going to assume that you already know a little bit about HTML. If not click here for a crash course in HTML.

But I have digressed…

CSS can be used in many different ways. It can be written and saved in a separate file that can be accessed by several pages, added to the head section of a web page, or written "in-line". How and where the CSS is written and attached to the web page determines how you can use it within the web site.

By attaching a stand-alone CSS file two one or more web pages, you can make changes directly to the CSS file and it will affect all the files that are attached to it. In other words; let's say that you have a CSS file that is attached to every page in your web site. If you have a CSS style that formats whenever text is applied to as bold, 14 point, red, with the verdana font in your CSS file and you would like to change it from red to black, all you need to do is change the style within the CSS file. The change that you made will change all of the text from every page in your web site that has that particular style applied to it, from red to black.

By adding the CSS styles to the head of an HTML file; any changes you make to the CSS will affect only that document. For clarity's sake; if you have a style named emphasisText that does the same thing as the above paragraph and you change the font color from red to black it will only affect all the text that has had that style applied to it within that particular document.

When you add a CSS style in-line it will only affect the text that is directly applied to. Therefore, CSS can be used both broadly and very precisely depending upon your needs.

As I said before CSS can be applied as a style, class, or modifier. When it is used in-line it is typically refer to as a style, otherwise it is either a class or modifier.

The easiest way to use it is as a simple HTML tag modifier.
When you define a CSS style that modifies an HTML tag; every time that HTML tag is used the CSS style is applied. For example; if you modified the bold tag to not only bold the enclosed text, but to also italicize it and make it red, then, every time the bold tag is used the text will appear bold, italic and red.

Are you still with me? OK, hang in there. Take a deep breath if you need to…

If you want to create a style that is not attached to any particular HTML tag than you would create a class. A class is a set of styles that can be applied to text are images accordingly.

Classes can be very simple or very complicated. They can be applied without having to modify an HTML tag across the entire document and/or web site.

Now I must admit that CSS can get pretty complicated. Not only is it more in depth then your standard HTML, styles are applied in a certain order. They can overlay one another. Sometimes, they can be hard to keep track of. A style applied directly to a text or image (or any other element for that matter) takes precedence over a class applied to an entire page, which in turn, takes precedence over a style applied to an attached style sheet.

To make matters worse… Many times styles may have the same name, but be located in different areas. This can have unexpected and undesired results. These and other issues can be difficult to track down. Even so, CSS provides an extraordinarily powerful tool that gives web developers are enormous amount of power over their code. Ultimately, despite any complicated issues they can create, it does help to simplify web design and when used properly saves a lot of time.

The actual mechanics of CSS are a little bit outside of the skill of this particular article, but if you subscribe to this blog or join as a member (it's free and easy) my website (click here) I will soon include; and in depth tutorial, a step by step walkthrough with images and some cool and useful CSS code snippets that you can cut copy and paste and your own site (the code snippets will be available only to members of my website).

As usual, if you have any questions or comments then please feel free to e-mail me or post into the comments section. Even better, if you post them to my community forum I will make an extra effort to take care of you.