How Do I Add Style? - Chapter 1

**This course is a continuation of HTML: A Beginner’s Course, please note that the HTML content has already been built and we will now style it with Cascading Style Sheets.

➜ Chapter Booklet HERE

How Do I Add Style to My Website?

How do I add Style to My Website?

Now let’s discuss three ways to add style to a website.

To add style to your website, you use CSS rules. CSS rules literally set up the “rules” for how the browser should display the elements of a website.

There are three main things you need to tell a browser.

You need to tell it:

  • what element you want to style,

  • what type of style you want to add (this is called the property), and

  • what value you want to assign to that property. For example:

h1 {
color: white;

}

In the above example, I am telling the browser to make the text of my h1 heading white...h1 is the selector, color is the property and white is the value.

Selector Property - Value.jpg

THREE WAYS TO ADD STYLE

You can add style to your website by:

  • using the <style> element in the <head> section of your HTML document

  • adding CSS Rules directly to the HTML element’s opening tag (called an inline style) or

  • by linking to a CSS file that has rules laid out for the elements in your website (this is the preferred way).

Inline Styles

You can add styles to your HTML elements by adding rules right in the opening tag of just about ANY element. This approach works like the attributes we discussed in our previous course.

<h1 style=“color:red; font-size:1em;”> Content goes here</h1>

The style attribute is thus included in the opening tag, just as other attributes are in an HTML file.

In the <head> Element

Next, you can also add style at the top of an HTML page within the <head> element.

To do this you use the <style> element:

<head>

<style> h1 {

color: red; font-size: 1em;

}

</style>

</head>

NOTE: If I added a style in the opening tag of the <h1> element and added the same style in the <style> element in the <head> section, the style in the opening tag would win out over the rule in the <head> section because it is closer to the element and more specific.

Preferred Method: Separate Style Sheet

Although there are different ways to add style to your HTML file, the preferred way to add style is by linking to an external style sheet. When you link your HTML file to an outside file, you can apply styles throughout a single page and simply link the same file to other pages in your website to apply those same styles.

For example, many times you may want the same styling for your header on every page of your website. If you had the same or similar content in the header section on each page of your website, you could simply link to a style sheet on every page and the styles would automatically be applied. If you want to change something in your styling, say add a different color, you could simply make the change in the style sheet and every page that is linked to it will be automatically updated.

So you can see that there is a good reason to have an external style sheet linked to your HTML files, especially if you have many pages to your website.

To link to an external style sheet you must:

  • first create a separate CSS file,

  • then link to that CSS file in the <head> section of your HTML file.

To do so you would write:

<head>

<link rel=“stylesheet” href=“filename.css”>

</head>

Usually this linked style sheet code would go near the top of the content you already have in the <head> section of your HTML file.

It doesn’t have to be the very first thing, but it should be near the top of the content you put in this section. Now let’s see how this all would look.

NOTE: An inline style will overrule both an external style sheet and a style element in terms of cascading order because an inline style is more specific and closest to the element.

Be sure to complete the exercise, yourself, before moving on to chapter 2.

Danita Smith