Path // www.yourhtmlsource.com → Stylesheets → INTRODUCTION TO CSS

Introduction to CSS

by Ross Shannon

HTML was originally designed as a simple way of presenting information, with the aesthetics of a web page being far less important than the content (and largely being left up to the web browser). Of course, now that the web has become as popular as it has, the presentation of your content has become almost critical to a site’s success. CSS is the key presentational technology that is used to design websites.

Clock This page was last updated on 2012-08-21


What are Stylesheets?

In the late ‘90s, HTML coders noticed that they were retyping the same old tags again and again on the same page, leading to bigger HTML files and above all, time consumption and frustration. You may have found yourself in the same situation, adding in mountains of <font> tags, despite wanting them all the same; or using tricks like invisible gifs for spacing.

Then, someone had a great idea: have one file that defines all the values that those piles of tags would have done, and then have all your pages checking this file and formatting your pages accordingly. You can therefore leave out most of the formatting tags in HTML and use only nice structural elements (like headings, paragraphs and links) — separating structure and presentation.

In late 1996 CSS (Cascading StyleSheets) became a reality, forged by our good friends the » World Wide Web Consortium (W3C). Your stylesheet acts as a partner to your HTML code; taking care of all the layout, fonts, colours and overall look of your site.

If you ever decide to change the look of your site, you modify that one CSS file (your style sheet) and all the HTML pages reading from that file will display differently. This makes maintenance of your design much easier.

Benefits of CSS

Another of CSS’s boons is that you define things once, making it far more efficient than defining everything in HTML on every page. This means:

  • Pages download faster, sometimes by as much as 50%
  • You have to type less code, and your pages are shorter and neater.
  • The look of your site is kept consistent throughout all the pages that work off the same stylesheet.
  • Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.

Well-authored CSS also improves the accessibility of web content, allowing access through myriad devices (handheld PDAs for example) and ensuring that web users with disabilities are still able to receive it. It also eliminates the need for browser-specific hacks and tags, which means your site has a better chance of working across all major browsers.

Initially vaguely intimidating, CSS is a well-designed, elegant language. It is hugely important for the future of web design, and has been pivotal in helping designers move away from the problematic, hack-ridden days of presentational HTML tags like <font>, and allowed us to return to using logical, structural elements which make our sites more accessible.

All that, and there are dozens of powerful extra formatting options and possibilities available through stylesheet commands that are not possible through normal HTML. You’ll see these later on when we get on to things like backgrounds, spacing, layers and borders.

Browser Compatibility Note:

The W3C have thus far released two major versions of the CSS specifications: » CSS 1 and » CSS 2, in ’96 and ’98 respectively. These standards work the same as new HTML standards do, with new features added in each subsequent version. CSS 3 is currently under development but won’t be finalised for a few more years.

Browsers began to support stylesheets properly at the version 4 mark. Internet Explorer 3 had some basic understanding, and Netscape Navigator 4.7 was very glitchy. By version 5 of » Internet Explorer the browser was coming close to full compatibility of the first of these two standards, though many bugs in its implementation remained.

CSS 2 and beyond are now close to being supported properly in full, particularly in the more sophisticated browsers like » Firefox, » Chrome, » Opera and » Safari. It took many painful years, but everybody should be using CSS today.

Implementation

CSS files are termed “cascading” stylesheets because of two reasons: one stylesheet can cascade, or have influence over, multiple pages. Similarly, many CSS files can define a single page.

There are 3 ways to implement css commands into your site:

  • Use one CSS file for all your pages. This is the best way to do it.
  • Integrate CSS commands into the head of each of your documents.
  • Use the style attribute to put CSS code directly into a HTML element.

CSS allows you to use all three of these methods in glorious tandem, inheriting and overriding values as you go (we’ll get on to all that in the next tutorial).

One Central Stylesheet

This is how you should use most of your CSS. You write just one .css file and have all your pages referencing it. This way, a change to anything in this one file will adjust this thing (a font, for example) across your whole site. You could change your entire colour scheme with one modification if you want, over an unlimited number of pages. That’s one of the things CSS was designed for — flexibility.

To create your stylesheet, open a text editor (NotePad or SimpleText will be fine). Remember in the very first lesson on this site, you learned how to save from a text editor into the .html file format? Well, here you’ll be doing roughly the same except your file will have a .css suffix. Just save a blank file as mystyles.css and put it in the same directory as your homepage. Now that you have that, I can show you the syntax used in CSS:

Very Important selector {property: value; property: value; property: value; }

And now a worked example:

p {color: blue; font-size: 120%; }

Just put that one line into your file for the duration of this tutorial. That’s all you need. This rule applies to all paragraph elements. Once you’ve linked the stylesheet to your pages, having this style declaration in your css file would make all the text in your pages enclosed in the <p> and </p> tags blue, and sized 120% as big as the default font size.

This is how all the affected paragraphs will be formatted.

Have a look over these rules:

  • The selector is usually the name of a tag, without its surrounding angle-brackets.
  • The braces are {curly}, not [square] or (round).
  • After the property name there is a colon, and between each individual part there is a semicolon. Each of these pairs of properties and values is a declaration.

You could add another line in under your first one. Try this line of CSS and then use some large headings on your page:

h1 {font-family: Verdana, sans-serif; color: red; font-size: 20px; }

Your stylesheet should look something like this. If you want to affect multiple selectors with the same CSS formatting, add them all together, with commas:

p, div, h1 {color: #00DDFF; width: 80%; } /* modifies all 3 tags */

As above, you can also add comments to your stylesheet using the /*...*/ delimiters. These can give you or anyone else using your stylesheet vital tips about what’s going on in your code.

Attaching Your Stylesheet

Now that you have something in your file, you’ll need to show your pages where their css file is. Put this line of code into the head part of any documents you want to read this file:

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

This could be a new tag to you — rel stands for the file’s ‘RELationship’, and type shows that it’s a text file acting as a CSS stylesheet. Once you’ve made sure that the href is correct (it can be defined absolutely or relatively), you should see your pages being formatted with your preferred values. You can link multiple stylesheets to each page if you want, like having one file with all your fonts, another for margins and spacing etc.

Individual Style blocks

If you use a common design across all of your site’s pages, you should be using the method above. If, however, a number of pages need some particular styling and you need to override the values you’ve defined in your main stylesheet, you can use the style blocks method. To embed style, put this into your head:

<style type="text/css">

p {font-weight: normal; color: gray; }

h1 {color: black; }
</style>

The type attribute here allows browsers to treat this code as CSS. CSS code applied in this way is not technically a stylesheet , but is called an “inline style block.”

Using the Style Attribute

If you need to modify one tag on its own you can embed style information into it using the style attribute:

<p style="color: blue; font-family: Arial; ">

The style formatting will stop as soon as you close the tag it’s applied to, just like any other attribute, so it will be just this paragraph that will be affected. Also note that there aren’t any curly braces used here, but the colon/semicolon rule still applies.

This method is useful for once-off formatting, and overriding previously defined properties, but you shouldn’t use it very much. If you find yourself adding the same style to multiple tags, it might be worth your while promoting it to your main stylesheet, to save time and space.

If you’d like to see a fully-functioning stylesheet, you can look at ours: bubbleicious.css (use Notepad to open). Don’t be overwhelmed by the complexity, as there are some more advanced techniques being used that haven’t been explained yet...

So, that was your introduction. Now, gain some crucial control over your CSS with some slightly more advanced techniques...