BEGINNING WITH CSS

Beginning with CSS

The use of CSS is a must now as we move towards uniform and semantic coding practices. CSS helps in reducing repetitive code and at the same time because all the style definitions are put in one location , it becomes very easy to make global changes.

But what is CSS and how do you use the same.
CSS stands for cascading style sheet. In HTML we have tags, in CSS we have selectors. Whereas the CSS selector has property the HTML tags have
attributes.

selector { property: value;}
example table { border: 1px solid #000; }

You can group tags / selectors, also known as Grouping. Here is an example.

H1,H2,H3 { colour: red; }

What if you want to use the same tag ( selector ) with many styles. The answer is class. For example if you want certain paras in your webpage to be red in colour and rest in black, then you could code something like this,

p.black {color: black;}
p.red {color: red;}

And while invoking the HTML tag in the webpage you have to refer to that class.

<p class="red">redpara</p>

Many object oriented programming languages use similar punctuations when specifying classes and their properties. Dividing the code using periods to seperate class from property.You don't always have to attach class to a tag. You can create a generic class that can be applied to any tags in HTML code.

Create a CSS file which will have .css extension and add the following code.

.blue {
color: blue;
}

Now this class can be applied to any tag. For example if only a certain word / sentence need to be in blue colour then, you can use span class="blue".

example <p>This is black colour and <span class="blue"> this is blue colour</span></p>

Another alternative is the use of ID Selector - ID selectors are similar to classes- they too are independant of the document elements but the difference is they work only once on a given element, the one with the ID.

<p id=id selector>ID SELECTOR</p>
Attempt to use second time will fail.

Hope you enjoyed this small tutorial on beginning with CSS .