Help Stefan Campaign
If you can spare $1 then help support this site and change someone's life forever? Learn how and why on the Help Stefan campaign page. Or donate $10 and get my guide to spices book as a gift for your donation!

Celtnet Information:

Introduction to CSS: Part 2

In the first part of this series on CSS you learnt a little about CSS and its advantages in terms of web design. We're now ready to actively starting to write some code so that you can see what CSS can actually do for you when you come to design your own websites.

Throughout this course I'm assuming that you will be using an external CSS file that you will be incorporating into your HTML files with a <link> tag but just to show you how you can define CSS styles in the header of your HTML files here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>This is an Improtant Title</title> <style type="text/css"> h1.cursive { font: 24pt/48pt Monotype Corsiva; margin-top: 1.5px; text-align: center; } </style> </head> <h1>This is a Normal Heading</h1> <h1 class="cursive">This is the modified heading</h1> <body> </body> </html>

Note that I'm using xhml1-transitional to define this page type. According to this style all HTML (and other) tags need to be in lower case and all tags have to be closed. This may seem restrictive, but it's one way to force yourself to keep to good programming practices.

In the code above the h1.cursive is the selector that alters the <h1> heading to make it into a cursive heading. In actuality the code above would yield:

This is a Normal Heading

This is the modified heading

I can also save the new definition for h1 as a file example.css which is simply the following definitions:

/* this is the CeltNet (http://www.celtnet.org.uk) example CSS file example.css */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */ h1.cursive { font: 24pt/48pt Monotype Corsiva; margin-top: 1.5px; text-align: center; } </style>

Save this file as example.css at the top level of your website. You can then include it and use it as per the example below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link href="./example.css" rel="stylesheet" type="text/css"> <title>This is an Improtant Title <style type="text/css"> h1.cursive { font: 24pt/48pt Monotype Corsiva; margin-top: 1.5px; text-align: center; } </style> </head> <h1>This is a Normal Heading</h1> <h1 class="cursive">This is the modified heading</h1> <body> </body> </html>

In this case the link line loads the example.css file into the browser which is then applied to the styles in your website. I usually define another CSS style file as well which defines how a web page is printed (so that the left and right sidebearings and the footer of the page as well as any ads aren't printed out when the user requests that a page be printed).

Although it's seldom used it's also possible to use CSS Inline with HTML tags. For example:

<div style="background-color:#ff3; border:1px solid black; color:red; font-size:150%; padding:1em;">I am a styled div!</div>

Which yields:

I am a styled div!

Types of Selectors

The example given above is a case of an HTML selector where the style modifies an existing HTML tag. The main types of selector being:

HTML selectors
These are used define styles associated with HTML tags and are generally used as a way of re-defining existing tags

Class selectors
They are to define styles that can be used without redefining plain HTML tags.

ID selectors
Used to define styles relating to objects that posses an unique ID of their own (most often layers)

The Advantages of CSS:

As you may have realized by now, I'm a great fan of CSS and below is a list of some of the strengths of CSS:

Defining the look of all your pages in one place. Rather than having to repeat the same styles or variations again and again throughout your entire website you can now use a single CSS file to define every style and style variant that you need.

Easyily change the look of your site. As all your styles are now in a single file (and separate from your content) if you decide to change the look and appearance of your site you only need to edit the CSS file and not each HTML page on your site.

Define font sizes and all attributes with pinpoint accuracy. CSS turns HTML into more of a typesetting tool. You can define any point size for a font you wish (rather than the limited size variation of HTML). You can also position anything on a web page with better than millimetre accuracy.

Redefine the behaviour of HTML tags. With CSS you can actually over-ride the behaviour of standart HTML tags to get them to do things that they were never intended to, such as changing fonts, locations, removing bullets from unordered lists. (The 'Home' and 'Back' buttons at the bottom of this page are an example of this where the <ul&ul; (unordered list) tag has been re-defined completely.

Define customized styles for links. Using CSS you can allow the behaviours of links to do pretty much whatever you do. You could define an univsited link to be a bold text in a bright colour, change this to italic text as you hover and change to a light text once you've visited the link. You can also remove the underline from the link text. Basically how it behaves is up to you with CSS.

Defining layers. This is one of my favourite behaviours. Because you can position elements any way you want to you can define layers that stack on top of one another. This allows for great menu effects without a single line of JavaScript (see my CSS Menus page for an example of how to use this behaviour to create floating menus).

Get more of your web pages indexed. This is not something that crops-up frequently when people are compiling lists of CSS advantages, but it's a very important aspect of CSS behaviour. Many web coders use scripts such as JavaScript to define the 'whizzy' functionality of web-pages, such as drop down menus. The problem with JavaScript is that it's not indexed by the indexing spiders. As such you have potentially useless content. More importantly, you are potentially throwing away deep links in your website by not allowing them to be indexed. With CSS, as you've separated content and layout the content of your website is pure HTML and it cal all be spidered and indexed by the serch engines. This potentially gives you both deeper spidering and more keywords for your web pages.

Overall, your pages will lad faster as you've removed all the duplicate style definitions from your HTML files (making them smaller) and these are now defined only once in a single CSS document. As this document only needs to be loaded once into a web browser this makes the loadig of yor other web-pages quicker, thus giving your visitors a better experience.

I should mention that there is one potential disadvantage, in that CSS only displays correctly in fourth-generation browsers. However, 95% of all browsers now lie in this category. Even without CSS enabled your pages (as they're basically pure HTML) will still load into older browsers (and even text readers) they simply won't be formatted with your CSS styles.

The next part of this CSS course will get you started on thinking about CSS and actually writing your own CSS code for the first time. If you are interested in following this course, of if you want to brush-up your CSS programming skills then I suggest that you buy yourself a book on CSS and HTML (a number of possible options form Amazon are shown at the bottom of this page).

On to the next part...

Bestsellers

In association with Amazon.com

Sorry, we are currently unable to process your request in a timely manner. Please try amazon.com