understanding style sheets (css) and three different ways to use them

Cascading style sheets or CSS are an important part of modern day websites. They allow you to format the HTML elements as defined in your layouts. It can also be used to do layouts in addition to setting properties such as fonts and colors. Using CSS allows for some amount separation between your web content, layout and formatting. This increases the maintainability of the website and allows you share a consistent look and feel among your webpages.

There are mainly three different ways the style rules can be used on your webpages.

  1. External StyleSheets
  2. Internal StyleSheets or Style Tags
  3. Inline Styles

Using Style Tags (or Internal Style Sheet)

You can write your style rules inside the document head with in the style tags. If you have to use the internal style sheet this is probably the most preferred spot for it. Technically, you can use the style tag anywhere in your HTML code. There is a definite possibility of performance degradation in the rendering process if you specify it all over the place.

Using the rules in the head is most useful when the style is limited to that single page. Sometimes, the style of an element on one page is different and needs to be overridden with in the page. It might also be that the rules used in this page is not to be shared with other pages. In this scenario, it is useful and convenient to specify the rules in the page itself.

This also eliminates the need to create an extra external style sheet as well. This could also save an HTTP connection that needs to be made to fetch the external style sheet, especially if these rules are not that many.

As mentioned this is not a good idea if you plan to reuse the style in other page or if the amount of style is very large. Below you can see an example of what this will look like.

Example:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

For SEO purposes, the external style sheets of smaller sizes can be dynamically be in-lined as internal style sheets.

Using the Tag attribute (Inline Style)

This method provides the ability to override styles at the tag level. What you do here is specify the rules using the style attribute of the HTML tag. This rule then is applicable only on that particular instance of the tag.

For example, you specify a rule for the h1 tag using either the external or the internal style sheet, then that rule is applied on all the h1 tags wherever it is used. If you use the inline style on a h1 tag, then it is used only in that particular instance of the tag and does not apply to any other h1 tags used anywhere else on the page or elsewhere.

This type of usage is mostly about the scope of the rule. You should have very few rules that needs to be overridden in this fashion. Usually, these are one off exceptions to the general rules that are defined in the external style sheets

Example:
<h1 style="color: blue; background: yellow>My Headline</h1>

External Style Sheets

External style sheets are a separate style sheet file with a css extension inside which all the style rules are defined. This provides the ability to maintain a common look and feel across all the pages on your website.

This allows for the separation of the display rules from the content of the page as well as the general page layout. Although much of the page layout can be done in the CSS as well. This increases the flexibility and maintainability of the website.

This external style sheet is linked to a webpage using a link tag. It is always specified in the document head, as shown below.

Example:

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

Technically, you can reference the external style sheets from another style sheet or with in the style tag anywhere in the page. But this is not usually a good idea. Referencing style sheets using import statements can affect your the page performance and reduce the page load times.

A single element can have multiple rules defined at different levels or in different files in multiple ways. When there are multiple rules for the same element, the “last” rule in the scope is used. In other words, the rules overwrite a previous existing rule. This means that the style rules have the following order of preference..

  1. Browser Default: This is the base set of rules either specified in the browser or in user specific style sheet loaded by the browser
  2. External Style sheet: If an external sheet is specified in the document head, then the rules in there will override the browser or user specific rules.
  3. Internal Style sheet: The rules with in the style tags in the document head or in the code, in the order of how it is parsed. Rules that occur later in the code will override the ones above it.
  4. Inline style: Styles specified with in the html tag using the style attributes has the highest priority.

It is possible to specify rules, that cannot be overridden. You will need to use the !important keyword with the rule to do that. It is always a very bad idea to do that, unless it is absolutely necessary.

Example:

<style type="text/css">
p {color:blue !important;}
</style>