The “How To” on Inserting CSS into Your Web Pages: The Three Approaches

If you are looking for a simple and useful version on how to add CSS into your webpages, without all of the nerdy jargon, then this is the right guide for you. With the accessible, readable, and easy to understand information below, you will be able to turn your webpage into a great website.

Those who created CSS designated three basic solutions for getting CSS in your webpage.

The most well-known approach is to use an external file that links right to your webpage. This is done through the following code:

<link href="myCSSfile.css" rel="stylesheet" type="text/css">

Another way that you can do is by utilizing the import method, which looks like this:

<style type="text/css" media="all">
@import "myCSSfile.css";
</style>

Now you are likely wondering why use the import method or the link method when you have an external style sheet. The simple rule is this: the import method should be used if you want to make sure that users with old browsers (like Netscape 4.0) have access to your webpage.Another way that you can do it is by utilizing the import method, which looks like this:

The reason behind this is that Netscape’s browser is not equipped to handle a lot of today’s CSS, except for font colors and settings. If Netscape comes into contact with other CSS, then the browser will crash at the worst and at the least, your page will look terrible. Essentially, Netscape 4 is unable to understand the import method of linking style sheets as the newer browsers are able to do. As a result, the system will just ignore it.

By configuring your CSS to operate on Netscape, you can hide CSS code in your external style sheet. To do this, use the import method. This way, the new browsers have access too.

Overall though, you really should not need to worry. Most people do not use Netscape, but if you do know that your webpage users do use Netscape, then you should try to accommodate their needs.

back to menu ↑

2. Creating a CSS Block in the Page (Usually inserted at the top of the web page in between the heading tags.

This is a pretty simple concept to follow that does not require a lot of discussion. This is the code you should use when inserting it in between the headings at the top of your page:

<head>
<style type="text/css">
p { padding-bottom: 12px; }
</style>
</head>

back to menu ↑

3. Insert the CSS code on the Tag

<p style="padding-bottom:12px;">Your Text</p>

The final approach has three separate methods. Now, you may be wondering what the purpose is behind having three different approaches to this section. The best way to explain why is to see for yourself – so hopefully you are not going to take off at this point because there really is a bit more to see. At the end of the guide, we are also going to go over some advanced CSS for those who really want to dig into it.

The good thing about the next three sections is that they are pretty short. Therefore, if you are time crunched, have no fear – this guide is all about simplicity. Another advantage of the next few sections is that they will further familiarize you with fundamental and practical principles of CSS. With these principles, you will not only be good at what you do, but great.

Let’s continue to the heart of this section:

Option A: Separate CSS File that Links to Your Page(s)

As you may be wondering, what is the value in creating a separate CSS file instead of just pasting the code directly into the page? Well, if you cannot guess the answer, then we will just provide it for you. There are a few reasons why you want to keep the CSS code in a separate file on its own that can be linked to the webpage. The two reasons are:

1. You want to manage how much code appears on your website. By utilizing this approach, you can keep the code in all of your HTML pages at a minimum. As a result, the entire page will be more manageable, neater, and it will also allow for smoother and faster download for your users.

2. While it may not seem so initially, the amount of work that you need to do in the long run is significantly reduced. For example, if you have 100 web pages that you have configured with black text and headlines with <h3> tags that are a different color and you then determine that you want to alter the color of the text – you may have a big job ahead of you. Unless, that is, you chose this method. Because you have CSS that handles the color of the text for the 100 pages in the CSS file, you quickly change the color on all 100 pages by going to the right line on the CSS file and altering it.

As you can tell, this totally beats going through page by page and fixing the color. Even more challenging, you would also need to make sure that you are using the right font tag for each color, therefore leading a massive amount of work.

As you now know, the rule is that if you have a set of webpages that include the same style features, then you should use a separate CSS file that is linked to your webpage. This is a much easier and less time consuming approach in the long run. Also, it should now make a lot more sense to you why this approach is used. Now, to the second approach:

Option B: A Webpage that Features the CSS Block

This method should be used if you would like to override the CSS that is linked to the CSS file. Alternatively, you can also use it if you are only handling a website that has one webpage. Otherwise, look above option B and at option A: that is the approach you should be using.

When starting this guide, we covered what CSS stands for – remember? It stands for Cascading Style Sheet. While the terms “style” and “sheet” are self-explanatory, there has not been a lot of discussion as to what “cascading” refers to. The good news is that we are going to cover that now.

“Cascading” in CSS is used to describe a cascading mechanism. Essentially, when you have CSS code on a webpage, it can be overridden by a linked file that also has CSS. As a result, CSS declared “inline” on the tag. The inline then overrides the rest of the CSS.

To put this into perspective – a practical example can be of use. If you have 100 webpages that have the same font and style on each of their pages and you added the CSS information on a separate style sheet, then at some point, you may want to change color, add text, or make another alteration at a specific point for one page versus another.

To make this change, you do not need to go to the separate style sheet. Instead, you can add CSS into the page itself. Once you add it in, it will override the information in the style sheet and change the current sheet to the new settings that you have configured by adding the CSS into the page. Again – just keep in mind the concept of overriding CSS and how it works.

Method C: Inline CSS – CSS Embedded into the Tags

As covered earlier, this method should be used if you want to change a unique element or tag with CSS.

When using this approach, you can alter a special heading on a page. The alteration can be as minute as adding some more padding. Let’s use this as an example. Rather than creating a new class, you can instead add the CSS inline.

For the sakes of keeping things simple though – this approach should be avoided as much as possible. While it can be helpful, it can cause things to get pretty messy. Therefore, you are better off using the easier approaches mentioned above.

Continue To 15 CSS Tips
We'd love to hear your thoughts...

Leave a reply

Hosting Review Box
Compare items
  • Total (0)
Compare
0