Computer and Business Skills training

Sign Up
Home / HTML / Connecting to Style

Connecting CSS StyleSheets to HTML

In my HTML/CSS class at Training Connection we learn different ways of adding CSS styles to our HTML documents. There are benefits and drawbacks of each method available but first let's make sure we understand what a CSS Style is and why we use them. CSS Styles are used to, well, add style to our HTML pages. You can think of this as the formatting for the page. CSS Styles are instructions to the browser on how we would like our content to appear. For example, we may want the main body of our content, our paragraphs, to appear in Arial, size 14, using a grey color. But, we would like our level one headings to appear in Times, size 24, in the color navy. This is the type of information we can add to our styles and these instructions can be connected to our pages using different techniques. Let us start with the most common method of adding style instructions.


Attached Style Sheets


The most common method of using CSS Styles is attaching an external style sheet to each page on our website. The external sheet contains information in CSS language about what formatting we want to apply to the web page and which element (tag) gets which formatting. For example, if we want all of our <h1> tags to have the formatting we mentioned above, Times, size 24, in the color navy, then we would add the following CSS code to the external style sheet:


h1 {
font-family: Times;
font-size: 24px;
color: navy;
}

In this case, the style information is applied to every <h1> tag on the page. The 'h1' before the opening curly brace is called the selector. It is the tag name (without the <>) that we have selected that will use the property value pairs within the curly braces. Inside the curly braces are the declarations each having a property name and a value we wish to assign the property. The property and value are separated by a colon and the declaration ends in a semicolon. As you can see, you can have multiple declarations for the same selector, unlimited in fact. The entire set, selector and declarations, are called a CSS Rule.


Another example, if you want all of your paragraphs, the <p> tag, to be Arial, size 14, using a grey color, you would add the 'p' selector to the page:


h1 {
font-family: Times;
font-size: 24px;
color: navy;
}

p {
font-size: 14px;
color: grey;
}

You may list as many rules to the style sheet as you need.


There are other types of selectors besides the tag selector. There are id selectors and class selectors that look like the following:


#header – A tag with the id of 'header'. In the HTML it might be a <div> tag with this id. It would look like this:

<div id="header">

.special – A tag with the class of 'special'. It would look like this in the HTML if it were a <p> tag:

<p class="special">

You can use the same type of declarations with these selectors. For example, if you had a <div> tag with the id of 'header' like above and you wanted to give it a background color of blue and a font color of white:


#header {
background-color: blue;
color: white;
}

The style sheet is then attached to each web page you wish to use the style rules using a <link> tag. The <link> tag is added to the header section like this:


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

The 'href' value points to the name of the external style sheet. It can be named anything you want as long as it has a .css extension. The 'rel' and 'type' values essentially tell the browser that this is a CSS Style sheet. You may have different style sheets attached to different pages on your site or multiple style sheets attached to the same page but this an advanced technique that goes beyond the scope of this short tutorial.


Embedded Style Sheet


The second way of using styles is using and Embedded Style Sheet. First, the word "sheets" in the name can be misleading. When we think of a sheet in web design we think of something separate, like the different pages in our website or like the style method above (external style sheet). The term "sheet" is used loosely here, it simple means a separate section in our web page, hence the word "embedded". An Embedded Style Sheet is a section in each page that contains the same style information that we used in our external style sheet but it applies only to the page the rules are embedded. It is usually enclosed in the <head> section at the beginning of the page. Here is an example of applying the same paragraph formatting we did in the previous example, the embedded style section is highlighted in red:


<head>
<style>
p {
font-family: Arial;
font-size: 14px;
color: grey;
}
</style>
</head>

Remember, this appears on the web page that has the content with HTML. We can use Embedded Style Sheets to declare how we want the entire page to appear by adding more CSS Rules like this:


<head>
<style>
p {
font-family: Arial;
font-size: 14px;
color: grey;
}
h1 {
font-family: Times;
font-size: 24px;
color: navy;
}
</style>
</head>

Here we have added format information for all of our <h1> tags on the page. The new rule is highlighted in red. Notice I changed the order of the rules in this section compared to the external style sheet. For the most part the order does not matter except in circumstances that you have conflicting style information for the same tag from separate rules. See the article, "Being specific. CSS Specificity demystified!".


Inline Styles


Lastly, the least used way of adding styles to a web page is adding style information directly to the HTML tag, hence the name Inline Style. Here is an example of adding the style we discussed above to a paragraph tag:


<p style="font-family: Arial; font-size: 14px; color: grey;">

This formatting would apply to the entire content of this one paragraph tag. If we want all our paragraphs to appear the same we would have to add the same Inline Style to each and every paragraph tag on all of our pages. This could be a lot of work depending on the amount of content we have.


As you can see by our example we use the CSS 'property: value;' syntax but we leave out the declaration as we declare what tag is to be effected by inserting the 'style' property directly in the tag itself. The benefit of using Inline Styles is the formatting information is kept in the same page and close to the content it is effecting. It also has the added benefit of overriding information from the other sources of styles discussed above. It is however more difficult to maintain, especially with larger web sites.


So there you have it, three different methods of using styles in our web site. An attached style sheet, External Style Sheet, an embedded styles section, Embedded Style Sheet, and Inline Styles, putting the format information in a 'styles' attribute of the tag itself.


If you would like to learn more about using CSS Styles and HTML, Training Connection offers a three-day HTML/CSS class in our Chicago and Los Angeles locations.



Related HTML/CSS Lessons

CSS Specificity
CSS Heredity


Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quote for an onsite HTML/CSS class.

To view a sample of our past students testimonials, please click on the following link: HTML/CSS reviews.


Why train with us?Need Group training quotation?Fresh Starbucks brewed every dayFREE Class Repeat with each course