Home

CSS, What Is It And Why You Need It

Posted by Blain | On: Sep 10 2010

Cascading Style Sheets or CSS for short, is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.

There are three styles of CSS that you can use when building your website:

  • External Style Sheet
  • Internal Style Sheet
  • Inline Styles

An External sheet is most commonly used when you want to use the same styles for multiple pages or an entire website. With the external style sheet you can quickly edit specific elements of your site from one file. Every page that you want to use an external style sheet on must link to the style sheet in order for it to work correctly. In your html you would need to add a <link> tag inside of the <head> section of your site:

<head>
<link rel=”stylesheet” type=”text/css” href=”thestylesheetname.css” />
</head>

An Internal Style Sheet is used when you want specific styles on a single webpage. Also if you are working on a large site and need to test your styles before you change the entire site, the internal style sheet is the way to go. The biggest disadvantage to using an internal style sheet though, is that it increases page load time because it must load and parse the style sheet everytime the page is loaded. External Style Sheets are cached by browsers so that page load is faster after the first visit.

To use an internal style sheet you must include the styles within the <head> section of your page:

<head>
<style type=”text/css”>
h1 { font: 2em Times serif; color: #f00; }
p {margin-left:20px;}
body {background-image:url(“images/background.gif”);}
</style>
</head>

Inline Styles are normally used when a unique style is going to be applied to the single occurance of an element. I wouldn’t suggest trying to use this method anytime other than you absolutely need to, not only because of the time it would take to write an html document using them, but also because of the increased load times. Plus one simple error can have you searching for hours trying to figure out where you messed up and forgot to closeout a tag or insert a symbol.

To use an inline style, just insert the style into the relevant tag:

<p style=”color:#FFFFFF; margin-right:20px; font-size:20px;”>This is your styled paragraph</p>

Why you should be using CSS:

CSS makes it very easy to change the style of a document. Say you wanted to move an image in the title of your page to the right by 10 pixels. It would be a nightmare using a table based design. You would have to open every page and alter the table width manually.

The look and layout of a site can be changed beyond recognition just by altering the CSS file. This makes CSS indispensable for large web sites.

I think that the mostly useful feature of CSS is that all of the styling and layout is removed from the html, so your page size is much smaller. The CSS file is downloaded just once by the visitor’s browser and re-used for different pages on a web site. This reduces the bandwidth requirements for your server and also ensures faster downloads for your visitors.

Layout and position of navigation can be completely consistent across a site. This was previously possible only using frames.

There are many more advantages to using CSS. All in All, CSS is something you definitely need to be using in your websites!

If this post helped you at all (or not) please leave a comment and let me know what information would help you with designing your web pages.

Leave a comment