Urdu tutorials CSS Lesson 5

CLASS and ID
Both these attributes can be used with any HTML element. A CLASS is preceded by a dot (.), and an ID with a hash mark (#), then the CLASS or ID name and the declaration.
With the ID selector you identify an element to be an *unique instance* in a document.

You assign this element a name, like the NAME attribute of a form element, and it can be applied only once in a document, and this style rule with the ID selector can only apply to one single element.

An ID's name may interfere with other behaviors on the page if it has the same name as a behavior that is calling JavaScript function.

http://www.w3.org/TR/REC-CSS1#id-as-selector
You can declare a CLASS and apply this class to all elements inside the BODY, a P, a SPAN and a DIV multiple times within the same document, on the same page, without any problems.

In essence, with classes you create your own HTML tags. The styling of the font for the content area for example can either be accomplished by re-defining the HTML tag P,or you create a class like .contentarea. Like HTML tags, classes can be re-used in a document, but unlike HTML tags, these classes can be applied either to different tags or to DIV and span
IDs (#) - due to their uniqueness - have more weight than Classes (.) - see Inheritance, Cascade.
The CSS Discuss List has a very good short introduction at Class vs. ID
Note: The CSS1 specifications did not allow the class or id name to start with a digit. That meant, #px14 was ok, #14px not. Remember that when you are tempted to name a class .14Verdana or similar. Also, underscores in class/id names were not allowed in the CSS1 specifications. That got changed later, but browsers like NN4.xx should not - and does not - accept names with underscores. Read more about this topic from Eric Meyer on DevEdge.
Second Note: Through experience I learned that some browsers react iffy to class/id names that are 'reserved' words in Javascript or SQL. I had IE5.5 throw a print error on *one* page (not on all the other pages) because of a class named 'top'. So if you encounter something strange with a class that's seems to be valid, proper and named 'main' or 'date' try renaming.
Then there are the Pseudo-Classes and the Pseudo-Elements: neither exist in HTML - they are not visible in the HTML code.
Pseudoclasses have the ability to change the style of a document's links, based on whether the links have been visited, or how the visitor is interacting with the document.
That means that Pseudo-classes offer the possibility to display the same element differently in various states. You find pseudo-classes used commonly in link presentations.

In theory, pseudo-classes like :hover apply to all elements, like P, or a DIV. To designate this element, the user has to do something, like pointing a mouse to it. But, as so often, that is the theory. Browser support at this time (October 2001) is almost non-existent (see http://www.xs4all.nl/~ppk/css2tests/hover.html).
Pseudo-elements like :first-letter and :first-line are called pseudo-elements because they allow you to set a style on a subpart of an element - for example the first line of a paragraph. That means that regardless of how the visitor resizes the window, the first line will be styled.

In the lesson 5, you will learn about the new teachnology - CSS - used in web development.The lesson will cover the basic information needed for a page development. The tutorials main objective is to provide university/college and diploma level knowledge about the web development. This training session will cover the concepts of division on the page layout.
The page layout is developed by dividing the page set up into "id" and "class".Once "id" and "content" are defined within the page, the next step is to call them into style tag.
Remember that style tags are coded within head section of the page. These classes and ids are then called by using “# (hash)” for ids and “. (dot)” for class elements to style them.
This lesson will first calculate the width of a page where it has been set to 960px, then a space for sidebare which is et to 180 px and finally a space for page content set as 750px. These setting are not standard settings , you can make you own one depending on your page size.