Step 2: Lots of Graphics? No Graphics? Using CSS to Make Your Site Look Nice
So you’ve heard about style sheets, and even been told that you should be using them in your website.
- So what are cascading style sheets (CSS)?
- How do you use them?
- Why not just use tables and graphics that you’ve cut out in Photoshop?
Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways. Let’s talk about what they are first.
A CSS (cascading style sheet) file allows you to separate your web site’s content from it’s style. As always you use your HTML/PHP/ASP file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.
How should you be using CSS?
At this point you have some choices of how to use the CSS, either internally or externally.
Internal Style Sheets
With internal style sheets, you are simply placing the CSS code within the tags of each file you want to style with the CSS. The format for this is shown in the example below.
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
With this method each web page contains the CSS code needed to style the page. This means that any changes you want to make to that one page, so if you want it on the entire site you will have to edit the css contained on every page. This method can be good if you need to style only one page, or if you want different pages to have varying styles.
External Style Sheets
With an external style sheet, you create a seperate file with only css, no html. You can edit this in any text or html editor and save with with the .css extension. To use it on a webpage, you will have to link the file in the head section of your page. Here is an example:
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
This link must be used within the section of your web page:
<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>
<body>
By using an external style sheet, all of your web pages link to one CSS file in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
- Easier Maintenance
- Reduced File Size
- Reduced Bandwidth
- Improved Flexibility
Why Use Style Sheets?
Simply put, style sheets make everyone’s life easier! By using style sheets, you contribute to a faster internet (they load faster than graphics, which makes your users happy too!). Major search engines like Google have started placing some weight on how fast your page loads. Also, if used correctly, style sheets can make your site cross-platform compatible, enabling users with a variety of different workstations and browsers to view your website.
