Add CSS in your HTML document: Inline styling, Embed, and External – In this tutorial, you will learn the three ways to include CSS in your HTML document! We will go about this from the least effective to the most effective.

Inline Styling

The reason that inline styling is the least effective is that it pretty much defeats the purpose of having CSS at all. This is obvious by the name “Cascading Style Sheets”.

How to use Inline Styling:

As you might have surmised, inline styling involves writing the code into the HTML. You want your paragraph tag to be 10 font, Arial.

<p style="font: 10pt Arial;">Your paragraph content</p>

This will become tedious and time-consuming, and if you want to make changes to your whole site it involves a lot of work.

Embedded Styling

Embedded styling is CSS included in the head of your HTML document. Instead of styling each element individually, you can style your whole page! For a one page website, this could work for you.

What does this look like?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
p { font: 10pt Arial; }
</style>
</head>

Again, for a one-page website, this could be effective. The best way though is to link to an external CSS document.

External CSS Document

This is the most effective way to deal with CSS! You create one CSS document (example: styles.css) and link it to every page in the header. This means that you can effect the entire site with just one page of CSS. Amazing, huh?

How do you link this? There are several ways (all within the header), but I think that you will find the following most effective:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="/link-to-your/css-page.css" />
</head>

To create your CSS document, write your CSS onto a text file and save it with the extension .css and you’re good to go!

set background image with CSS Learn

Categorized in:

Web Design

Tagged in:

,