Where Will Your Styles Live?

by kirupa   |   16 June 2012

  Have questions? Discuss this HTML5 tutorial with others on the forums.

Now that you have a better idea of what a style is and how to work with selectors to make your style work, let's jump the next hurdle - figuring out where your styles will live. As with all things in HTML, there many ways to do something simple. Putting a style somewhere so that your content can be styled is no exception.

One place your style can call home is the same document as your HTML content:

just a HTML page

Another place is in a separate document called a stylesheet that contains nothing but style rules. You reference this stylesheet in your HTML document to cause its contents to get styled:

html page containing your stylesheet

The end result is identical in both of these cases - the styles you defined get applied. There are some advantages and disadvantages based on which location you put your styles in, but I'll discuss that in more detail towards the end of this tutorial. For now, let's just assume everything is equal and look at how to create styles in both of these locations.

Creating a Style in the Same HTML Document

Let's say you want to define your styles in the same HTML document as the content you actually want to style. Within your document, you can either specify your styles inside a style region or inline with the HTML element you are wishing to modify.

The Style Region

If you want to define your styles inside a style region, in your HTML document, drop a style tag and place your style rules inside it:

<style>
h1 {
	font-family: "Segoe UI", Tahoma, sans-serif;
	font-weight: normal;
}
</style>

You can place your style tag anywhere you want in your document, and you can even have multiple sets of style tags. In general, though, you should just have one style tag located inside the head region of your document as shown in the markup below:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<title>Creating a CSS Style</title>
<style>
h1 {
	font-family: "Segoe UI", Tahoma, sans-serif;
	font-weight: normal;
}
</style>
</head>

<body>
<h1>My Heading</h1>
</body>
</html>

Within this style tag, all of the style rules that affect your document will live. You've probably seen me using this approach for declaring styles in many of my tutorials.

Inline Styles

You may feel that declaring styles in a style region towards the top of your HTML document is a bit impersonal. You have your HTML elements somewhere, and the CSS styles that make them look stylized live elsewhere in your document. That's where inline styles come in. With inline styles, your HTML elements and style rules get really up close and personal.

When you have an inline style, you specify your CSS properties and their values inside the tag that corresponds to HTML element you wish to modify:

<h1 style="background-color: #FFF7D2">My Heading</h1>

The way you specify that is by setting the style attribute on the HTML element you are styling. The value of your style attribute will be a collection of CSS property and value pairs.

Just as with style declarations, each CSS property and its associated value is separated by a colon:

css property and value pair

 Each property/value pair is separated by a semicolon:

<h1 style="background-color: #FFF7D2; font-size: 1.5em">My Heading</h1>

There you have it - styles that live inline on the HTML element you wish to style.

Using an External Stylesheet

The last approach we are going to look at is the extremely impersonal approach where you define your styles in an external file known as a stylesheet. This stylesheet is referenced in the HTML document whose contents you are wishing to style.

Creating the Stylesheet

The first part of using external stylesheets is to first create one. A stylesheet is nothing more than an empty text document with the file extension of .css:

an example of a stylesheet

The contents of your stylesheet are nothing more than just your style rules:

#mainContent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-large;
	font-weight: bold;
	background-color: #E3F0FB;
	border-radius: 4px;
	padding: 10px;
	width: 300px;
	height: 200px;
	text-align: center;
}
.buttonStyle {
	border-radius: 4px;
	border: thin solid #F0E020;
	padding: 5px;
	background-color: #F8F094;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: bold;
	color: #663300;
	width: 120px;
}

For an example, you can see a live version by looking at the contents of displayServerTime.css that I created earlier. Notice that there is no additional markup describing this document as a stylesheet. You just have your style rules.

Referencing the Stylesheet

Once you have your stylesheet, you'll need to reference it so that its contents get applied to your HTML document. The way you reference a stylesheet is by using the link tag, setting its href attribute to the path of your stylesheet, and finally setting its rel attribute to stylesheet:

<link href="/css/style.css" rel="stylesheet" />

When your HTML page loads, it will load the CSS file from the location you specified. All the styles declared in that stylesheet will get applied. That's all there is to it.

Which Approach to Use? (or the TL;DR Section)

At this point, this is really the important question to ask. You have three places to specify where your styles will live, and some of these places are nicer to live in than others. Let's look at the pros and cons of each location.

Style Region in Same Document

This is the case where you have a style tag defined in a single location in your document containing all of your styles.

Inline Style

The inline style case is where you specify the styles you want inside the markup of the element you are styling.

External Stylesheet

When you are using an external stylesheet, you have all of your style rules defined in an external file. This external file is then referenced in the HTML pages you want to style.

The Winner Is...

This may have been pretty obvious from the earlier sections, but if I had to rank my preference on where to have my style sheets live, it would be:

  1. External stylesheet
  2. Style region inside a separate document
  3. ...
  4. ...
  5. Getting a papercut
  6. ...
  7. Inline style

While this is partly tongue-in-cheek, it mostly does reflect my preference. I avoid inline styles as much as I can, and for everything else, I use a combination of external stylesheets and style regions in the page.

If I am creating a single page for a standalone example, I just create a single style region and call it day. If I am working on multiple pages, then I use an external stylesheet that each of my pages contain a link to:

reusing a stylesheet on many pages

This stylesheet will contain all of the styles that are reused on all or most of my pages. Any update I make to my stylesheet will be reflected in all of the pages that use it, so making broad CSS changes is as easy as just editing one file. Your browser caches the external stylesheet, so if there are no changes detected, your browser doesn't download all of the CSS data again. I defer only one-off styles to the style region of the page it is living in.

In the end, having a combination of external stylesheets and a rare collection of styles inside a style region strikes a good balance between ease of use and being practical to meet all of your styling needs.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!