Sunday, December 22, 2024

The Advantages of Using External CSS

Share

When you use “external” CSS (cascading style sheets) to control the basic cosmetics of your web site, you need only to edit those cosmetic properties in one file to update ALL of your web site’s pages. This can be done from your server *if* your hosting service allows you to edit your site from a control panel, or you can edit the style sheet using a text editor on your system and upload it to your server.

Cosmetic properties are defined as characteristics that do not interfere with your visitors’ navigational experience. Not all CSS properties are safely compatible with all browsers, so you must be careful what properties you use. You do not want to negatively effect your visitors’ experience at your site. Obviously, if your visitor is using an older version of Netscape to surf your site, and you have colored scrolls bars which do not display in Netscape, that would be considered a safe, cosmetic property. This is because the visitor using this old browser does not know the scrollbars are displayed in a different color if they were viewing your site with MIE, for example. This does not effect their navigation through your site. If it did, we would not consider it a safe, cosmetic CSS property.

In essence, based on what I described above, using external CSS makes maintenance to your site’s cosmetic appearance quite easy to maintain site-wide. Recently, we updated the appearance of our entire site, BasicTemplates.com, by changing the font-family and size. If you have been to our site before and have viewed it now, you will find this a refreshing new appearance. Feedback poured in about how much our visitors enjoyed the “new look”. A few folks even remarked about how time consuming the change must have been since our site is so large.

Honestly though the change took less than 10 minutes and most of that time was spent checking our pages to be sure that everything was displaying correctly. How did we do it so fast?

We simply opened our external .css file into our favorite text editor, NoteTab Pro (Windows Notepad works fine too and its free!), and changed the font-family name and size. We saved it, and then uploaded that file to our server. Every page was magically changed with the newly formatted text. If you are using our templates, this would be a fun project to try on your own web site. If you don’t like the new look, you can easily change it back within seconds. That’s the beauty of using external CSS.

But that’s not the only reason you should use external CSS in your web site’s design. Search engines love external CSS too! Search engines can spider your site faster, because they do not have wade through all that unnecessary, redundant HTML code. External CSS separates your page content (the information on your site that your visitors come to read) from it’s cosmetic appearance. You can even use CSS to create buttons rather than using images and rollover images which increases your page load time.

Another excellent reason to use external CSS is that it reduces the risk of coding errors. Seriously. You have one external file that contains your code; unless you are using advanced techniques of CSS with multiple style sheets. This code cosmetically formats your pages. If you didn’t use external CSS, you have a higher chance of coding errors that trips the search engines. If you make a mistake in your external CSS file, no problem. Just open it into a text editor, correct the bad code, save it, re-upload it to your server. Now all of your pages reflect the change.

Reference Article: “The Advantages of Using External JavaScript”

Click here to sign up for FREE B2B / Tech. newsletters from murdok!

BasicTemplates.com designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.

Table of contents

Read more

Local News