Four Methods Used for Adding CSS To HTML

by diyweb on August 15, 2012

When it comes to adding CSS to your HTML, there are several methods from which to choose. Below are four that are commonly used. They each have their strengths and weaknesses. Use this information to choose the one that best fits your situation.

The most common method of attaching CSS rules to an HTML file is done through linking to a separate CSS file. Here, all style information is saved in one separate text document that has a CSS file extension. It is saved directly onto the server and is linked to from each HTML file. You can even include more than one CSS file if necessary.

One advantage of linking directly to a CSS file is the ability it provides to make style changes to pages across the board. If you are making such a change to every page on your website, you will only need to do so once and the change will be applied to all pages. The same is true for changing the look of your entire site. You’ll only have to update once.

Another method is to embed your CSS into the HTML. It is possible to embed your CSS rules directly into your HTML files. Naturally, this involves adding code, but using this method enables you to add style rules to each individual page.

The major disadvantage to using this method is the styles must be downloaded each time a visitor comes to the page. This can cause a slower download time, but usually won’t deter users from going there. On the upside, the CSS is part of each HTML document and exists as one file. This is useful in cases where the file is being sent to someone via E-mail or used as a template.

One more method is to add inline CSS to HTML tags. This involves adding style rules directly to an HTML element. Here, you would add a style parameter to the element. Then, enter the style rules as the value. This is not often a preferred method because it can inflate your HTML and will make maintenance more time consuming. It can, however, be useful in certain situations. One example is when you are using a system where you don’t have direct access to the CSS file. When this is the case, you can add your CSS rules to the elements.

The fourth and final method is to import a CSS file from within CSS. Here you would use the import rule. This allows you to attach a CSS file from within. One example of a need to do this is as follows.

Your website contains 600 separate pages. You link to a CSS file from each page on the website. If you want to add a second CSS file to all of those pages, you could either edit each page, or simply use the import rule to add the file. By choosing to import it from within the CSS file that already exists, you are saving yourself many hours of work.

No matter how you choose to incorporate CSS, you’ll find it to be beneficial. It saves you a lot of time in developing your website and provides you with an easy way to format your pages. Knowing more than one method will enable you to choose the one that best fits your situation.

Previous post:

Next post: