CSS stands for Cascading Style Sheet. In it’s simplest form, it allows you to seperate content from style. That is to say that all of your text “Welcome to my site” etc is totally seperate from the fonts, colours, sizes and heading tags.
What is the benefit of CSS? Well firstly it is the way forward with the web (although this should never be a reason on it’s own to start doing something). It normally reduces the sizes (and therefore load times) of your pages. CSS makes it much easier to completely change the look of your website without having to change the pages themselves (depending on how you structure your CSS). In terms of disabled visitors, it enables them to easily remove styles which may be surplus to their requirements.
So, stylesheets contain the style of your site. There are two ways to offer your styles to a browser 1) Internal CSS and 2)External CSS. My personal preference is always External CSS and I will try to demonstrate why:
Internal CSS is stored in your HTML (or XHTML) page(s) as follows:
<html>
<head>
<title>My webpage</title>
<style type =”text/css”>
here we put our css
</style>
</head>
<body>
Web content
</body>
</html>
The downsides to this are primarily that you need to change your webpages to make changes to styles. You can make this easier by using an include which contains all of your internal CSS although that pretty much becomes external because it is not stored within your page(s) server-side.
External CSS is contained within a seperate css file with the extension .css . Within our pages we then include the stylesheet which means that when we wish to change a colour, we change it in the .css file and that colour changes in all the places it is used on our site (providing we have included the CSS file into each of those pages in the first place).
method 1 for including a css file:
<head>
<link rel=”stylesheet” type=”text/css” href=”/cssfolder/cssfile.css” mce_href=”/cssfolder/cssfile.css” />
</head>
method 2 for including a css file:
<head>
<style type=”text/css”> @import url(cssfolder/cssfile.css) </style>
</head>
Downside(s) to CSS:
None really, although there are downsides which are not the fault of CSS. Primarily it is the fault of browsers which CHOOSE to interpret css incorrectly. That is to say that despite the defined standards for css they choose to do something different to every other browser. This means that testing your website on a variety of browsers (I choose IE, Firefox and Safari/Opera) will really help ensure that your site displays in the best way possible.
I will be doing a lot more on CSS so I have created a new category for it. Expect to see more soon.
