How to include CSS code in a webpage

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

CSS stands for Cascading Style Sheet, its used to control the design and appearance of HTML elements of a webpage.

3 ways to include CSS code

  1. In HTML code of web elements: We put all our styling code within tag of the web elements in the style attribute. This is the best option when the size of code is small i.e webpage is simple.
    <div style='width:100px;height:100px;background:black;'> </div>

    All Google webpages have CSS styles within the HTML elements to ensure faster performance.

  2. Including in the webpage: CSS code is included either in the header or the footer section of the webpage within <style> CSS code </style>tags.
    This method should be used when the size of code is big, and hence keeping all CSS code together is better.

    1. HTML code
      <div id='one'> Hi! How are you? </div>
    2. Stylesheet Code (in header or footer section of webpage)
      <style> #one{width:100px;height:100px;background:black;} </style>

    Both these ways i.e within tags and in webpage are best when you want faster loading of webpages and don’t have pages that need same CSS code. Also, by using CSS code in this way you can override any existing CSS style attached to the web element.

    Both these ways are completely fair to use but they aren’t the standard way of using CSS in webpages.

  3. Including in external file: The entire CSS code is placed in a separate file with .css extension, say cssfile.css. The file is then included in the header section of webpage.
    1. HTML code
      <div id='one'> Hi! How are you? </div'>
      <link rel='stylesheet' href='cssfile.css'> /*path name
    2. Stylesheet code (cssfile.css)
      #one{width:100px;height:100px;background:black;} /*no <style> tags

    This is the recommended way of including CSS in a webpage. It can marginally slow down website loading time but placing CSS externally gives you the flexibility of reusing the same code again and again in multiple webpages. It also makes debugging easier and the code also looks cleaner.

    90% of websites including Facebook, Yahoo and Twitter have external CSS file(s). Also, default WordPress package has CSS code placed in a separate file that you can customize to your taste.

blog comments powered by Disqus