Jump to content

id - class - inline style


Fresco

Recommended Posts

why should i use a css id and not style it (inline).w3schools css book says that we shouldn't unse the same id multiple times on multiple elements why ?why shouldn't we use inline style id one id can only be used for one tag ?

Link to comment
Share on other sites

ID reference is mainly used to easily identify the sections of page, header, left and right columns, content, and footer that would/should be singular, any styling using id reference has priority over targeted elememt selectors on there own, or with classes. take for instance left, right columns and links within them

<div id="left"><a href="#2">link1</a><a class="test" href="#3">link1</a><a href="#4">link1</a><a class="test" href="#5">link1</a></div><div id="right"><a class="test" href="#2">link1</a><a href="#3">link1</a><a class="test" href="#4">link1</a><a href="#5">link1</a></div>

with

#right a, #left a {background-color:#0000CC; color:#FFFFFF;}a, a.test {color: #FFFF99; background-color:#009966; }a, a.test:hover{color: #C000C0; background-color: #E0E0E0; }

the styling remains to the stying set for #left and #right anchors to use the styling set by class test i would use

#right a, #left a {background-color:#0000CC; color:#FFFFFF;}  a  {color: #FFFF99; background-color:#009966; }a {color: #C000C0; background-color: #E0E0E0; } #right a.test, #leftt a.test {color: #FFFF99; background-color:#009966; }#right a.test:hover, #left a.test:hover{color: #C000C0; background-color: #E0E0E0; }

The class with id, now follow styling rule set to them, but what if youi want to use different color for left compared to right, you don't have to change the class, just do separate styling for left using specific id and the same class,

 #right a, #left a {background-color:#0000CC; color:#FFFFFF;}a, a.test {color: #FFFF99; background-color:#009966; }a, a.test:hover{color: #C000C0; background-color: #E0E0E0; }#right a.test {color: #FFFF99; background-color:#009966; }#right a.test:hover{color: #C000C0; background-color: #E0E0E0; }#left a.test {color: #00FF00; background-color:#00FFFF; }#left a.test:hover{color: #999999; background-color: #FFF; }

Note how all of is done by changing css using id specific ref to style the elements, without changing html once.

Link to comment
Share on other sites

w3schools css book says that we shouldn't unse the same id multiple times on multiple elements why ?
An ID is a unique identifier for a particular element, similar to the way that a Social Security Number or a driver's license number are unique identifiers for an individual. An element's ID can be used to set specific and unique styles for that element. Probably the most common use for an ID, however, is getting a reference to that object in JavaScript. There are a multitude of examples of this. Say you want to toggle the visibility of an element, such as a tooltip. Or append text to a specific element. Or get the text/value of a specific element or input. Another good reason to keep them unique is that the W3C says in the spec that IDs should be unique.
why should i use a css id and not style it (inline).why shouldn't we use inline style id one id can only be used for one tag ?
These two questions are closely related, so I'll answer them together. The simplest answer is this: maintainability.Imagine trying to search through 5k lines of HTML to find one element that needs its style tweaked. That's rather large scale, but even 500 lines would be challenging. If you give that element an id and put its styles in a stylesheet (embedded or external), it's much easier to find. You just look for its ID. If you don't know it's ID, there are a number of tools for each browser you can use to find it (such as FireBug or DOMInspector for FireFox, or Chrome's Developer Tools). Again, the other answer is that the W3C recommends it to maintain a separation of content (HTML), style (CSS), and behavior (JavaScript).
Link to comment
Share on other sites

  • 2 weeks later...
[...]The simplest answer is this: maintainability.Imagine trying to search through 5k lines of HTML to find one element that needs its style tweaked. That's rather large scale, but even 500 lines would be challenging. If you give that element an id and put its styles in a stylesheet (embedded or external), it's much easier to find. You just look for its ID. If you don't know it's ID, there are a number of tools for each browser you can use to find it (such as FireBug or DOMInspector for FireFox, or Chrome's Developer Tools). Again, the other answer is that the W3C recommends it to maintain a separation of content (HTML), style (CSS), and behavior (JavaScript).
Wow, thanks alot, for the quick responses and the answer of course.It's exately the "push" I needed for starting the use of CSS ID. Thank you all!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...