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:
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:
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, © 2015</h5>
</body>
</html>
This would produce:
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. | ||||
