Embedding a Style in an HTML Element
Introduction
|
|
To provide the ability to add a style
to a tag, an attribute named style was created. It is primarily used like
any other HTML attribute:
|
<tag-name style="value">
As you can see, the style attribute is added to an
HTML tag in the document. This is referred to as inline or embedding a style.
The value of the style is not a simple one. It is
rather a definition or a combination of definitions. In this case, it would be made of various sections.
A style in fact resembles an attribute. It is referred to as
a type or a class. Like an attribute, a style is created as a combination of a
key and a value. Unlike an attribute that uses the = operator, a style uses the
colon. The formula of a style is:
style-name: value
As a result, the style would be created as follows:
<tag-name style="style-name: value">
Like HTML tags, the styles used inline have already been
created. You just have to know and choose what style you want to apply.
An Example of a Style: The Font of Text
The font is the characteristic design by which letters and symbols
are drawn on the monitor. A font is primarily known by its name. Examples are Arial,
Times New Roman, Tahoma, Georgia, or Garamond. The style used to specify a font
is named font-family. To apply it, assign the name of the font to the style.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Chemistry: Helium</title>
<head>
<body style="font-family: Georgia;">
<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:
An Example of a Style: The Size of Text
One of the styles you can apply to text is to specify its size. This is
done using a style named font-size. The value of this style can be:
- An absolute value: xx-small, x-small, small, medium, large, x-large, or xx-large
- A relative value depending on the immediate element in which it is nested. The values can be: smaller or larger
- A decimal value
- A percentage
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Watts A Loan: About Us</title>
</head>
<body>
<p style="font-size: x-large;">Watts A Loan: About Us</p>
<p><b>Watts A Loan</b> is a financial management business created by Catherine
Watts. The company lends money to people as well as businesses. The company's
customers include regular people (personal loans, vehicle and boat financing, etc),
small businesses (business startup), and organizations (commercial or <abbr
title="Non-Governmental Organization">NGO</abbr>).</p>
</body>
</html>
This would produce:
An Example of a Style: Text Color
By default, text displays in black. To let you specify the color of text, CSS has a style named color. The value of this style is the name of any color you know. All popular names of colors are valid. Examples are
Red, Black, White, Blue, Green, Yellow, Brown, Navy, Orange, Maroon, Tan, Silver, Olive, Purple, Teal, Violet, Wheat, Aqua (or Cyan), Magenta (or Fuchsia), Lime, Pink, Gold, Khaki, Tomato, Ivory, Salmon, Turquoise, Lavender, Indigo, Plum, Chocolate, Beige, Orchid, Honeydew, Peru,
and Snow, just to name a few.
These colors also have variants such as preceiding its name with Light or Dark.
Additional names of colors are DarkRed, LightBlue, RoyalBlue, SkyBlue, LightSkyBlue, LightSteelBlue, MediumBlue, MidnightBlue, LightGreen, ForestGreen, LimeGreen, SeaGreen, SpringGreen, DarkGreen, LawnGreen, MediumSeaGreen, PaleGreen, GreenYellow, YellowGreen, LightYellow, FloralWhite, OrangeRed, LightCyan, MediumPurple, HotPink, DarkMagenta, FireBrick, DimGray, IndianRed, DarkOrange, DarkViolet, DarkTurquoise, DarkOliveGreen, DarkKhaki, DeepSkyBlue, LightPink, DeepPink, MediumTurquoise, and WhiteSmoke.
The names of colors are not case-sensitive. This means
that you can use:
- All lowercase: Examples are red, green, or white
- All uppercase: Examples are BLACK, YELLOW, or MAGENTA
- The first letter in uppercase for a one-word name: Examples are Blue, Olive, or Navy
- The first letter in uppercase for each part of a multi-word name: Examples are LightBlue, DarkGreen, MediumSeaGreen or DarkOliveGreen
Here is an example of specifying the color of text:
<!DOCTYPE html>
<html>
<head>
<title>Watts A Loan: About Us</title>
</head>
<body>
<p style="font-size: x-large;">Watts A Loan: About Us</p>
<p><b>Watts A Loan</b> is a financial management business created by Catherine
Watts. The company lends money to people as well as businesses. The company's
customers include regular people (personal loans, vehicle and boat financing, etc),
small businesses (business startup), and organizations (commercial or <abbr
title="Non-Governmental Organization" style="color: red;">NGO</abbr>).</p>
</body>
</html>
This would produce:
Creating Many Styles Inline
You can apply as many styles as you need to an element. You have many options.
When inline, you can create different styles in the style attribute. In this
case, each style must end with a semi-colon. You can omit or use a semicolon on the last style.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Database Management: Security</title>
</head>
<body>
<h4 style="font-family: Georgia; font-size: 14pt; color: red;">Database Management:
Security</h4>
<p style="color: black; font-family: Times;">One of the techniques to secure a
database <cite style="color: blue;">object</cite> is through a trigger, which is
an action performed when an event occurs on a database or on a table (or view).</p>
</body>
</html>
This would produce:
