This tutorial teaches you on how to link an external CSS file in an xHTML file. By creating and linking an external CSS file, it allows you to keep all your CSS code separately out in a different file. This eliminates the clutter in your HTML file. This also keeps your content separately from design. An external CSS file will have .css as extension.
To link an external CSS file, all you have to do is just refer that file in your HTML / xHTML file, so that the HTML file fetches the CSS code and builds the elements on the page.
To refer an external CSS file, you have to place a code within </head> tag.
If your style.css file resides is in the same path as that of your HTML file, then use this code:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
If your style.css file is in some other folder, say like images. You have to specify the path in the code:
<link rel="stylesheet" type="text/css" href="images/style.css" media="screen" />
Some explanation might help you understand the code well:
- link rel – stands for link relationship. Assigning “stylesheet” as the link rel will make HTML file to understand its an stylesheet or also known as file with CSS code.
- type – lets you specify the language. Here “text/stylesheet” is used to specify “style sheet language”
- href - is used to link to an external stylesheet and to point out the location of the file. Here style.css is the name of your external stylesheet.
- media – lets you specify the type of device on which your design will appear. This is meant for media specific. There are many other types, most commonly used are:
- all – Meant for all kinds of devices.
- print – This is used for page media. You get to see how you design appears before you print via print preview.
- handheld – for cellphones, pda etc.
…and there are many more like aural for speech, projection for projectors, tv for television, braille for tactile feedback devices, tty for portable devices with display, embossed for braille printers.
Now, you are capable of linking an external stylesheet to your HTML file. Enjoy the fun of CSS.
