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. |