Make delicious recipes!

Chapter 2: Placing



Style tags can be placed in three ways.
  1. Inline with the HTML element:
    
     An inline tag provides style  <b style = "color:red;" > directly </b> with the tag.
    
    


  2. Per page:
    
    <html>
    <head>
    
    <style type="text/css">
    
        div {
            color:red
        }
    
        .myDivClass {
            color:blue
        }
    
        #myDivId {
            color:green
        }
    </style>
    
    </head>
    
    


  3. In a separate file:
    
    <html>
    <head>
    
    <link rel=stylesheet href="myCssFile.css" type="text/css">
    
    </head>
    
    


Inline styles are not easy to maintain and they involve a lot of style repetition if the same style is to be used at many places.

Style per page solves the repetition problem but still has two issues:
    a) Multiple files cannot share the style embedded in each other.
    b) CSS is always served (and parsed by the browser) as part of the html file, even though it has not changed.

Separate file approach is the best one.
It does not involve mixing of style inside HTML code, thus improving readability and maintainability.
If CSS file is not changed, then it can be cached by the browser, thus improving page load performance.
Multiple web-pages can make use of the same CSS file, thus maintaining same look and feel across the site.





Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal