Embedding a Style in an HTML Element
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:
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:
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:
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:
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:
Values in CSS
A string is a symbol, a word, or a group of those. When used by itself in a style, if the value of a style is a string, it can be included in single or double-quotes. If the value of a string must be included inside another string, it must be included in single-quotes. Here is an example:
<!DOCTYPE html> <html> <head> <title>Chemistry</title> </head> <body> <p style="font-family: 'Bodoni MT Black';">Hydrogen is the most widely available substance on earth.</p> </body> </html>
CSS uses two categories of numbers: integers and decimals. Another particularity of CSS is that it uses different units for its numbers. The unit indicates to the browser how it should evaluate a number. The units are considered in categories as absolute and relative.
An absolute value is one that is independent of any other value on the same page. The units that support absolute values are:
A relative value depends on some factors:
In our lessons, we will refer to the numbers reviewed in this section as "HTML-Based Numbers". This means that, in our lessons, the expression "HTML-based number" means a decimal number followed by the 2 or 3 letters that specify the type or category of number.
Some styles use angular values. In CSS, an angle is expressed with a number and a suffix. The supported values are:
The 0 Value
If you want to set the numeric value of a style to 0, you don't need to specify the type of value. Just type 0.
The Default Value of a Style
As we will see in our lessons, CSS provides various types of styles with different goals. Every style must have a value. Some styles can take a value set by your choice, with a name, a number, or a string. Some styles use a value from a fixed set.
In order to use a style, you will type its name and give it a value. If you don't explicitly use a style, it is still used behind-the-scenes. To make this possible, every style has a value that applies if you don't access that style. The value that applies to a style if you don't access that style is called the default value. In most cases, we will indicate what the default value of a style is.