FacebookTwitter

Adding a CSS file to your HTML page

By on Jan 25, 2014 in Beginners, CSS, HTML, Intermediate

Share On GoogleShare On FacebookShare On Twitter

Adding a CSS file to your HTML page
CSS is very useful, it allows you to style your website to your taste. It is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. There are multiple was of using CSS and adding it to an HTML page. In this short tutorial I will show you a few ways of adding CSS to your website.

First things first, Create a CSS file

Open your favorite text editor (if you don’t have one get one choosing a text editior) and create a new file with extension .css. Once you have the file you can start declaring your styles using ‘tags’, ‘classes’, ‘ids’ and or a combinations of all of them.

What are classes, ids, and tags

The class selector is used to specify a style for a group of elements. The class selector is most often used on several elements.This allows you to set a particular style for many HTML elements with the same class.The class selector uses the HTML class attribute, and is defined with a “.”In the example below, all HTML elements with class=”red-background” will have a red background:

1
2
3
4
#para1{
text-align:center;
color:red;
}

You can also declare global attributes for HTML tags such as p, div, li, ul etc. And this is done in the same format as above:

1
2
3
4
p{
text-align:center;
color:red;
}

You can also specify that only specific HTML elements should be affected by a class.In the example below, all p elements with class=”center” will be center-aligned:

1
p.center {text-align:center;}

The are endless style combinations you can generate with simple CSS. So once you have created a few classes you are ready to link that style sheet to an HTML page.

Multiple ways of including CSS

External Style Sheet

There is more than one way to add CSS to your HTML pages. The first and most standard is to link the CSS file in your HTML page inside the head tag.

1
2
3
<head>
<link media="screen" rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The href should contain the correct path to your stylesheet. If the stylesheet is in the same folder as your HTML page then no path is required (just like the above example) but if it’s inside a directory other than the one the HTML page is in, then specify it like this href=”directory/mystyles.css”.

The media parameter specifies when the CSS rules are to be used. “screen” indicates for use on the computer screen. If you specify “print” then the rules will only be followed when the page is printed. You are free to include as many stylesheets as you wish.

Internal Style Sheet

Alternatively, you could insert your style sheet in the same HTML page. You define internal styles in the head section of an HTML page, by using the style tag, like this:

1
2
3
4
5
6
7
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Style

Another way to add style to your pages is to use inline styles. However, inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the background color of a div tag:

1
<div style="background-color:red;">Content goes here.</div>

All together now

All these different ways of adding CSS to your pages can be combine all together for the same page, a bit messy if you ask me, but sometimes necessary.

You may make use of all of them:
– inside an HTML element – inline styling
– inside the head section of an HTML page – internal styling
– in an external CSS file – external styling

Tip: You may use multiple external style sheets inside the same HTML page.

Cascading order

What style will be applied when there are multiple style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4 .Inline style (inside an HTML element)

Inline style always has the highest priority, which means that it will override a style defined inside the head tag, or in an external style sheet, or in a browser (a default value).Hope this short tutorial serves you well and helps you understand a little bit better CSS and the different ways you may make use of it.