CSS : Applying CSS to your web page

Now to position the <ul> list inside the <h2> element to the right of the image :

          #header ul {
               position: absolute;
               top: 0;
               right: 0;
              }

position: absolute - This deactivates the CSS block box created by the <ul> tag .Setting zero value for top and right attributes moves the list to the top right corner of the browser window or the viewport .

Now, we will style the lists .So , we'll be assigning an id to each of the navigation lists .

e.g.
  
       <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul id="nav1">
              <li><a href="index.html">Home</a></li>
              <li><a href="recently-reviewed.html">Latest</a></li>
              <li><a href="highly-recommended.html">Greatest</a></li>
              <li><a href="about.html">About Us</a></li>
           </ul>
        </div>


<ul id="nav1"> - Here we have provided an id with the name "nav1" for the <ul> list .This will make accessing the list as well as specifying its properties easier .Now we can use CSS selector #nav1 instead of #header ul .


Add these CSS rules to overcome any default values set for <ul> by the browser .

       #nav1 {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          padding: 0;
        }



If you want to remove any markers from the list i.e. bullets or numbers , use statement :

      list-style-type: none;


So , CSS becomes :


        #nav1 {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          padding: 0;
          list-style-type: none;
         }


To style the list elements we set their properties as :

        #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
         }


CSS now is :


         #nav1 {
          position: absolute;
          top: 0;
          right: 0;
          margin: 0;
          padding: 0;
          list-style-type: none;
         }

         #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
         }


Since our image is much greater in height than our list we provide padding between the list elements .

         #nav1 a {
          color: #800080;
          font: bold 1em  Verdana, sans-serif;
          display: block;
          padding: 35px 0 35px 0;
         }

display: block - By default list elements are inline boxes . This turns them to block boxes .
padding: 35px 0 35px 0 - This provides spacing of 35px between list elements vertically .