An Introduction to CSS
Posted The: 17/03/2008 At: 18:41
Last Edited: 30/04/2009 At: 20:55
Some Elements and Attributes in HTML has been deprecated, you may have noticed this when validating your pages twords a new doctype. Deprecated means that they have been replaced by equlivants or better alternatives, in most cases this would be CSS Properties.
There are now three types of styles in webdesign, each covered in this Tutorial.
Inline Styles
Benefits. None, it is therefor best to reserve its use for testing purposes, and avoid its use in live pages.
You can write the properties as inline using the "style" attribute.
For instance, common usage of an old attribute like "border", would be to remove the border on image-links, but instead of using the border attribute, we now use the Border property of CSS, which also allows for richer styling. Example:
<p><a href="about.html"><img src="MyImage.jpg" alt="" style="border:0;"></a></p>
Noticed how i added the "border:0;" specification? Thats usually not the best way to do it, nor the easiest way in the long run!
Embedded Styles.
Benefits. The load times for your site is Decreased. Beware that External StyleSheets are cached by the browser, so those may be more effective to use when having multiple pages.
If you got a lot of images, you would need to apply these styles to each and every one of them, not very practical. A much easier way, would be to include the styles in the head section of our site, and simply apply them to all img elements inside a elements, in one declaration. Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>My first Website</title>
<style type="text/css">
a img {
border: 0;
}
</style>
</head>
<body>
<p>My first Website.</p>
<p><a href="about.html"><img src="MyImage.jpg" alt="" ></a></p>
</body>
</html>Noticed how i declared the styles for img elements? The result is that, all images on the page will have the given style applied to them. Unless we specificly declare a diffrent style, which overwrites the old.
External Stylesheets
Benefits. Brandwidth savings for you, as well as lower load times for users. Because External Stylesheets are cached by the browser, they won't have to be downloaded for each seperate page.
There are several ways to include External StyleSheets, off hand i'm going to mention the 2 i know of. The first:
<style type="text/css">
@import url("StyleSheet.css");
</style>Include the above in the head section of your document, then create a file called "StyleSheet.css", and place it in the same directory. The Content of your stylesheet would be:
img {
border: 0;
}The next way dosn't require the style tag, but instad add the following to your head section:
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
Ofcause there are many more specifications then "border", you can use. So i suggest beginners follow the HTML/CSS tutorials; allready experianced html coders should use the referance, and follow the related tutorials if in doupt.
Comments: [0]
