Hi, I m new user in CSS. I was reading about CSS than i see ID selector but i can't understand its meaning, So tell me about ID selector.
Id & Class are two type of selector. Id Selector is used to specify a style for a single, unique element & it use the html attribute "id" id selector is like your id card, id card show information about you & ID SELECTOR show information about a HTML element (color of a text, tex-align, etc). suppose you want to start two paragraph Like <p>this is a Paragraph1</p> HTML: & <p>this is a Paragraph2</p> HTML: and you want to color the first paragraph as red & the second paragraph as green. this is the css part #paragraph1:{color:red;} #paragraph2:{color:green:} (id selector is define with #) html part <p id="paragraph1">this is a paragraph1</p> <p id="paragraph2">this is a paragraph1</p> when some one visit your site, the browser read your code, when it come to <p id="paragraph1">this is a paragraph1</p> this line, it get the id form <p id="paragraph1">, and find information about id paragraph1, in css. then show this paragraph as red. (you can't use same id twice in a single page, Like two person never have same id card).
Just to re-emphasize what abhijitnumber1 put in bold, be VERY sure to remember ID's should be unique -- only use them once in the markup. More importantly though, ID's are NOT just for CSS! As unique identifiers they exist for directly targeting a single element from a variety of things: 1) Hash links. You know those #something at the end of a URL? Those will scroll down to an ID. Used to be you used the NAME attribute on anchors for this, but really NAME's job is supposed to be the name of things sent to the server and NOT for client-side processing. For this reason I like to use ID's around unique subsections of a page, so if need be I can direct link to them. #content, #top, #footer, #mainMenu, etc, etc... 2) Targeting an element in client-side scripting. See javascript's "getElementById" for more. 3) as the target of a LABEL element's FOR attribute -- typically an INPUT, TEXTAREA or SELECT. For example: <label for="loginUsername">Username:</label> <input type="text" name="username" id="loginUsername" />' Code (markup): again, the name attribute is what's sent server side (for example $_POST['username'] in PHP), the ID is what the LABEL points at. One nice side effect of using FOR on a LABEL, if you click the label it's treated the same as if you clicked the element. Very handy with things like radio-buttons. <input type="radio" name="favoriteUHF" id="favoriteUHF_WFXT" value="WFXT" /> <label for="favoriteUHF_WFXT">WFXT 25</label> <br /> <input type="radio" name="favoriteUHF" id="favoriteUHF_WSBK" value="WSBK" /> <label for="favoriteUHF_WMUR">WSBK 38</label> <br /> <input type="radio" name="favoriteUHF" id="favoriteUHF_WLVI" value="WLVI" /> <label for="favoriteUHF_WLVI">WLVI 56</label> <br /> Code (markup): Each one gets a unique ID so you can target via hash, script, label, etc... but all share the same name. ID's for CSS, that's just a nice happy extra bit of functionality! Though TECHNICALLY, an ID selector is the # part. That's the "selector". Just as . is a class selector, a space is a child selector, + is a adjacent sibling selector, > is a direct child selector, etc, etc... See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors For a good explanation of selectors.
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; }
if you're already familiar with "class" in CSS, it is similar to that. The only difference is it's only exclusive to an HTML tag and you can't use more than once in one web page. It's also more powerful than class. For example: <style> .green { color: green; } #red {color: red; } </style> <h1 class="green" id="red">Text</h1> Code (markup): Your heading 1 above will be red It's also used in selecting elements in jquery/javascript