The 3 ways to insert CSS into your web pages

For some of you, this may sound like a real lame article. But you ought to give it a chance because I don’t write about stuff you’ll never use! I avoid marginal, nerd centric ivory tower blather like a cat avoids water.

I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much) and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on, eager student, and you will be well on your way to building your own killer web sites! :)

The wise people who created CSS came up with 3 basic ways for you to use CSS in your web pages:

1. With an external file that you link to in your web page:

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

or using the import method:

<style type="text/css" media="all">
   @import "myCSSfile.css";
</style>

Why use the import method versus the link method when using external style sheets? Use the import method if you want to support really old browsers like Netscape 4.0.

Let me explain: Netscape can’t handle most CSS beyond font settings and colors, if it finds any other types of CSS it could cause good old Netscape 4 to crash in some occasions or at the very least mangle your page.

Netscape 4 does not understand the @import method of linking to a style sheet like the newer browsers can, so Netscape just ignores it. You can use this to hide the fancy CCS code in the external style sheet by using the @import method so all the good browsers can reference it while keeping Netscape 4 out of the picture.

Netscape 4.0 is pretty much dead (that is really a good thing) so I personally don’t worry much about it. But for some of you, it may be of concern so I thought it should be mentioned.

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

<head>
   <style type="text/css">
      p { padding-bottom: 12px; }
   </style>
</head>

3. By inserting the CSS code right on the tag itself:

<p style="padding-bottom:12px;">Your Text</p>

So some of you may be asking why have the 3 methods of including the CSS in a web page? The answer is: flexibility and laziness! Ok I’m kidding about the laziness, replace it with ‘precision’. So what the heck does that mean?

I think the easiest way to explain to you what’s going on, is by giving you real examples that demonstrate the differences. Wait a second, don’t fall asleep … the examples are short and I think that once you finish, you will see how easy it really is!

Another reason that you want to continue reading this article is that you will gain a good understanding of some fundamental (and practical) CSS principles – remember that the difference between people who are really good at what they do, and those who are not so good, is in the mastery of the basics. Lets get down on it!

Method 1: Create a separate CSS file and link it to your web page(s)

The heading for this part of the article hints at why you would want to go through the trouble of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric description that describes the advantage; the problem is that only nerds who already know would understand!

In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web pages as you want. This has two major advantages:

  1. You will have much less code in all your HTML pages – makes the pages neater and easier to manage and makes the web pages a little faster on the download. (Although this point is really minor in most cases, and is really over blown in my opinion by some people)
  2. It can potentially reduce the amount of work you have to do in a big way. Why you ask? Simple; lets say you have 50 web pages where you’ve set the text to be black and the headline text (text in between the <h3> tags for example) to blue. Then one day you decide you want to change the color of the text. Since the CSS that controls the text color for the 50 pages is in one CSS file, you can easily change the color of your text in all 50 pages by changing one line in the CSS file!

If on the other hand you had decided to include all your font color information in each page, you would have had to change all 50 pages. This would have been even worse if you had been using font tags, or CSS right on each tag, you would have to change the color settings/code on all the <p> and <h3> tags in all 50 pages! I can tell you from experience that that sucks big time!

The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it.

Method 2: Create a CSS block in the web page itself

The Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site.

Now that we covered the first method of putting all your CSS code in a separate file and linking to it, the other methods are easy to describe.

CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ‘style sheets’ in CSS are self-describing … we know what ‘style’ in style sheets mean. But what is the meaning of ‘cascading’ in CSS?

The cascading effect in CSS

The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.

So let’s look a practical example; let’s say you have a web site with 50 pages where the layout and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout and font choices in a separate style sheet, but for a particular page you need to change the color of some of the text and add a border around a paragraph. This is a perfect example where you might want to place a little CSS in the page itself since the color and border will be unique to that page. Is this all sinking in? :)

Method 3: Embed the CSS right on the tags themselves (called inline CSS)

The Rule: Use this method on a unique element/tag that you want to affect with CSS.

An example can be with a special heading on the page where you want to have a little more padding than you typically do for a heading. Instead of creating a class elsewhere that will only be used on this one occasion, it makes sense to me to just include the CSS inline. I have to stress that inline CSS is something you should rarely if ever use because it can get messy quick.

22 Responses to “CSS Tutorial - 3 ways to add CSS code to your web pages.”

  1. admin says:

    Hi!

    I am allowing comments on this page for the first time!

    Stef

  2. Kirti says:

    Recently started learning CSS and found your article really useful…….Thanks for explaining the ‘Override’ rule…

    “The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.”

  3. admin says:

    Glad I could help.

    Stef

  4. Arya Gaikwad says:

    I am using blogger to create website. I am very used to html coding but new to javascript. Thanks for your tutorial for confusing me even more. It doesn’t works and now it’s creating error in my whole webpage.

  5. fourtyseven says:

    Is it possible to place an img so that text flows around it, YES I know it is but can it be done WITHOUT USING A DIV in the coding.
    I try and the DIV for the float etc throws my page design out of sinc.
    Everything is out of place, I tried to place the image and text in a container, using the div in the css breaks up my container and it is not recognised.
    If you can email me I would appreciate it.
    IMG in web NO DIV is it possible?

    • admin says:

      Just add this code to your image tag:

      style=”float: right; margin:10px;”

      This above CSS in called ‘inline’ CSS since it is applied directly on the tag. The ‘float’ CSS property tells the web browser to float the image to the right. Think of float like a boat floating. You can float it left if you like too.

      The use of the margin property just creates a space (margin) around the image. I set it 10px (px = pixels) … but you can set it to anything size you want. Try it out and play with different values.

      Stef

  6. Roy says:

    Thanks so much, love this tutorial you are seriously the master of CSS. When will the CSS3 tutorials be coming?

  7. Heidi says:

    hi there
    ok, my head is spinning and i’m really really trying…yes.. I am busy with a CSS and HTML tutorial i’m done with intermediary, but now i don’t think so anymore!

    ok, pse dont get despondent with me but… everytime i put the css code into my site all the text sits on my bottom margin?

    then when i use the html it’s ALL GONE?

    i thought i could give this a shot,but….. don’t think i’m ready..
    pse advise what im doing wrong…

    then you mention ” create a seperate css file” WHERE?

    any and all help is greatly apprecaited!

    Confused so much alot alot!

    • admin says:

      Hi,

      How to create a separate CSS file:

      1. Create a simple text document – just like you would when you create a new HTML page.
      2. Call this new document: master.css – the .css file extension tells the web browser that this file is a CSS document.
      3. Now you write your CSS code in this document.
      4. In your HTML page, you create a link to the CSS document:

      Now the CSS you put in the master.css page will affect the HTML page that is linked to it.

      Makes sense?

      Stef

  8. Andrew says:

    I’m learning responsive design and I’m trying to limit the amount of http requests for things like JS or CSS files. I’m using a framework (foundation) which has several style sheets plus whatever custom ones I add myself (media queries, Global layouts, etc.)

    After testing one of my sites in a couple different online speed tester/recommend improvement type sites including Google. They kept telling me I should consider removing “blocking scripts” and “blocking CSS links.” Combining a couple of my custom stylesheets into one worked but when I tried to finally combine them all by taking my custom style sheet and putting at the bottom of the main framework style sheet (foundation.css.min) it didn’t work. I don’t understand.

    I thought the cascade would treat styles at the bottom of a style sheet as overriding the styles defined above it. Just like the style links (the ones going to each independent style sheet) I used to have in the header were put into an arrangement with the sheets I wanted to be overriding were below the others. I mean, it works when I combined my custom sheets into one but not when I take the styles from that one custom sheet and simply put it at the bottom of this other main stylesheets styles, what gives?

    Any help would be appreciated. I would like to simply have one external style sheet for the whole site. The main one, as provided by the framework and the custom rules I’d like to simply place on that same main sheet but at the bottom where they should override anything above. What am I doing wrong?

  9. admin says:

    You have to be sure that the styles (selectors) that you trying to override aren’t logically more specialized. Meaning, if you have a selector that is specific to an element, it would override a selector that is applied more globally – even if the more global selector is called AFTER the specific/fine grained selector.

    … Does that make sense?

    So if you have:

    #menu h {font-size:40px;}
     
    h {font-size:30px;}

    The font size inside of the #menu ID would still be 40px;

    … You get the idea.

    Or, it could just be a clerical error on your part!

    :)

    Stef

  10. Anneli says:

    Hello,

    I’m just learning about the basics of CSS and HTML and I read somewhere that when you link your CSS in your HTML document, you can use all three of the most common ways at the same time, but I can’t seem to find anyone really doing it! So is it possible to do it like this:

    Cascading

    a:link {
    font-family: Verdana; color: red; text-decoration: none;}
    a:visited {
    font-family: Verdana; color: red; text-decoration: none;}
    a:hover {
    font-family: Verdana; color: red; text-decoration: underline;}

    etc etc etc”

    And then add the inline CSS later in the code.

  11. admin says:

    If the CSS code in inline – it is on the tag itself so the external stylesheet is irrelevant. Remember that CSS code that is inline, will override CSS code that is linked.

    … That is part of the cascade is CSS.

    Makes sense?

    Stef

  12. Hemanta Tayeng says:

    Hi, I have found your tutorial very interesting and comprehensive. Thanks..

  13. Eric says:

    Nice… it really helps me..

  14. Rachana says:

    hi, I have to read & follow ur tutorial…….its very awesome & working very good….thank for ur tutorial helping me in CSS problem..

  15. JimO says:

    Thanks for your tutorials and help in these forums. I last had my two websites up almost ten years ago. Altogether I had a couple hundred pages and relied mostly on tables. (I love tables!) However I see that they are now discouraged for layout and design so I am learning CSS and re-working and updating one of the sites. Had I learned CSS years ago it could have saved me hours and hours of tedious labor so this old brain is persevering in my studies. Also doing some refresher on HTML and getting acquainted with all the changes.
    Didn’t mean to get so wordy, but I do appreciate all your time and labor. Thank you!

  16. earneyjoe says:

    Good presentation. Thankyou.

  17. Mister Ed says:

    Hi,

    I have been using CSS for a long time but every so often I find it helps to do a little basic review.

    I found your tutorial to be clean and instructive and totally void of geek speak. I’ll be recommending it to others.

    Thanks for your efforts.

    Ed