CSS : Applying CSS to your web page

CSS Pseudo Classes


You must have seen in certain websites that as you move your cursor from one link go the other , the color of the link at which you are hovering changes or a pointer points to that link . This effect is achieved as :

        #nav1 a:hover {
         
           background: url(images/b.gif) no-repeat left center;
         
           color: #118877;
        
          }

So, as you hover over a particular link , the icon b.gif points to that link and the color changes to #118877 .
:hover is called a dynamic pseudo-class as it changes properties of objects in real time .


Another way to differentiate between current link that user is viewing and the other links is to place a cursor over the current link :


#nav1 .icon a, #nav1 .icon a:hover, #nav1 .icon a:active {
          background: url(images/b.gif) no-repeat left center;
          color: #FFF;
          cursor: default;
        }




Let's add some of the links to our web pages within the division "welcome" as :



        <div id="welcome">
           <h1>Welcome to Movies Freak!</h1>
           <p>We are a group of movies freak who watch some insane number of movies round the clock .If you are new to our blog the begin from
              <a href="index.html">Home</a> . This is the list of our <a href="recently-reviewed.html">Latest</a> reviewed movies . These are the
              <a href="highly-recommended.html">Greatest</a> movies we have ever reviewed . We'll review each and every movie for you so that you
              can find out which one is for you to watch .Know more<a href="about.html">About Us</a> here .</p>
        </div>

How can a user know which of these pages he has already visited and which he's yet to visit ? Styling schemes are used for this purpose .

        <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
          body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
             font-size: 75%;
           }
        a:link {
           color: #112233;
           }
        a:visited {
           color: #223344;
           }
        a:hover {
           color: #334455;
           }
        a:active {
           color: #556677;
          }

a:visited - dynamic pseudo class for links already visited .Color changes to #223344 .

a:active - link at which we are currently positioned .Color changes to #556677 .

CSS : Applying CSS to your web page

Pointing to current page


To point to the page that the user is currently accessing we take any small icon image and place it in images folder with the name b.jpg .To state at which list element should the icon be placed we create a class "icon" set by default at the home page .



         <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul id="nav1">
              <li class="icon"><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>

Adding background image of the icon to the selected list :


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

       #nav1 .icon a {
           background: url(images/b.jpg) no-repeat left center;
           }


In case this overlaps with the list element provide  padding to the list :

e.g.

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

provide padding :

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

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 .

CSS : Applying CSS to your web page

To add a background image to the header add a folder named images inside Movies Freak folder and name the image a.jpg if it is a jpeg file .


          
       <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
          body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
             font-size: 75%;
           }
          #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
            }
      </style>
Tweak or edit the image so that it occupies the whole viewport . Set horizontal dimension to about 920px. We will place the list inside h2 to the right of the image later .Since , by default any image added to html is tiled vertically as well as horizontally . To avoid repetition we use statement

    
            background-repeat: no-repeat;

background-position - It specifies the position of the image relative to the CSS box .left , bottom and center are other keywords that are used to specify the position of the image .

height - Specifies height of the image .


In this case our h2 title "Movies Freak" is overlapping over the image .
     
          <h2><a href="index.html">Movies Freak</a> </h2>



In order to remove this heading from the picture .

        #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
             text-indent: -999px;
             margin: 1em;
             }

By setting a large negative value for text-indent property we move the title beyond the top left portion of the viewport .

 


 
         #header h2{
             background-image: url(images/a.jpg)
             background-repeat: no-repeat;
             background-position: right top;
             height: 280px;
             text-indent: -999px;
             margin-right: 1em;
            }
         #header h2 a {
                 display: block;
                 width: 800px;
                 height: 100%;
               }
       </style>



#header h2 a - <a> element is contained inside <h2> element . Width is set as same to the width of the image used . This helps in using the image as a link to the home page .

CSS : Applying CSS to your web page

This is the web page we created in our XHTML tutorials :



      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>Movies Freak</title>
      </head>
      <body>
        <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul>
              <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>
        <div id="welcome">
           <h1>Welcome to Movies Freak!</h1>
           <p>We are a group of movies freak who watch some insane number of movies round the clock .
              We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
        </div>
        <div id="reviews">
            <h2>Weekly Specials</h2>
               <ul>
                 <li>Memento</li>
                 <li>The Dark Knight</li>
                 <li>Avatar</li>
                 <li>The Last Samurai</li>
                 <li>Blade Runner</li>
              </ul>
        </div>
        <div id="footer">
           <p>Copyright 2010 Movies Freak , All rights reserved.</p>
        </div>
        </body>
      </html>

Embed the style attribute in the <head> element as :


        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Movies Freak</title>
            <style type="text/css">
               /* CSS rules */
            </style>
        </head>



Embed these CSS rules within the style element

        html, body {
        margin: 0;
        padding: 0;
        border: none;
        background: white;
       }


as :


      <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
      </style>


These CSS rules are used to override browser defaults and implement yours .Every time you change CSS code in the HTML file ,
save your file and reload it to see the changes .


Add :

          body {
             color: #800080;
           }
to



       <style type="text/css">
         html, body {
                margin: 0;
                padding: 0;
                border: none;
                background: white;
              }
         body {
             color: #800080;
           }
       </style>


#800080 is the color code of purple color .This turns all the text in the body part of html file to blue .This is a hexadecimal notation .

80-hexadecimal value of red .
00-hexadecimal value of green .
80-hexadecimal value of blue .


Applying font-type to the text in body

     body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
          }

The browser tries to implement first Times New Roman ,if this font-type is not available with user system then sans-serif  and at last Verdana .Times New Roman is double quoted as it consists of spaces .




      body {
             color: #800080;
             font-family:"Times New Roman", sans-serif,Verdana;
             font-size: 75%;
           }

line-height - This property provides space between two consecutive lines .e.g. if you want a distance of half the length of the inline box consisting your line , then ,


       line-height: 150%;


font property - All properties that apply to text can be specified in this property such as font-size , font-family font-style, font-variant, font-weight, and line-height .


These two CSS rules are similar .

          h2 {
              font: italic small-caps bold larger/150% Zapfino, cursive;
             }
          h2 {
              font-style: italic;
              font-variant: small-caps;
              font-weight: bold;
              font-size: larger;
              line-height: 150%;
              font-family: Zapfino, cursive;
             }

CSS box model

A web page is nothing but a group of boxes .

Block boxes - These are rectangular boxes that exist as one over the other according to the order of priority .Block-level boxes are as wide as their CSS box permits them . So, they are usually as wide asthe browser window . e.g. <p> <ul> <ol> etc. are contained in block boxes .e.g. <div> elements , list elememts : <ul>, <ol>, and <dl> .


Inline boxes - They flow one after the other horizontally . They are only as wide as their content needs to be and donot stretch beyond that .Most of text is wrapped within these boxes .e.g. images, links , text .


CSS box properties

width - This determines width of the content area . Suppose you want to set width of the header .This property doesn't applies to inline boxes .


                 #header { width: 250px; }

padding - Padding is the whitespace between content and the edges . e.g.



               #header { width: 250px;
                         padding: 10px;
                       }
       
This applies padding to all four sides and our CSS box is now 270 px wide .


To apply different extent of padding to different directions :


             padding-top: 5px;
             padding-right: 10px;
             padding-bottom: 5px;
             padding-left: 10px;
In case we apply padding to a block box the surrounding text moves further away to accomodate it . In case of inline box the horizontally adjacent content recedes away but the vertically adjacent content may be overlapped .


border - It's the area consisting of the edges of the box .It sets a border width, style, and color for all four
sides of a box.


             #header { width: 250px;
                       padding: 10px;
                       border: 1px solid black;
                      }
e.g.

             border-width-top: 1px;
             border-style-top: solid;
             border-color-top: black;


margin - Whitespace around the box . It pushes any content around the box further away .

e.g.

                 h1, p, ul, ol, { margin: 0 1em ; }


0(0 is not followed by any units )- First value by default applies to the top and bottom of the margin .

1em - This value applies to left and right margins .

So,

         margin: 0 1em ;


expands to :

        margin-top: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        margin-left: 0;

em - It is the length of element’s current font’s lowercase letter m . This is a relative length unit as the size of em depends on the size of font used .

e.g,

        <div id="footer">
           <p>Copyright 2010 Movies Freak , All rights reserved.</p>
        </div>


      #footer {
      width: 250px;
      padding: 10px;
      border: 1px solid black;
      margin: 0 auto;
     }

Use of auto value in this case puts the footer in the center of the browser window .This happens as left and right margins adjust to occupy equal horizontal space .

CSS TUTORIALS - CSS cascade

A combination of different selectors and combinators can be used for attaining specific select patterns .e.g If we have page full of anchor elements nested inside unordered lists and we want to style only those within the division with id as 'header' .
                  
           <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul>
              <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>



        #header ul a {
                         color: red;
                         text-decoration: underline;
                     }

CSS rules can be over-ridden by specifying another rule after it . e.g. referring to our previous example :


        <div id="header">
           <h2><a href="index.html">Movies Freak</a> </h2>
           <ul>
              <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>


CSS Rule 1:        

           #header {
             font-weight: bolder;
             font-family: times, serif;
            }

This would style all the elements .But if we want to style the list items differently , we provide a new CSS rule .


CSS Rule 2:

           #header ul {
                        font-weight: bold;
                        font-family: Zapfino, serif ;
                      }

This rule overrides the previous CSS Rule .We say CSS Rule 2 "cascades" over the top of CSS Rule 1 .

CSS cascade is a set of rules that define how conflicts among different CSS declarations are resolved .Specific rules override more general rules .Factors that determine cascade are where it was written in the CSS file as well as specificity of the CSS selector .e.g. selector with multiple combinators will be more specific .

Type selector is more general than class selector which in turn is more general than ID selector. So , is CSS rules are specified for all three .CSS for ID selector will cascade over CSS for class selector which in turn cascades over type selector .


Source order cascading  - In case we want the style of a particular element to be over-ridden by the one defined in the CSS file , we use embedded form of styling
i.e.

         <div class="movie" id="1">
            <h1>Akira</h1>
            <p>This movie is trash . Please don't waste your time on this .</p>
         </div>
         <div class="movie" id="2">
            <h1>Grave Of The Fireflies</h1>
            <p>Awesome , Superb ,Riveting</p>
         </div>





           <head>
             <title>Movies Freak</title>
             <link rel="stylesheet" href="basic.css" type="text/css" />
             <style type="text/css">
                  .movie{color:green ; }
             </style>
           </head>


In this case

         <style type="text/css">
                  .feature { color:green ; }
          </style>

will over-ride the styling of specified section i.e. class type "movie" over


      
           link rel="stylesheet" href="basic.css" type="text/css" />



Another way of  source order cascading is to specify another CSS file after the initial one . CSS file specified later will over-ride the previous one .

           <head>
             <title>Movies Freak</title>
             <link rel="stylesheet" href="basic.css" type="text/css" />
             <link rel="stylesheet" href="advanced.css" type="text/css" />
           </head>
In this case

        <link rel="stylesheet" href="advanced.css" type="text/css" />

will over-ride

     
       <link rel="stylesheet" href="advanced.css" type="text/css" />