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:
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:
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.
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.
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.
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:
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.
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.
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:
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.
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.
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.
This is the case where you have a style tag defined in a single location in your document containing all of your styles.
The inline style case is where you specify the styles you want inside the markup of the element you are styling.
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.
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:
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:
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.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--