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