Jump to content
Fresco

id - class - inline style

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 ?

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites
[...]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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...