As a beginner using CSS I had trouble understanding the difference between classes and ids. Both are used as an identifier of an element, and technically you can get the exact same affect using either. The difference is fairly simple, an id is unique, it is used for an individual element of a webpage. A class however is not unique; multiple elements in a webpage can share a class and 'inherit' (gain) that classes specifications.
Classes
If you're not at the point where you're planning these things in advance you'll know when to use a class instead of an id when you find yourself repeating yourself in your CSS code. For example let's say you have a few divs on your page and you want the text inside the page to be a certain size and font. Instead of doing "font-family:arial" 5 times for each paragraph, instead you can create a class. This would look something like:
p.class_name {font-family: "arial";}
Anywhere you have a p tag you say class="class_name" its font will use arial.
When you become a CSS master you'll plan all of these things ahead of time, but until that point just be aware of when you find yourself duplicating code in your CSS files for similar elements. Using classes is useful because not only does it reduce the amount of code you have to write, but it can keep your CSS files significantly smaller which can increase the load time of your pages.
IDs
So if classes are for common CSS specifications across multiple elements, when to use ids is pretty straight forward. Anytime you want to style a specific element you would use an ID. This is pretty common when you're doing absolute positioning, or nuances like bolding something or making it a different color etc. Ids are useful if you're in the habit of doing inline styles. Modern web-design dictates that you keep your relative programming languages separate, so inline styles are frowned upon, instead use an id.
To do the same thing as above, but make a specific paragraph have arial text we would use
#id_name{font-family: "arial";}
In the p tag we would then have id="id_name".
Difference in syntax
Class and Id have slightly different syntax, but they are fairly straight forward: a class is referenced by its HTML element i.e. img, p, hr, h, div, span, etc.. whereas an id is unique so it does not need to be associated to an HTML element and is specified with the #.
So given an html page where there are two p tags one with id="p_1" and a different p tag with class ="p_arial" the css would be:
p.p_arial {font-family: "arial";}
#p_1 { color: red; } /* makes the font color red */
Combining Classes and Ids
Now in this previous example we have two p tags one that uses a class to make the font Arial and one that uses an id that specifies red text. What if we wanted the p with the red text to also be Arial? This can be done by placing both the id="p_1" and the class="p_arial". This p tag will inherit the properties of both the class and the id. If there is a conflict between the class and the id, i.e. one says font-color:"blue" and the other say font-color:"red", the id will always override the class. This is called specificity, and an id is the most specific of any CSS selector.
It is possible to have multiple classes, this is done by leaving a white space between class names i.e. class="p_red p_black" if the CSS code is as follows:
p.p_red{color: "red";}
p.p_black{color: "black";}
The last class will override the first class. So the paragraphs font color will end up being black in this example.
One last way to specify elements
Besides specifying by Id and Class CSS can tell a document that all of an HTML element should be styled a certain way. This is the most general way to specify styles and is overridden by both classes and ids. This is done by specifying in the css file the HTML element tag name. This should make sense because it's like you are specifying a class without a class. So to make all of the paragraphs in a document use Arial font type you would use:
p {font-family: "arial";}
Another example is if you want to change the font size, family, color etc.. in an entire document you can reference the body tag:
Body{color:black; font-family: "arial"; font-size:.6em;}
Review
There are three methods to style elements in CSS using an element, using a class, and using an ID. An Id overrides Classes and Classes override HTML elements. Using classes rather than Ids can minimize file size and speed up web page load times. Ids should be used to style/position individual HTML elements.
Once you have a pretty good understanding of these concepts you should be able to plan your web pages in advance before you start coding the HTML. Being able to create all of your classes beforehand will speed up your development process as you'll see how things are suppose to look from the beginning rather than trying to make it look the way you want as you go along.
About the Author
I'm a beginning web developer that likes to make light weight money making websites w/a minimal annoyance to the viewer from adds. Check out my contextual affiliate product placement at my latest creation http://finditdaily.com.
Please provide any comments and feedback to webdevwriter@gmail.com. Thanks!
No comments:
Post a Comment