Understanding CSS

In the good old days of the web tables were an essential requirement for creating a webpage. The first thing in laying out a webpage was to create a table. Table was then further divided into cells. Using different combinations of border and shading a number of effects could be created. But the tales and cells also created confusion and messy websites. But with advent of CSS tables can finally be replaced.

If you have been using tables in the past you will appreciate how relieveed we are by CSS. When you work with tables your HTML becomes a mess of confusing rows and columns, with no clear markers of which parts of the page do what. It is fine in the beginning but the problem occurs when you want to redesign the website. In that case you would have to extract your content from the HTML and start building the tables all over again.

But that era is over.

And this ended with arrival of CSS. CSS stands for Cascading Style Sheets. CSS lets you apply styling information to specific parts of your HTML, identified by tag name, or by IDs and classes you specify.

This is done by using CSS selectors.

To understand working of CSS you must understand the basics of how selectors work. While there are lots of selectors, but the basics and frequetly used are not too many and are not difficult to understand.

CSS relies on your tags having classes and IDs. There is not much of difference between an ID and a class is except that an ID refers to just one tag while a class may refer to more than one.

Before we go further following rules must be remembered:

• If you just put the name of a tag, then your CSS rules will affect all of those tags.
• If you use a tag's name followed by a dot and the name of a class, then all of those tags with that class will be affected.
• A tag, a hash and an ID name will affect only the tag with that ID.
• Using the hash and ID alone will work on any tag with that ID.
• While using a dot and class name along works on any tag with that class.

For example:

• p - all paragraphs
• p.item - all paragraphs in the 'item' class
• p#item - the paragraph with the ID 'item'
• .item - all tags in the 'item' class
• #item - the tag with the ID 'item'

To add rules to each one of these selectors, you just put curly brackets ({}) after it, and then put the rules in that space.

That's all you need to do to create CSS.

Useful CSS Rules

CSS rules look like this:

rule-name: something;

Here are some of the most useful rule names and the different settings that can be applied.

• background-color

  Lets you set a page's background colour using HTML colours (they look like this: #123456).

• color

  Sets colours for text.

• font-family

  Lets you set fonts for your text - you can add more than one font name, separated by commas, in case your first choice is not available.

• font-size

  You can set the font size in px or em.It is better to use em as these measurements are relative rather than absolute.

• width and height

  Lets you specify the width and height of things. You can use px or percentages.

• margin

  The amount of space around the edges of some content. You can add -left, -right, -top and -bottom to margin to specify these margins individually.

• padding

  Works the same way as margin, but is for the space between the edges of the tag's box and its content, instead of the space between the tag's box and other boxes.

• border

  Puts borders around boxes. Takes three settings (width, type and colour), so you have to put spaces between them, like this: border: 1px solid black;

• text-align

  Lets you align text on the left or right, or in the centre ('center').

• text-decoration

  Controls text effects - mainly used to stop links from being underlined, like this: a { text-decoration: none; }

• float

  Tells content to float over other content, instead of starting underneath it on a new line. This is the tag most often used to simulate the kind of effects that you get with tables - floating a div and setting the main content area's margin to its width is one of the easiest ways to create a sidebar.

There are extensive references available on the web if you are looking for any specific information. This post was for general understanding of CSS only.