Home

CSS and HTML Elements

Fundamentals of CSS and HTML Tags

Introduction

HTML was created to give simple instructions to a browser about how to display the content of a webpage. This display is enhanced by cascading style sheet (CSS). To put it in reverse, CSS is used to influence how ultimately a browser interprets an HTML tag. All HTML tags are available but, as we will seet, CSS can completely change the way an HTML tag is supposed to behave.

Unique Webpage-Based Elements

As you may know already, the code of an HTML document contains many tags. Some tags are used only once. An example is the body element because, as you know, the fundamental element of a webpage is created using the HTML body tag and there is only one of those tags in the page. By using CSS, you can create a style that applies to such a single element. You can create the style inline. Here is an example:

<!DOCTYPE html>
<html>
<head>
<title>Social Science Studies: Geography</title>
</head>
<body style="color: Blue">

<h1>Social Science: Geography</h1>

<h2>Introduction</h2>

<p>Geography is the study of the environment in which people live. As a result, 
geography considers the <b>interactions</b> between the people and their 
<i>environment</i>, both the local and the global sides. The interactions include 
all aspects of culture, both real and speculative. Normally, geography is a visual 
social science, mostly involving things that are seen, but also things that are not 
immediately seen but are demonstrated, or can be proved, as existing.</p>

<p>Geographic studies include both the physical and <cite>the human aspects of the 
environment<cite>.</p>

<h3>Conclusion</h3>

<p>It is clear that geography influences, and receives influences from, other social 
science fields, not just <b>sociology</b>, psychology, and <quote>political 
sciences</quote>, but also linguistics, economy, and law, etc.</p>

<p>Copyright &copy;, 2015</p>

</body>
</html>

This would produce:

The Body Element

If you use a style section or a CSS file, you can create a style for the single element using its name and specify the style(s) you want. Here is an example:

<html>
<head>
<title>Social Science Studies: Geography</title>
<style type="text/css">
body
{
    color: Black;
    font-family: Arial;
}
</style>
</head>
<body>

. . .

This would produce:

The Body Element

In the same way, you can apply any of those two techniques to any HTML tag. As we will learn, you can also create a section that will appear only once in the webpage. In the style section, you can create a style using the name of the section.

A HTML Object From a Single Element

Most HTML elements are created from a single tag. An example is the link. As you may know already, a web link is created using the a element. Just as you would do with any HTML element, you can create a style of the a element. Here are examples:

<html>
<head>
<title>Social Science Studies</title>
<style>
a { color: Red }
</style>
</head>
<body>

<h1>Social Science Studies</h1>

<p>Social sciences cover a wide range of studies that address all 
types of topics about human beings, their behaviors, their history, their societies, 
and their environments. Regular social science topics include 
<a href="sociology.htm">sociology</a>, <a href="psychology.htm">psychology</a>, 
<a href="philosophy.htm">philosoply</a>, and <a href="geography.htm">geography</a>, 
just to name a few.</p>

</body>
</html>

This would produce:

Applying a Style

 
 
 

A HTML Object From Multiple Elements

Some HTML objects are created by combining various tags. That's the case for lists and tables. In this case, you can create a style for the most parent of the object. Here are examples for tables and lists:

<html>
<head>
<title>Chemistry</title>

<style>
table {
    font-size:   12pt;
    color:       Red;
    font-family: Comic Sans Serif
}
ul {
    color:       Green;
    font-family: Tahoma;
    font-size:   1.04em;
}
dl {
    color:       Purple;
    font-family: Tahoma;
    font-size:   0.45cm;
}
</style>

<head>
<body>

<h2>Chemistry</h2>

<p>In chemistry, the periodic table is used to organize the 
chemical elements. Based on the atomic numbers, the first 3 elements are:</p>

<ul>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li>Lithium</li>
</ul>

<p>Based on their properties, these 3 elements can be 
presented as follows:</p>

<table border=5>
  <tr>
    <td>Atomic Number</td>
    <td>Element</td>
    <td>Symbol</td>
    <td>Atomic Mass</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Hydrogen</td>
    <td>H</td>
    <td>1.0079</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Helium</td>
    <td>He</td>
    <td>4.002682</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Lithium</td>
    <td>Li</td>
    <td>6.941</td>
  </tr>
</table>

<p>The properties of carbon, nitrogen, oxygen, fluorine, and chlorine can be 
presented as follows:</p>

<table border=5>
  <thead>
    <tr>
      <th>Atomic Number</th>
      <th>Element</th>
      <th>Symbol</th>
      <th>Atomic Mass</th>
    </tr>
  <thead>
  <tr>
    <td>6</td>
    <td>Carbon</td>
    <td>C</td>
    <td>12.011</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Niotrogen</td>
    <td>N</td>
    <td>14.007</td>
  </tr>
  <tr>
    <td>8</td>
    <td>Oxygen</td>
    <td>O</td>
    <td>15.999</td>
  </tr>
  <tr>
    <td>9</td>
    <td>Fluorine</td>
    <td>F</td>
    <td>18.998</td>
  </tr>
  <tr>
    <td>17</td>
    <td>Chloride</td>
    <td>Cl</td>
    <td>35.45</td>
  </tr>
</table>

<p>Combining hydrogen and carbon results in many types of organic compounds. 
Examples of hydro-carbon (or hydrocarbon) bonds are:</p>

<dl>
  <dt>Methyl: This is a family of bonds created from methane. Variants are:</dt>
  <dd>Methylium Cation</dd>
  <dd>Methanide Anion</dd>
  <dt>Ethyl: This is a family of products created from ethane</dt>
  <dt>Vinyl: This results from removing a hydrogen atom from the compound. 
Furthermore, other chemical products can be added to get such items as:</dt>
  <dd>Vinyl Chloride</dd>
  <dd>Vinyl Fluoride</dd>
  <dd>Vinyl Acetate</dd>
  <dt>Phenyl</dt>
</dl>

</body>
</html>

This would produce:

A HTML Object From Multiple Elements

Notice that the style of the parent applies to all chidren of the object. As an alternative, you can create a style for different child elements of the object. Here are examples:

<html>
<head>
<title>Chemistry</title>

<style>
dt {
    color:       Olive;
    font-size:   0.45cm;
    font-family: Verdana;
}
table {
    font-size:   12pt;
    color:       Red;
    font-family: Comic Sans Serif
}
li {
    color:       Green;
    font-family: Tahoma;
    font-size:   1.04em;
}
td {
    color:       Blue;
    font-size:   1.20em;
    font-family: Times New Roman
}
ul {
    color:       Green;
    font-family: Tahoma;
    font-size:   1.04em;
}
th {
    font-size:   14pt;
    color:       Magenta;
    font-family: Bodoni
}
dd {
    color:       Maroon;
    font-size:   0.50cm;
    font-family: Georgia;
}
dl {
    color:       Purple;
    font-family: Tahoma;
    font-size:   0.45cm;
}
</style>

<head>
<body>

<h2>Chemistry</h2>

<p>In chemistry, the periodic table is used to organize the 
chemical elements. Based on the atomic numbers, the first 3 elements are:</p>

<ul>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li>Lithium</li>
</ul>

<p>Based on their properties, these 3 elements can be presented as follows:</p>

<table border=5>
  <tr>
    <td>Atomic Number</td>
    <td>Element</td>
    <td>Symbol</td>
    <td>Atomic Mass</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Hydrogen</td>
    <td>H</td>
    <td>1.0079</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Helium</td>
    <td>He</td>
    <td>4.002682</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Lithium</td>
    <td>Li</td>
    <td>6.941</td>
  </tr>
</table>

<p>The properties of carbon, nitrogen, oxygen, fluorine, and chlorine can be 
presented as follows:</p>

<table border=5>
  <thead>
    <tr>
      <th>Atomic Number</th>
      <th>Element</th>
      <th>Symbol</th>
      <th>Atomic Mass</th>
    </tr>
  <thead>
  <tr>
    <td>6</td>
    <td>Carbon</td>
    <td>C</td>
    <td>12.011</td>
  </tr>
  <tr>
    <td>7</td>
    <td>Niotrogen</td>
    <td>N</td>
    <td>14.007</td>
  </tr>
  <tr>
    <td>8</td>
    <td>Oxygen</td>
    <td>O</td>
    <td>15.999</td>
  </tr>
  <tr>
    <td>9</td>
    <td>Fluorine</td>
    <td>F</td>
    <td>18.998</td>
  </tr>
  <tr>
    <td>17</td>
    <td>Chloride</td>
    <td>Cl</td>
    <td>35.45</td>
  </tr>
</table>

<p>Combining hydrogen and carbon results in many types of organic compounds. 
Examples of hydro-carbon (or hydrocarbon) bonds are:</p>

<dl>
  <dt>Methyl: This is a family of bonds created from methane. Variants are:</dt>
  <dd>Methylium Cation</dd>
  <dd>Methanide Anion</dd>
  <dt>Ethyl: This is a family of products created from ethane</dt>
  <dt>Vinyl: This results from removing a hydrogen atom from the compound. 
Furthermore, other chemical products can be added to get such items as:</dt>
  <dd>Vinyl Chloride</dd>
  <dd>Vinyl Fluoride</dd>
  <dd>Vinyl Acetate</dd>
  <dt>Phenyl</dt>
</dl>

</body>
</html>

This would produce:

A HTML Object From Multiple Elements

You don't have to create a style for each HTML element. You can create a style for just the elements whose behaviors you want to control.

Changing the Normal Behavior of an HTML Tag

Every HTML tag was created with a specific behavior in mind. For example, text displayed by the h1 is meant to be larger than text in an h2 element. CSS allows you to change the behaviors of HTML elements to anything you want. To do this, create a style for the tag and apply the behavior you want. Consider the following examples:

<!DOCTYPE html>
<html>
<head>
<title>Social Science Studies: Geography</title>
<style type="text/css">
body
{
    color:       Team;
    font-family: Times New Roman;
}
h1
{
    color: Red;
    font-size: 14pt;
    font-family: Georgia;
}
h2
{
    color:       Maroon;
    font-size:   36pt;
    font-family: Georgia;
}
h3
{
    color:       Green;
    font-size:   20pt;
    font-family: Georgia;
}
</style>
</head>
<body>

<h1>Social Science: Geography</h1>

<h2>Introduction</h2>

<p>Geography is the study of the environment in which people live. As a result, 
geography considers the <b>interactions</b> between the people and their 
<i>environment</i>, both the local and the global sides. The interactions include 
all aspects of culture, both real and speculative. Normally, geography is a visual 
social science, mostly involving things that are seen, but also things that are not 
immediately seen but are demonstrated, or can be proved, as existing.</p>

<p>Geographic studies include both the physical and <cite>the human aspects of the 
environment<cite>.</p>

<h3>Conclusion</h3>

<p>It is clear that geography influences, and receives influences from, other social 
science fields, not just <b>sociology</b>, psychology, and <quote>political 
sciences</quote>, but also linguistics, economy, and law, etc.</p>

<p>Copyright &copy;, 2015</p>

</body>
</html>

This would produce:

Changing the Normal Behavior of an HTML Tag

In the same way, you can make almost any HTML tag behave anyway you want. Here are examples:

<!DOCTYPE html>
<html>
<head>
<title>Social Science Studies: Geography</title>
<style type="text/css">
body
{
    color:       Team;
    font-family: Times New Roman;
}
h1 {
    color: Red;
    font-size: 1.14em;
    font-family: Georgia;
}
h2 {
    color:       Blue;
    font-size:   1.14em;
    font-family: Georgia;
}
h3 {
    color:       Green;
    font-size:   1.14em;
    font-family: Georgia;
}
b {
    color: Orange;
}
i {
    color: Blue;
}
cite {
    color: Magenta;
}
quote {
    color: Aqua;
}
</style>
</head>
<body>

<h1>Social Science: Geography</h1>

<h2>Introduction</h2>

<p>Geography is the study of the environment in which people live. As a result, 
geography considers the <b>interactions</b> between the people and their 
<i>environment</i>, both the local and the global sides. The interactions include 
all aspects of culture, both real and speculative. Normally, geography is a visual 
social science, mostly involving things that are seen, but also things that are not 
immediately seen but are demonstrated, or can be proved, as existing.</p>

<p>Geographic studies include both the physical and <cite>the human aspects of the 
environment<cite>.</p>

<h3>Conclusion</h3>

<p>It is clear that geography influences, and receives influences from, other social 
science fields, not just <b>sociology</b>, psychology, and <quote>political 
sciences</quote>, but also linguistics, economy, and law, etc.</p>

<p>Copyright &copy;, 2015</p>

</body>
</html>

This would produce:

Changing the Normal Behavior of an HTML Tag

Other Topics of CSS and HTML

Introduction to Expanding HTML Elements

As opposed to completely changing how an object behaves, some CSS styles were created to enhance some existing HTML elements. Examples of such elements are lists, pictures, tables, and the surrounding of an element. CSS provides various options not available in HTML.

A Cursor for an HTML Element

The browser is equipped to use a default cursor based on the object on which the mouse is positioned. For example, by default, the browser displays a top-left pointing arrow if there is nothing significant under the mouse pointer, a beam if the mouse is on text, and a pointing finger on a link. You can specify the mouse pointer you want on a box or on an element if you want. CSS supports various types of cursors.

The style that specifies a mouse pointer is called cursor Its value can be all-scroll, auto, col-resize, crosshair, default, hand, help, move, no-drop, not-allowed, pointer, progress, row-resize, text, vertical-text and wait. Here are examples:

<html>
<head>
<title>Energy</title>

<style>
p {
    cursor: row-resize;
    font-size:   12pt;
    color:       black;
    font-family: Times New Roman; }

h3 {
    cursor: crosshair;
    color:       Purple;
    font-size:   x-large;
    font-family: Garamond; }

li {
    cursor: wait;
    color:       Olive;
    font-size:   0.18in;
    font-family: Georgia; }

i     { cursor: help          }
b     { cursor: hand          }
u     { cursor: pointer       }
h4    { cursor: all-scroll    }
h5    { cursor: vertical-text }
cite  { cursor: no-drop       }
quote { cursor: move          }
</style>

</head>
<body>

<h3>Forms of Energy</h3>

<h4>Introduction</h4>

<p>Energy is work that produces heat. Work is the effect of an object that moves 
from one point to another. It is this <cite>movement</cite>, or change in location, 
that produces energy. As a result, there are <quote>various ways to get 
energy</quote>: water, wind, heat (if it is moving from an autonomous source, such 
as the sun), coal, etc.</p>

<p>The two most common forms of energy are:</p>

<ul>
  <li>Potential Energy: This is energy that is stored in a <i>substance</i> or 
  <i>component</i>. For example, there is energy stored in water even when that 
  water is not being used or exploited</li>
  <li>Kinetic Energy: The energy is kinetic as a <u>result of work</u>. For 
  example, the movement of water in a river or in an ocean is work and that work 
  can produce energy</li>
</ul>

<p>For the <b>potential energy</b> to be usable, it must be transferred to <b>kinetic 
energy</b>.</p>

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

This would produce:

The Cursor of an HTML Element

The Cursor of an HTML Element

The Cursor of an HTML Element

If you wanto use a custom cursor, call the url() function and pass the file name (or path) of the cursor.

   
   
 

Previous Copyright © 2015-2016, FunctionX Next