Document Level Styles with <style>

Document level styles are styles that are only applied to the one document.  This is achieved through the use of the <style> tag.  This is placed in the <head> of the document and inside the <style> element are placed the CSS rules you wish to apply. The following is an example of the document level style.


<head>
<style type="text/css">
    body{
       color: #333;
      }
</style>
</head>

The style rules created would be applied to the document.  If you only have one file to style then this technique is fine.  For example you may decide to style your homepage differently from others in your site.  If however you want your styles to be available to other documents in your site then the best approach is to use an external stylesheet.

Note: The <style> tag has a required attribute of type to indicate that you are using CSS.

The use of external CSS files is generally the best way to apply style sheets.

Creating Your First Style Sheet

Create a simple text file saved with the CSS file extension.  Add the following to your document.

body {
	background-color:#9CF;
	color: #000066;
}

The above is CSS as opposed to HTML.  CSS is not a markup language and has its own syntax the basics of which are ‘rules’ that consist of selectors, properties and values which we will consider shortly.

The <link> tag

To attach the style sheet to the HTML document we use the <link> tag.  This should be placed in the <head> of the document and requires a number of attributes.  The href attribute is exactly like its counterpart used in the <a> tag as it is used to reference the location of the CSS file that you wish to attach to your HTML page.  The other two attributes are optional. The first rel sets the relationship of the linked file to its caller, and then type indicates the type of content that is been linked to.

A <link> tag attaching a style sheet called ‘main.css’ from a folder called ‘styles’ would appear as follows.


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

In the emerging world of HTML5 developers are now encouraged to drop type attribute as follows:


<link href="styles/main.css" rel="stylesheet" />

The href attribute can be an absolute or relative path to the location of the CSS file.

Consistency

The beauty of style sheets is that once created a single style sheet can be added to multiple pages within your web site.  This results in a web site that has a consistent look and feel.  In addition, by editing the CSS file, the look of all the pages using the style sheet can be amended in one go.  So site maintenance becomes easier.

@import

You may come across CSS examples that make use of @import. This is what is known as an ‘at rule’ and is essential just another syntax option. It allows developers to load other sources of CSS into a current stylesheet. The stylesheet that uses the @import can be ‘document level’ or ‘external’, either is fine – as @import is just pure CSS syntax. As such you can use @import as an alternative to link if you like. So:

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

… can also be written as:

<style>
@import url("styles/main.css");
</style>

Why bother? Well it is a valid question but the key benefit of @import is that it allows you to ‘import’ one stylesheet into another so that the styles cascade through the stylesheets to the document. A common use case is when embedded fonts with what happens to be another of the ‘at rule’ family,  @font-face.

Leave a Comment