Web Design - Lesson by Lesson

Introduction to Cascading Style Sheets

             Last post I mentioned that this post would be published CSS introduction.So today I'm going to publish about it.We know HTML is not a graphic designing tool and it is a simple way of displaying a text in  a browser.Web designers clamoured for a better way to present their work on a web page because HTML just wasn’t enough. After all, with HTML, in order to get text or an image exactly where you want it, you have to resort to complicated tables to force the alignment and so on.
                        Finally with the introduction of Cascading Style-sheets, all the problems which standed with HTML were solved. A Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into your web design.

Style Sheet

                  If you were using a word processor like Microsoft Word, you could tell the word processor how you want blocks of text to be formatted. For example, all of your page Headings could be in 28 point Times, bold, and colored red. If you wanted the same Heading again, you can just click a drop down list and select the Heading style you set up.

Using straight HTML, you can’t do that. There’s no way to apply the same formatting with a single Tag. Cascading Style Sheets, however, let you do precisely that – change whole blocks of text with a single tag. This not only makes your code easier to read, it is also very simple to change all the formatted blocks of text to say a different font size or font color.

A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed to tell the browser to stop formatting the style:

<STYLE>

</STYLE>

Your stylesheet code then goes between the two Style tags. Here’s a style that can change text blue:

<STYLE>

.Font1 { Color: Blue }

</STYLE>

<P Class =" Font1">

This is my text.

</P>

So a style is way to change blocks of code (or even individual words) and apply formatting to the block as a whole. You don’t need individual HTML tags in the BODY of your page; just using the style name once will ensure that your formatting is applied to the whole block