HTML PRIMER

by Jim Gordley
2008-2016

Applyings ID's

We learned erlier that we can create a specific ID to a CSS slector. In this section we will learn how to apply a specific ID to an HTML element

EXAMPLE

Assuming an internal or external css ID selector has been created (the hash mark (#) is used to create an id selector.)

     #id selector name {declorations} ex. #nav {color:blue; font-size:25px;}

Applying the CSS id selector to an HTML element is done by using the id attribute in the HTML element

EXAMPLE

     <div id="nav">

With this style declarationelements with an id atribute of nav will be blue colored text with a font size of 25 pixels.

Take a moment to view the source code for this page. Notice in the head section there is an internal style sheet with an id selector. Then scroll down and see how that id is being applied.

Applying ID SELECTORS
DO THIS WHY YOU DO IT
  1. Open the index.htm file with Notepad
    Look for the Comment that reads NAVAGATION
    Enter the hilighted code to the <div> tag
    <div id="nav">

    Save these changes.
  2. On the task bar open the styles.css Notepad

    Add the highlited css declaration to the style sheet

    #nav {background-color:#ff9933;}


    Save these changes.



  3. Refresh the browser page.

So you can edit the content.


Assigns the id selector named nav to the html element <div>
The <div id="nav"> is a division tag that contains links to other pages on our web site. That division now has an orange background (ff9933). This style only applies to elements that have the atrribute id with a value of nav.
Defining a page content area