Welcome to Alternate Gateways - the home of comprehensive CSS and XHTML tutorials that are laidback and easy!
CSS Corner
There are currently four CSS series, which are targeted at everyone from absolute CSS beginners to total CSS pros and cover a wide range of useful tasks. The complete list can be viewed in the CSS Tutorials section, but if you fancy browsing by category, please select an option from below...
-
CSS 101 - A Beginner's Guide to CSS
CSS 101 - A Beginner's Guide to CSS"Absolute beginner CSS tutorials; easy to understand with lots of examples."
-
Short and Sweet CSS Tutorials
Short and Sweet CSS"Short and sweet tutorials on accomplishing basic stuff in CSS."
-
CSS SOS Tutorials
CSS SOS"Tutorials targeting common issues that crop up in CSS."
-
Intermediate and Advanced CSS Tutorials
Intermediate and Advanced CSS"Tutorials on accomplishing intermediate to advanced tasks in CSS."
XHTML Corner
There is currently only one XHTML series, called XHTML 101 - A Beginner's Guide to XHTML, which I have just started. The XHTML 101 series aims to teach XHTML to people who have never used it before, or who perhaps have HTML backgrounds but haven't felt comfortable taking the plunge into the exTensible side of things. The XHTML 101 series can be found here in XHTML 101 - A Beginner's Guide to XHTML.
Tag of the week
Every week I have a little feature called tag of the week — at least I planned to have it every week, but then other stuff came up and now it's been several weeks. But I intend to have tag of the week every week ... unless I forget, in which case remind me ... if you want.
Last week, we covered the incredibly useful dl tag and its children; this week, we'll be looking at the link tag, which is used to include external resources in your document, but you will probably use it the most of linking to stylesheets.
What is the link tag?
The link tag is a self-closing tag if your are coding in HTML and is used to reference external documents, though mainly stylesheets. I should point out, there is another way to include stylesheets, using the style tag but we'll look at that at another time.
How to use the link tag
The link tag is included in the head of your document. If you are using it to include a stylesheet, you must always include a rel="stylesheet" attribute, otherwise your stylesheet will not render.
XHTML Code:
<link href="style.css" media="all" type="text/css" rel="stylesheet" />
HTML Code:
<link href="style.css" media="all" type="text/css" rel="stylesheet" ></link>
In the above example, we're using a href attribute, to supply our link with the path to the required stylesheet, which can be relative or absolute. Next, we're declaring the stylesheet to be used for all output devices, using the media attribute; the various values are: braille for braille devices, embossed for paged braille printers, handheld for handheld devices, print for print preview mode, projector for projectors, screen for colour computer screens, speech for speech synthesizers, tty for portable devices with limited display capabilities and ty for devices with limited colour, scrollability etc.
After that we are specifying that the file we're including has a content type of stylesheet, using the type attribute and lastly, we're using the rel attribute to specify that we're including a stylesheet. Without setting the rel attribute to stylesheet your stylesheet will not render.
Examples and resources:
For examples of the link tag in action, check out the following Alternate Gateways tutorial:
