Lesson 01: Introduction to CSS

	Introduction to Cascading Style Sheet

Fundamentals of CSS

Introduction

Cascading style sheet, or CSS, is a set of instructions that indicate to a browser how it should influence an HTML tag of a webpage. Unlike HTML, CSS cannot stand on its own. It is used in addition to HTML.

Using HTML Tags

Many HTML tags can give complete instructions to a browser. As far as aesthetic is concerned, most of those tags have various types of limitations. For example, while fonts (including the name of a font, the size of the characters, and the color of letters) can be applied to a p element, the tag cannot use borders (there is no attribute that can be used to manage the borders of a paragraph).

Many tags use attributes to add to their functionality. Most of those tags and their attributes were created in the beginning of the Internet and before CSS was created. Some new tags were specially created for additional languages such as CSS. Such tags cannot do anything unless another language, such as CSS, is used.

As stated above, CSS is used to specify how an HTML element appears and/or behaves. Meanwhile, a webpage appears on the visitor or user's monitor. The resolution of that monitor influences both how the visitor views a webpage and how the webpage behaves. The issue with monitors resolution is not simple because it is related to the type of machine the visitor is using. There are regular monitors, laptops, tablet PCs, smart phones and other devices.

The Parent of an HTML Element

As you may know already, HTML elements are created from tags. When a webpage displays, the browser creates a list of elements. The list resembles a tree. The tree has a root, the root has branches. Some branches have sub-branches that are also considered branches. A root can have a leaf. Most branches have leaves. In a computer application, the root is the monitor (in reality, the operating system influences the resolution set on the monitor, but we will get into that because we don't need all that headache at this time).

The root of a tree is the parent of everything on that tree. To consider thing more practically, the root is the direct parent of anything that is directly tied to the root. On a webpage and in HTML, the parent is the body element. All the other elements are created directly or indirectly in that body element. Here is an example:

<html>
<head>
<title>Chemistry: Helium</title>

<head>
<body>

<p>Chemistry: Periodic Table</p>

<p>Helium is a chemical element found, or used, in solids, in liquids, and in gases. 
As a solid substance, helium is found in natural gases under the earth from where 
it can be transformed as a form or energy. In another solid form, helium is used in 
weldinmg sticks where it is burned to produce heat and is released as a gas. As a 
gas, helium is used in balloons (party or commercial) to make them float in the 
air. Helium is the second most common substance on earth (behind hydrogen). It has 
no color, no odor, and no taste.</p>

<p>Helium as a chemical element has the following properties:</p>
<ul>
  <li>Chemical Symbol: He</li>
  <li>Atomic Number: 2</li>
  <li>Atomic Weight: 4.002602</li>
  <li>Phase: Gas</li>
  <li>Appearance: Colorless</li>
</ul>

<p>Helium Atom</p>

<p>The helium atom is made of two electrons and two protons. The atom has nine 
different variations (isotopes). As a result, helium is considered by an interest in 
a specific isotope. The two most interesting isotopes are helium-3 and helium-4, 
represented as <sup>3</sup>He and <sup>4</sup>He respectively.</p>

</body>
</html>

This would produce:

The Parent of an HTML Element

As you may know already, an HTML element can be nested in another. When an element is nested, the nesting element acts as the parent as the nested element. As a result, the parent element can influence the appearance of the child element.

Introduction to the Categories of CSS Usage

As you may know already, attributes can be used to add functionality to an HTML tag. Not all attributes can be applied to all tags. In fact, each attribute is used for specific goals. This brings even more limitations to both the tags and their attributes. To expand on where HTML tags leave off, CSS adds styles to those tags.

There are three different ways a style is applied to a tag. You can choose to use one technique, you can combine two techniques, or you can combine all three techniques. CSS is not difficult at all. Probably the biggest difficulty in using CSS is to decide how to use it. This is because it presents limitless options.

CSS and HTML

The Releases of CSS and Browsers

Like every computer language, CSS is regularly updated and a new version can be released any time. At the time of this writing, the current release is designated CSS3. CSS is so huge that the whole language is not released at the same time, as done in other computer languages. Instead, sometimes a feature of CSS is changed while other parts of the language are kept intact.

Like most computer applications, browsers are released regularly with new functionalities. Since browsers are developed by different companies or organizations, they don't have a policy of being released at the same type. Still, browsers try to keep up-to-date with new releases of HTML and CSS. Because editions of browsers are released at different times, it is not unusual that they interpret a style differently. In these lessons, all CSS codes were tested in Internet Explorer 11, Google Chrome version 46.0.2490.71 m in both Microsoft Windows and Linux, and Mozilla Firefox in both Microsoft Windows and Linux.

The Document Type

If you want webpage to follow the current standards of CSS, you should start its first line with:

<!DOCTYPE html>

Here is an example:

<!DOCTYPE html>

<html>
<head>
<title>Energy: Electricity</title>
</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:

The Document Type