HTML Code Examples Index
1. HTML Page Layout Basics	2. Creating HTML Hyperlinks	3. Creating HTML Tables
4. Font/Text Types & Colors	5. Working With HTML Images	6. Creating HTML Lists
7. Working With Backgrounds	8. Importing JavaScript Files	9. Importing CSS Files

Import A CSS File

This is a small section compared to the other because it is focused only on how to import CSS files into your HTML coding.

There are 2 ways to use CSS in HTML, you either code your CSS within the HTML file or you create a CSS file separately and you import it into your HTML.

Let's take a look at both methods:

1. Inserting CSS

You can code CSS within your HTML files and your browser will be able to read it even with a ".html" format extension.

Writing any CSS code must be done within your "head" tag such as the example below:

<html>

<head>

<style type="text/css"> *** Your CSS Starting Tag.

p {margin-right:5px;}   *** Your CSS Content.

</style>                *** Your CSS Ending Tag.

</head>

<body>

</body>

</html>

As you can see just by including the <style type="text/css"> tag you can write any CSS code you want and your browser will be able to read it.

2. Importing CSS

Importing a CSS file is very easy, the point is to create an external CSS file and have all our CSS code in it, then we import it into our HTML file.

This is a good idea since it makes the code look more cleaner and also allows us to choose which CSS files to import in every page we want.

Let's take a look at this next example:

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
*** Use "href" to locate the file your CSS is at, and you 
    will be able to read the file as if it was coded inside
    of this HTML file.

</head>

<body>

</body>

</html>

You can see from the above that including a "href" attribute in the <style type="text/css"> tag, will allow us to enter a location for the CSS file we wish to import into our HTML file.

Did You Like This Page? Please Share :D