Here we talk about the ID Selector, in the context of this selector and the Class Selector and the HTML Selector.
How do you define an ID Selector and what is it good for! or What if you want to define a box or a bar to place something into on your web page using Cascading Style Sheets, this could be a box to contain anything, so it could contain paragraphs of text, or heading, it could contain an image or several images, it could contain a vertical or horizontal menu, it could even contain the content of a MySQL Database, or a Web Form or a Flash video or some other type of Video output........
Firstly lets explain what you might use an ID Selector for? Lets assume you want a little box on your Web Page to put some navigation links into, and you call this box naturally navbox.So remember the Style sheet is the style sheet that you save as lets say mainstyle.css, it is separate from, and is a different document from, the Web Page itself. The Web Page will have in it some code or lines that are in effect the Navigation Box.
In The Style Sheet itself you will have The ID Selector defined, you write it like this:
#navbox {
position:absolute;
margin-left:2%;
margin-top:0px;
width: 10%;
height:50px;
float:left;
background:#0000CC;
}
Here comes the the information you need to avoid getting your Knickers in a Twist: Do not worry about understanding all the lines, instead look at the structure, the ID Selector must start with a # followed by a name you make up, in this case navbox. Directly afterwards you have the open Curly Bracket and then a whole load of directives or Properties and Values. Properties and Values are the correct terms.... then right at the end you have the closing Curly Bracket.. That's it your done, there you have a complete ID Selector. Notice that on ID Selector can have just one or many Properties and Values. Normally each Property and Value pair will be on a new lline to make it easy to read.
You should be wondering at this stage what you put in to the actual web page, because an ID Selector has got to apply its style to some thing, hasen't it!??
So what to put into the Web Page itself, well here it is!
Theres a bit more to it, because this code above has actually no navigation links in it at all, I wanted to show you what you need as a bare minimum, a kind of stripped down min requirement. In order to make the Navigation box actually usefull you need some HTML on the web page actually in between the first and second line above, that is the only place you can put it if you want it to appear in the navbox, so you could just create some a tags that are links to other pages, but they must go in between the two lines "above in red" in the web page itself!
To find out about the diffrence between id selectors Class Selectors and HTML Selectors go to Untwisting the Pantyhose Untwisting the Pantyhose