Lesson 03: Document-Based Styling

	Document-Based Styling

Fundamentals of Creating a Style

Introduction

On an HTML element, the style attribute is used to apply a style to only that element. if you want to apply the same style to another tag, you must re-create the same style on that other tag. The alternative is to create the style at file scope and make the style available to any HTML element in the same file.

Heading a Style

To create a style that can be applied to various HTML tags of a document, in the head section of the webpage, create an element named style and close it. Here is an example:

<html>
<head>

<style>
</style>

<title>Wind Power</title>
</head>
<body>

</body>
</html>

The Type of Style

To indicate that you want to create a CSS section, in the start tag of the style section, add an attribute named type and assign the string text/css to it. Here is an example:

<html>
<head>

<style type="text/css">
</style>

<title>Wind Power</title>
</head>
<body>

</body>
</html>

Between the start and the end tags, define the desired style. Actually, you can create as many styles as you want.

Document-Based Styles and HTML Tags

The fundamental types of style created in the style tag use the names of HTML tags (body, p, li, td, etc). To create such a style, write its name followed by openibg curly bracket { and the closing curly bracket } in the style section. Here is an example:

<html>
<head>

<style type="text/css">
p {}
</style>

<title>Wind Power</title>
</head>
<body>

</body>
</html>

Inside the curly brackets, create each style and assign the desired value. Here is an example:

<html>
<head>

<style type="text/css">
p { color: red }
</style>

<title>Wind Power</title>
</head>
<body>

</body>
</html>

Once this has been done, any element or section that uses that tag will automatically use that style. Here is an example:

<html>
<head>
<title>Wind Power</title>

<style type="text/css">
p { color: red }
</style>

</head>
<body>

<h1>Wind Power</h1>

<p>Wind power is a form of energy based on air flowing in a public area. The 
power is actually seized using mechanical turbines</p>

<div>Wind power is currently being widely considered to produce electricity 
instead of fossil fuel and other traditional or costly means</div>

<p>Wind power is valuable when used in a wind farm, in which case many wind 
turbines are erected in an area with high air flow.</p>

</body>
</html>

This would produce:

Document-Based Styles and HTML Tags

A curly bracket can be written on the same line with the tag or on the next line. The following different techniques work the same:

a { color: red }

b { color: green
}

p
{ color: yellow }

i
{ color: black
}

Remember that you can create various styles in the same start tag. Each style would end with a semi-colon. Here are examples:

<html>
<head>
<title>Wind Power</title>

<style>
p { font-family: Georgia; color: red; font-size: 14pt; }
</style>

</head>
<body>

<h1>Wind Power</h1>

<p>Wind power is a form of energy based on air flowing in a public area. The 
power is actually seized using mechanical turbines</p>

<div>Wind power is currently being widely considered to produce electricity 
instead of fossil fuel and other traditional or costly means</div>

<p>Wind power is valuable when used in a wind farm, in which case many wind 
turbines are erected in an area with high air flow.</p>

</body>
</html>

This would produce:

Applying a Style

To make your code easy to read, you can write each style on its own line. The styles can appear in any order of your choice. Here are examples:

<html>
<head>

<style>
p {
    color: red;
    font-family: Georgia;
    font-size: 12pt; }
</style>

<title>Grier Summer Camp</title>
</head>
<body>

</body>
</html>

In the same way, you can create a style for any tag you want. Here are examples:

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

<style>
p {
    font-family: Garamond;
    color: red;
    font-size: 12pt; }

td {
    font-size: 11pt;
    font-family: Tahoma;
}

pre {
    color: blue;
    font-family: Courier New, serif;
    font-size: 10pt; }
</style>

</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 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:

Applying a Style