How to Reference External CSS Files in HTML
Having CSS embedded in your HTML document is not exactly recommended any longer. With all the new features and demands of creativity on sites, having an external CSS file or two may come in handy. In this tutorial, you will learn how to properly reference an external CSS file.
This will give us a basic layout as well as some content to view.
Now to create the stylesheet. Go ahead and save a text file as a .css, or add a new item to your project in Visual Studio and choose a .css file. Change your code so that it appears as follows. Any additional formatting added by Visual Studio is fine.
Save the file. Notice how we have our div that has class name, “tutDiv”, and the table that has the class name, “info”, formatted here. This part is important, you may give whatever name you want to your HTML elements, or simply try to give your elements id’s. If proper referencing does not take place, no style will be applied. For additional help with CSS, click here.
Close your .css file.
Save your changes and open your HTML document in a web browser. You should now see the styling applied to your page.
Setup
This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up Visual Studio or your favorite text editor. Save this project with the name of your choice.Step 1.
First lets create a page on which we are to view our styles on. Copy and paste the following code onto your index.html:Code Block
index.html
<html>
<head>
<title>HTML Page Title</title>
</head>
<body>
<div class="tutDiv">
<p>This is a paragraph</p>
<table class="info">
<thead>
<tr><th>This is a table</th></tr>
</thead>
<tr><td>Cell</td><td>Cell</td></tr>
</table>
</div>
</body>
</html>
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
Step 2.Now to create the stylesheet. Go ahead and save a text file as a .css, or add a new item to your project in Visual Studio and choose a .css file. Change your code so that it appears as follows. Any additional formatting added by Visual Studio is fine.
Code Block
StyleSheet.css
body
{
background-color:Black;
}
div.tutDiv
{
width: 75%;
background-position:center;
background-color: Gray;
color: Maroon;
font-family: Verdana;
border: 3px solid Red;
}
table.info
{
color: White;
font-weight: bold;
border: 2px solid black;
}
table td
{
border: 2px solid black;
}
table thead th
{
text-align: center;
}
Close your .css file.
Step 3.
Time to tie the knot. In the head section of your HTML document, place the following code between the opening and closing head tags. Replace the StyleSheetName with the name of your .css file.Code Block
index.html
<link rel="Stylesheet" href="StyleSheetName.css" type="text/css" />
A Few Last Words
As you can see, external sheets can come a long way. There are other ways to style your site apart from CSS. Many individuals have used JavaScript and JQuery to style and customize their sites. For more information on JavaScript, click here. Join us next time for more tutorials. See you then!We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
ExternalCSSReferencing.zip