Now that multiple pages of an entire website may be sharing the same rules, you may need to be less vague with your selectors. Let's say, for example, when you design your home page, it has a table listing the services your website provides. But then later on, you have another web page with a table containing testimonials from satisfied customers. If you add style rules using generic selectors (such as table, tr, td), your testimonials table styles may overwrite the rules you used for the home page table. Next time you go look at your home page, you may not understand right away why that table's styling is now wrong.
Even so, you'll want general styling for your website, of course. So it makes sense to use generic selectors for things like setting the font family, font sizes, font colors, margins, padding, and anything else that you want to be consistent throughout your website. What we need to remember here is to take advantage of classes and IDs when creating elements that are unique or have a purpose that's different from other instances of that same element on your site.
In the example below, you may want to have a thin, dark border around images on your website by default, so you can use a generic selector of "img" for that. But maybe you have a gallery on another page where you want the images to have large, white borders. These images will be the exception to the rule, so they're the ones you'll give their own class—or better yet, apply a unique class to the div that contains them. However you handle these situations, just be mindful of what is already in your style sheet, and how new styles can accidentally sabotage work you've already done.
|
img { |
