Cascading Style Sheets: ID Selectors


The ID Selector permits you to identify single instances of HTML elements. Meaning, you can only use the item 1 time in a page. You use the # sign to identify an ID Selector (Example: #FOOTER). No two HTML tags in a single document should have the same ID. 

EXAMPLE: Placing a MENU on your web page:

Here is the CSS CODE:

 ' Create a ID SELECTOR and set the properties:     
            
 #MAIN_MENU   {position: absolute;   width:128px;   top:20px; left: 20px;
                                            font-size: 0.9em; border: 1px dashed black; z-index:2;     
                      background-color: white; padding: 10px;  }


Here is the HTML code:

'Create a DIV tag with an ID 
      EXAMPLE: <DIV ID="MAIN_MENU">Put Your LInks Here</DIV>



Now anytime you want to change the LOCATION or any other properties of the MAIN_MENU, do it in your CSS file and every web page in your site will be changed.

Although styles can be set for ID SELECTORS, they are mostly used for items you want to POSITION in a particular place on your web page whereas Class Selectors  let you define how you want an item (or an unlimited number of items on your page) to appear. You can use a Class Selector on an unlimited number of elements on the same page.

Be sure to read the Basics of Cascading Style Sheets.


2 different ways to set the styles of a <div>:


OPTION 1: use a class selector

Here is the CSS CODE:

.FirstChoice {font-size: 10px; background-color:yellow; color: navy;}
 
'note all of the text will be navy EXCEPT for the links!!!!
  'the entire "box" of links will have a background color of yellow

LinkColors are not defined using this method, see option 2.


Here is the HTML code:


<div id="MAIN_MENU" class="FirstChoice">
 
Main Menu: <br />

<a href="page1.html">Page 1</a> <br />
<a href="page2.html">Page 2</a> <br />
<a href="page3.html">Page 3</a> <br />

 </div>


OPTION 2: use a contextual selector

Here is the CSS CODE:


#SecondChoice h1 {font-size: 16px;  color: black;}
#SecondChoice p {font-size: 10px; color: navy;}

#SecondChoice a:link {color: red;}
#SecondChoice a:hover {color: orange;}

'Now the links will work as defined here.


Here is the HTML code:


<div id="MAIN_MENU" >
Main Menu: <br />

<a href="page1.html">Page 1</a> <br />
<a href="page2.html">Page 2</a> <br />
<a href="page3.html">Page 3</a> <br />

 </div>


Learn more about Cascading Style Sheets Contextual Selectors