Which Stylesheet Type to Use and When?
When learning to code the HTML elements of a web page sometimes you want to add some styling to things like the headings, general layout of the page and maybe special sections of the page. This is called formatting the web page or styling a theme and is done using a stylesheet.
There are 3 types of stylesheets, external, internal and inline styling.
Types of Stylesheets
To format a web page or the theme for a blog there are 3 types of stylesheets available for you to use:
An external stylesheet is a separate file with all your styles in it. You link to it in the head section of your web page coding.
<link rel="stylesheet" type="text/css"
Note: The above example is for HTML. If you are coding in XHTML then this coding needs a slight adjustment:
<link rel="stylesheet" type="text/css"
In the examples above the stylesheet is filed in a folder called styles. This makes it easy to find all your stylesheets if you have multiple ones. Also, you can put an instruction in your robot.txt file instructing the search engine bots to stay out of the folder and not add these to their database.
An internal stylesheet is added to the head of the page.
Your style types
Styles inside the internal stylesheet are only applied to the page they are actually coded into.
You see this quite often. A template is made with an internal stylesheet and as you recylce the template the style coding is inserted into each page's head section.
Some Wordpress plugins will do this too instead of inserting a link to an external stylesheet just for the plugin.
An inline style is applied to an HTML element.
<p style="color: #636954;">My sentence.</p>
This inline style changes the colour of my text to a green:
The styling is only applied to this particular instance of the paragraph tag. If you want multiple paragraphs to be this colour, you have to apply it to each set of paragraph tags. Note: There is a more advanced way to accomplish this for multiple paragraphs in one section of the web page, but we'll keep things simple and just demonstrate how an inline style is applied.
Next you need to understand the order the styles are applied to your web page.
Order Stylesheets are Applied
Stylesheets are actually called Cascading Stylesheets. The principle behind Cascading Stylesheets (CSS) is that once you specify a style for an element is it supposed to be applied right down the web page document (i.e. cascade). One thing when learning CSS that's frustrating is a style you set early on in your stylesheet is applied to a more advanced setting for a specific area and you just can't figure out why the advanced setting isn't working the way you want. This is because the style read by the browser first is cascading down the page. e.g. If you set your paragraphs to be indented say, 10px, and in a special section of the page you want them without an indent, you have to reset the indent in the special section's style.
Styles are applied in the order the browser reads them.
When the browser loads your page it reads the coding from the top down. i.e.
- External stylesheet(s) - applied in the order you list them in the head section.
- Internal stylesheet
- Inline style
If you have followed laying out your coding in the order shown in our The HTML Document Structure, this is how the styles will be applied.
However, if the order is not as shown above, the styles will be applied in the order your inserted them into the document.
When to Use Which Stylesheet Type?
The goal here is to create the least amount coding (makes the web page load faster) and make it the easiest to edit later.
The external stylesheet is the best option. If you have all your styles in the external stylesheet then it makes it so easy to change things.
Say you wanted to change the font used. With an external stylesheet you just change it in one spot and all the pages are changed! This is called as sitewide change.
Another advantage of an external stylesheet is that it saves on coding. You can set styles for all your general HTML elements and special styles in one spot and recycle them from one location sitewide.
As you learned above, an internal stylesheet is added to the head section of each page. This adds extra coding to each page that the browser has to read before presenting the page to the visitor.
There is a maintenance issue also with an internal stylesheet. If you specified the font, for example, in the internal stylesheet and wanted to change it, you have to open and edit every single page! That can be quite a job if you have a lot of pages.
When can I use an internal stylesheet? When something you want to style just one one page out of the whole site. Maybe the colour of the font in a highlighted section of the page. Keep in mind you could accomplish the same thing with the external stylesheet by adding a specific class to the highlighted section.
As you learned above, an inline style is only applied to the HTML element you specified it in.
Like the internal stylesheet, this creates a maintenance problem. If you want to change something, you have to find every instance you used that specific inline style.
When can I use an inline style? Like the internal stylesheet, when you have 1 or 2 specific spots that need special styling. Again, this could be done in the external stylesheet for easier maintenance.
Best Stylesheet Type to Use
If you have read all the way through this article, you can see that an external stylesheet is the best type of stylesheet to use.
An external stylesheet:
- Reduced the size of your web page by reducing the coding contained in the web page.
- Makes it much easier to maintain a website and make changes.
- Easier to problem solve if styles are not being applied as planned. You just have to review your styles and the order they are written in from one location.
Stylesheets are wonderful tools. Learning to use them properly is the key. Hopefully you have learned which stylesheet type to use and when is the appropriate time to each of them.