Beginner’s CSS Tutorial - September 6th, 2007

Cascading Style Sheets (CSS) allows you an efficient way to style up HTML web pages, and this short guide is here to explain how CSS works and the benefits gained from using CSS.

Firstly, the benefits. For many years the de facto method of building web pages was to use tables, with all style instructions written on the page (the dreaded “font” tag springs to mind…). The disadvantage of this was that on large websites, any future changes such as editing the text colour would need to be done on each individual page. This is obviously highly time consuming and hardly cost effective to businesses. CSS allows you to separate the style from the content. This means putting all text styles, positioning and background image instructions into a single separate file and linking to it from each page. Then any future changes need only be done in one place. Other benefits include quicker loading times (due to the smaller individual file sizes) and easier crawl-ability for search engines.

So, how does this CSS thing work then? In its simplest terms, you declare a list of styles to attach to every instance of a particular element in the following format:

<style type=”text/css”>
selector {property: value;}
</style>

Let me break this down - the <style></style> tell the browser to read the code as CSS, the “selector” is the element you want to style up, the “property” is the type of style you want to declare and the “value” is the value assigned to that style. For example, if I wanted to make the text in all “p” tags red, I would use the following CSS declaration:

<style type=”text/css”>
p {color: red;}
</style>

The “;” after the value isn’t strictly necessary in either of these cases, but is necessary when declaring multiple styles within the same curly brackets “{}”.

If you didn’t want all p tags to have red text, you can take this a step further by adding a class to the p tags you want to have a different style and referencing them in the CSS with the “.class” selector:


<p>This text is red.</p>
<p class=”blue”>This text is blue.</p>

<style type=”text/css”>
p{color:red;}
p.blue{color:blue;}
</style>

This will produce the following output:

This text is red.

This text is blue.

I did mention earlier that the CSS is best put into an external file, but all I’ve shown so far is how to write CSS declarations within the HTML page. Let me fix that…

The CSS can go in an external page with a file extension of “.css”. I’ll call mine “stylesheet.css”. Within the <head></head> tags at the top of the HTML page you need to link to this stylesheet like so:

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

There you have it. With a little more research into how to control the various elements and what selectors you can use (W3 Schools is always a good place to start), you should be well on your way to streamlining your web pages!

Rik
SEO Programmer

Listen to this podcast Listen to this podcast

Posted in Search Engine Optimisation, XHTML|No Comments »

CSS: What font-size property you should use? - July 10th, 2007

The font-size property is one of the most common uses for Cascading Style Sheets (CSS). There are many different measurement units to use when defining the font-size property, divided into two distinct characteristics:

Relative lengths

  • pixels are relative to the screen resolution
  • xx-small through xx-large are relative to the default browser font size
  • percentages, em and ex are relative to the parent element

Absolute lengths

  • points and picas - print units
  • inches, centimeters, and millimeters - length units

Points and picas are print units and produce unpredictable results when viewed on the screen, for example Macintosh normally displays points almost 25% bigger than in Windows machines. Since users have a variety of monitor sizes and display resolutions, it is advisable to use absolute length units exclusively for style sheets for print.

What to use for screen display?

There’s no right or wrong, however there’s two important facts to consider: Accessibility Vs Control.

If you are concerned about accessibility ems is the unit you should use. Ems is relative to the parent element (commonly the body) therefore the user can control how the font is displayed by changing the default browser settings.

This also means that if a user selects a font-size much bigger or smaller than what you had in mind the page look and layout can change dramatically, for this reason the entire web page layout and design must take this into account.

If you prefer to have control over your design you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen, across different browsers, user settings and different operating systems.

Tino
SEO Programmer

Listen to this podcast Listen to this podcast

Posted in Accessibility, XHTML|No Comments »

« Previous Entries   Next Entries »