Creating and Linking External CSS files

By Ades Tynyshev
2005-05-31

Creating and Linking External CSS files

It is particularly useful to keep one css file for the entire website rather than having individual CSS styles in every page, advantage of having a separate CSS file is, it is easy to update and maintain the look and feel of the entire website from a single file. That is why it is better to create an external CSS file if you have not done so. This tutorial will show you how to convert your internal CSS styles to an external file and how to attach them to a page.

This is how we normally define an internal CSS style:

</style>

To convert this style to an external file is very easy, just copy the code (only the ones in red) into Notepad and save it as style.css

Note: If you are creating a totally new CSS file then you have to follow this structure:

.StyleName { properties }

Properties here should be defined as shown above in the notepad, property-name: value;

Now open an existing html page (or create a new html page, and save it as myStyle.html in the same folder as your style.css file). In the source code of the page between the <head></head> tags add the following line:

This will attach your style.css file to the page.

We have created external CSS file then we have linked it to the page and now let's apply this CSS style to the content of the page. Applying CSS style inside the page can be achieved in few ways, here we are going to use only <span> tags. Span tags are used this way:

<span style="allContent">Content Comes Here</span>

All the content between these <span> tags will be having your allContent style properties, that is font size will be 10 pixel and all the font face will be Arial, Helvetica.

So the source code of your page basically should look like this:

</head>
<body>

<span class="allContent">Content Comes Here</span>

</body>
</html>

Tutorial Pages:
» Creating and Linking External CSS files

| Write For Us

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS