S3 V6 - Class and ID (ENGLISH/URDU) Tutorial | Phase 1

S3 V6 - Class and ID (URDU) Tutorial | Phase 1


S3 V6 - Class and ID (ENGLISH) Tutorial | Phase 1

Understand and learn concept of Class and ID in Urdu Tutorial.

files - - https://goo.gl/QTY6E8


This article elaborates the difference between CSS Class and ID.

To understand the difference, consider the example of a group children in a school; they are categorized into classes as Grade 1 - Red, Grade 1 - Blue. The problem of this categorization is that if they all are made to stand together as a crowd then an outsider cannot identify the grade colours of the students. An outsider can only identify when they see them sitting in their respective classes. In this condition, if the outsider is asked " Hey outsider, please identify which students belong to grade 1 - red!" They would of course reply "No. How can I identify the students when they have no proper identifier?"

The management now decides to change uniforms of each class according to their colours, so that the Grade 1 - Blue students will wear blue uniform, and Grade 1 - Red students will now wear red uniform. Now, an outsider can easily identify the two classes with their uniforms. If the outsider is now asked the same question "Hey Outsider, please identify which students of Grade 1 - Red students!" They would immediately identify the students wearing red uniforms.

Now, bringing things in the context of CSS:

1. That outsider is the browser, in which our website is rendered.
2. The children are the elements
3. The uniform is the class, and the uniform colour is the class name

The "red" color was given to multiple students to identify them as students of Red Grade. This was to tell the browser that hey these "elements" are the red ones and these are the blue ones; otherwise the browser would not know. From this we derive the following points:

1. A CSS class is assigned to multiple elements - just like the uniform
2. A CSS class is used for grouping similar elements - just like students of a particular grade
3. Without a CSS class, you cannot easily handle multiple related elements
4. Similar elements must be given the same class (Red Uniform for Red Students)

Understanding the role of the CSS ID in this example is really easy now. Every class has its own monitor or prefect. If that same outsider guy is now asked "Hey Outsider, identify the monitor of class red!" The outsider will say, "No. I cannot!" Why? Because, although the children are classed with red and blue, the monitor is not identified with anything in particular.

The management now decides to assign the monitors with their unique badges, so that if we ask the outsider "Hey Outsider, please identify the monitors of each class", the Outsider would now blissfully respond in affirmative. Now, in the context of CSS ID, we derive the following points:

1. A CSS id is assigned to only one and unique element that repeats one time - just like the badge
2. A CSS id more specific than CSS class, which means it has more preference in most matters
3. A CSS id cannot be assigned to multiple elements