Three Methods of Using CSS in your HTML Website
A CSS or “Cascading Style Sheet” file allows you to separate your websites content from it’s style or appearance. While you would create the layout of your websites content using your (X)HTML file, the CSS stylesheet would control the way in which that content appears (fonts, colours, borders, backgrounds, margins, etc.).
There are 3 methods you can use to implement the css into your design, but which one is better is dependant on what you are doing, or where you are using it.
Let’s first see what each one involves, then we can decided on the ultimate CSS method for
your project.
We aren’t going to go into details on the styles themselves, rather we’ll just go over the three methods in general.
Internal Stylesheets
This method places the CSS code itself inside the tags of your page. With this method each page is separate, therefore, the code must be placed inside each page in order for the styles to work their magic on every page of your website.
Example:
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; }
-->
I’m sure you can imagine how tedious it would be to update every page of your website one-by-one, so let’s examine this option…
External Stylesheets
The external stylesheet is a file all on it’s own that can be created using something as simple as notepad. This file contains no html code. When you save it, give it the .css extension and you have yourself an external stylesheet.
The styles would be the same as those listed about, but with the external stylesheet, you would link to it from within your “head” tags.
Example:
You would then place this code in your html document as shown below:
Using this method would give you far more flexibilty and of course save you time. By simply updating your external stylesheet, every page on your site would be updated at once, rather than using the internal stylesheet where you would have to update and change each individual page.
And finally, the Inline Styles
I don’t use this too often, but I do find it handy when I’m putting together a quick blog post or adding adsense to a page or even on websites where I am posting but don’t have any control over the css files.
An example would be one I explained in my article “How to Wrap Text Around an Image“.
Then type your text here.
This code is an example of using inline css to wrap your text around an image or ad. You could add the style to your internal or external css, but if you are working on the fly, or simply can’t, this is one solution you could use.
So again, which one is better?
- If you are creating a multi-paged website, an external css file would be the better choice. It would save you time and make updating your pages almost an instant process.
- If you are creating a single page, you could use an internal stylesheet simply because you only have to update the one page.
- And if you are working on content to be placed somewhere that you don’t have access to css or just want a quick style change, inline will do.
Some would say using the external method is the best choice and I would tend to agree. But there are situations where you could use either the internal or the inline stylesheets as I mentioned above.
Consider the project you are working on, then decide which option you feel would be your best option.
10 User Comments } to Three Methods of Using CSS in your HTML Website - Share your thoughts
Leave a Reply
A website’s content is what drives traffic to it. How the content is structured is what will make it a success or a failure. Users do not read unless absolutely necessary but scan through information and pick out points of interest on a web page. Some designers just put a block of text on the web page and totally neglect headings, sub-headings, bullets, keywords, paragraphs, etc.
Thanks for subscribing to my RSS! I’m planning to make it more mobile friendly very soon.
Thanks!
Thanks! I love to inspire and teach:) Good luck in your new career. I’ve bookmarked your site for future reference as I’m often looking for graphics on various projects. I’m also going to include your link in my upcoming sites backend for members as a resource.
hey, I am junior designer and your post is a great resource for both rookies and advanced designers. I just became your fan!
I cannot see your site properly on my iPhone (I have the 3G, not 3GS). Anyway, I have put your RSS into my laptop, so thanks!
This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!
free ecards
amazing stuff thanx Such a usefule blog…wow !!!!
I would love to write and say what a great job you did on this, as you have put a lot of work into it.
Hey keep up the great work.