Ever been creating a web page and you've been banging your head against the wall night because you're trying to find a reasonable way to make all of your CSS nice and organized? You've tried inline CSS but that's too messy and an Internal Style Sheet is too much copying and pasting. Although this exact scene is probably very unlikely, I don't rule it out!

Ways of inserting CSS into your HTML Document

There are three ways you can link a stylesheet into your HTML web page.

  • External Style Sheet
  • Internal Style Sheet
  • Inline CSS

If someone tells you something, it is usually taken with a grain of salt. Well, if you happen to have over 10 lines of CSS that will apply to multiple web pages then I strongly recommend you putting all of your CSS into an External Style Sheet. It'll save you from ripping your hair out when you're trying to fix a problem or change something in your style sheet. It'll also save you the time from going back to change every single instance of the CSS that you might have plastered over 50 pages of your website.

How do we Link External Style Sheets?

{code type=html}

{/code}
Using this method, you can easily apply one global style sheet to you entire site. This so-called Global Style Sheet would contain all of the classes of ID's of your web page all in one location that you can amend anytime it is needed.

Your External Style Sheet should be written in a separate document with the file extension ending with .css (mystylesheet.css). It should not contain any HTML or other code other than CSS. Example:
{code type=css}
body {
margin:auto;
background-color:orange;
font:14px "sans serif";
}
p {line-height:1.1em;}
{/code}
No HTML, no other scripts, just plain old CSS. Note: em is NOT the HTML code for italics, it is a unit of measurement in typography. See this wikipedia article on em if you're interested.

Internal Style Sheet

You could use an Internal Style Sheet, for instance, if a web page had a unique style separate from the rest of your website.
{code type=html}


{/code}

Inline CSS

To save your sanity, you should only use this method when you absolutely need to. This is usually done for special circumstances when you're letting someone know something like:
{code type=html}
Note: Do not click!
{/code}
That is only changing the color or the "Note:" to red. Then again you can accomplish the same thing by creating a class if you plan on using multiple instances of that red text. Example:
{code type=css}
span.red {color:red;} for specific uses
.red {color:red;} for general use
{/code}
For the HTML
{code type=html}
Note:
{/code}

Order of Importance

Believe it or not, there is an order in which Internet Browsers will read Style Sheets from your web page. That order is:

  1. Inline CSS (Within HTML doc)
  2. Internal Style Sheets (In head tags)
  3. External Style Sheets (Linked via link tags in head)
  4. Browser Default

So inline CSS will override all parent css, that is all CSS in internal and external style sheets plus the browser default. Internal style sheets will override external and external syle sheets will override the browser default (which is mighty boring!).

Remember that just because something will override something else doesn't mean we want to use that as our solution! External Style Sheets are still a preferred way of inputting your style sheet!

There you have, three ways to insert CSS into your HTML document (this DOES apply to PHP, ASP, and other Server-Side Programming scripts as well).

Be Sociable, Share!