Home

External CSS

   

Introduction

If you create a style directly in an HTML document that uses it, the style is available only in that webpage. In some cases, you may want to apply a style to elements in different webpages. To do that, you can create CSS code in its own file and let other pages access it.

Creating a CSS File

A file-based CSS is created as a normal text-based document. The content of the file is made of styles like those created in the head section of a webpage. The only different is that code in the CSS file doesn't have to be delimited with <style> and </style>. A CSS file has the extension .css

You can create a file-based style in a folder of your website. Here is the content of a file named exercise.css:

pre {
    font-family: Courier;
    font-size:   0.42cm; }

td {
    font-size:   14px;
    font-family: Georgia; }

If you are planning to use the file in your website, make sure you upload it.

Linking to a CSS File

After creating a CSS file, you can link a webpage to it so the webpage can use the styles in the CSS file. The HTML element used to create a link to a CSS file is named link. The link element is created in the head section of the webpage. The link element uses attributes that complete it.

The link element is used for different goals. Linking to a CSS file is just one of them. This element must indicate the type of link or the type of relationship it is being used for. An attribute named rel is used to specify the intention of the link element. If it is used to link to a document on the same computer, in a network, or on the Internet. The value of the rel attribute must be stylesheet. The attribute can be specified as follows:

<link rel="stylesheet" . . .>

The attribute that specifies the location of the CSS document is named href and it takes the path to the CSS file:

  • If you provide an empty string or you don't provide a value at all, nothing would happen
  • If the file is located in the same folder as the HTML file that is using it, you can just provide its name and its extension. This can be done as follows:
    <head>
     
    <link rel="stylesheet" href="exercise.css">
     
    </head>
  • If the CSS file is located in a different folder, provide the appropriate path to find it. This can be done as follows:
    <head>
     
    <link rel="stylesheet" href="../exercise.css">
     
    </head>
  • If the CSS file is located somewhere on the Internet, provide its address. This can be done as follows:
    <head>
     
    <link rel="stylesheet" href="http://www.functionx.com/Lessons.css">
     
    </head>

As an option (if you want), you can specify the type of file that the link element uses. To specify this information, add an attribute named type and specify its value as text/css. This can be done as follows:

<link rel="stylesheet" href="exercise.css" type="text/css">
 
 
 

Using a Style From a CSS File

An HTML file uses the styles of a linked CSS file as if the styles were created in the local head section of the file. Here is an example:

<html>
<head>
<title>Payroll Database</title>

<link rel="stylesheet" href="exercise.css">

</head>
<body>

<h1>Payroll Database</h1>

<p>The company is planning to create a new database from scratch to manage 
employees payroll. The main table used to hold a payroll will have the following 
structure:</p>

<table border=1 bordercolor="#C0C0C0" width="450">
  <tr>
    <td>Column Name</td>
    <td>Data Type/Format</td>
    <td>Other Properties</td>
  <tr>
  <tr>
    <td>Payroll #</td>
    <td>Sequential Number</td>
    <td>Primary Key</td>
  <tr>
  <tr>
    <td>Employee Number</td>
    <td>Text/String</td>
    <td>Foreign Key</td>
  <tr>
  <tr>
    <td>Time Worked</td>
    <td>Double/Real Number</td>
    <td>Input Value</td>
  <tr>
</table>

<p>An example of creating the table in Microsoft SQL Server is:</p>

<pre>CREATE TABLE Payrolls
(
    PayrollID int unique not null,
    EmployeeNumber nvarchar(10),
    TimeWorked decimal(6, 2)
)</pre>
</body>
</html>

This would produce:

Using a Style From a CSS File

Linking to Many CSS Files

A webpage can get its styles from more than one CSS file. Here is an example of a CSS file named electric.css:

h1
{
    color: Red;
    font-family: Georgia;
}
p
{
    font-size:   12pt;
    font-family: Times New Roman
}
h5
{
    color: Purple;
    font-family: Tahoma;
}

Here is another example of a CSS file named definitions.css:

li
{
    font-size:   12pt;
    font-family: Segoe UI
}
h3
{
    color: Blue;
    font-family: Georgia;
}

You must provide a link for each of the external CSS files. Then, in the HTML file, use each style as you see fit. Here is axample:

<!DOCTYPE html>

<html>
<head>
<title>Energy: Electricity</title>

<link rel="stylesheet" href="electric.css">
<link rel="stylesheet" href="definitions.css">

</head>
<body>

<h1>Electricity</h1>

<h3>Introduction</h3>

<p>Electricity is used to supply power to machines and devices. 
The resulting effects include public light, home heat, industrial 
storage, machine running, engine rolling, etc. The features of 
electricity can be found in the human body and in animals. The 
electricity is used in vehicles, in home appliances (refrigerators, 
vacuum cleaners, TV sets, etc), in air conditioning (home, vehicles, 
commercial buildings).</p>

<h3>Production</h3>

<p>Electricity production consists of using a certain 
source of power to produce electricity. Some sources of power are the 
wind, the steam, the gas, the heat, the sun, the tides (from oceans), 
the fossils, water (from rivers), or the generators. Electricity is 
captured or transformed from those sources and then transmitted to 
machines that directly or indirectly uses it.</p>

<h3>Sources of Energy</h3>

<p>The electricity is produced or generated from various sources, including:</p>

<ul>
  <li>Wind Power</li>
  <li>Solar Energy</li>
  <li>Tidal Energy</li>
  <li>Fossil Fuel</li>
  <li>Hydroeletricity</li>
  <li>Generators</li>
</ul>

<h5>Copyright, &copy; 2015</h5>
</body>
</html>

This would produce:

Linking to Many CSS Files

In the same way, you can link to as many CSS files as you want.

In your website, you can have one or as many CSS files as you want. Different CSS files can have different goals and be used in the desired webpages.

   
   
 

Previous Copyright © 2015-2016, FunctionX Next