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 type="text/css">
</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:
| <link href="style.css" rel="stylesheet" type="text/css"> |
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> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <span class="allContent">Content Comes Here</span> </body> |
No Responses to “Creating and Linking External CSS files”