Loading

Bits & Bytes

Archive for the ‘CSS’ Category

Three Ways to Apply CSS Styles: Inline, Embedded, and External

There are three ways to apply a style to an HTML element: Inline, Embedded, and External. Below, I demonstrate each of these methods by applying a single style to the same element three times. The necessary code is shown in bold.

(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.

Inline

The inline method is most suitable for setting the style on a single element. This is because the inline method requires us to repeat the entire specification for each element on which we want to apply it. Also, if we want to change the style, we must change it on each element. If you are setting the style for multiples elements, you should consider using either the embedded or external style sheet method.

To use the inline method, simply add style=”<< style specification >>” to the element that you want to style, where << style specification >> is the CSS style that you want to apply. For example, the element above would be written as:

<div style=”width:420px; height:120px; padding:20px; margin:30px; background-color:#ffddcc; color:#885522;“>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>

Embedded

The embedded style sheet method is most suitable for setting the style for a many elements in the same document. With this method, we define a style specification as a class inside the head element and give it a name. Then we can apply the style repeatedly in the document by using the defined class inside each of the desired elements.

To use an embedded style sheet, define all styles in a style tag inside the head, as shown below. In this case, we have defined a class called “prog.” The style associate with this class can be used by adding class=”prov” to a tag, as shown in the example code below. This class can be applied to any number of elements in the document, and the usage of the class allows us to subsequently change the style for all of the elements just by simply changing the class style definition.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
    <title>CSS Applying a Style</title>

    <style>
        .prov {
            width:420px;
            height:120px;
            padding:20px;
            margin:30px;
            background-color:#ffddcc;
            color:#885522;
        }
    </style>

</head>

<body>
<div class=”prov”>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>
</body>
</html>

External

The external style sheet is most suitable for setting a style that is used over multiple documents. Like the embedded style sheet, the external style sheet allows us to change all of the defined styles by making a single change to the style definition. However, the external style sheet uses a separate file to define the style so that it can be used in several files at once.

To use an external style sheet, create a file with a .css extension and put whatever style definitions you would like inside it. Below, I show an example with a file named “MyStyles.css” with the external style specification in it. In the HTML document, we need to add the line <link rel=”stylesheet” type=”text/css” href=”MyStyles.css” /> inside the head tag. This link tag can be used inside as many HTML documents as you would like. Then we only need to add class=”prov” to any element that we want to style, just as we did with the embedded style sheet. Note that in this example, we have the HTML document and the .css file in the same directory. However, if we want to put the style sheet file (the .css file) in a separate directory, we need to add the path to the href.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
    <title>CSS Applying a Style</title>
    <link rel=”stylesheet” type=”text/css” href=”MyStyles.css” />
</head>

<body>
<div class=”prov”>(Proverbs 6:16-19) There are six things the Lord hates, seven that are detestable to him: haughty eyes, a lying tongue, hands that shed innocent blood, a heart that devises wicked schemes, feet that are quick to rush into evil, a false witness who pours out lies and a person who stirs up conflict in the community.</div>
</body>
</html>

MyStyles.css

.prov {
    width:420px;
    height:120px;
    padding:20px;
    margin:30px;
    background-color:#ffddcc;
    color:#885522;
}

Setting Colors in HTML with CSS

I have discussed how to specify a color with CSS in a prior post. Here, I will explain how the color specifications are used. To simplify the matter, I will use the hexadecimal color format for all of my color designations.

The basic block element has several distinct regions that can be specified, as I discussed in a another post on the CSS box model. Of these regions, three different colors may be selected for the border, background, and text, as shown below.

(Leviticus 10:9-11) You shall not drink wine nor any thing that may make drunk, thou nor thy sons, when you enter into the tabernacle of the testimony, lest you die: because it is an everlasting precept through your generations: And that you may have knowledge to discern between holy and unholy, between unclean and clean: And may teach the children of Israel all my ordinances which the Lord hath spoken to them by the hand of Moses.

The border is the outermost region that is colored bluish. When the border color is set, we need to specify the width and the pattern as well. In the example above, we set the border with this designation:
border:10px solid #88aacc;
To break this down, the border has a width of 10 pixels, a solid pattern, and is colored #88aacc.

Inside the border we have the background and the text. The background pinkish color is specified as
background-color:#ffddcc;
Against this background, we have a darker reddish, brown color for the text, which is specified as
color:#aa5522;
This is how the text color is set for any element.

The full specification for the div above, with all of the color and size styling, is given by this code below
<div style="width:420px; height:160px; padding:20px; border:10px solid #88aacc; background-color:#ffddcc; color:#aa5522; margin:20px;">
(Leviticus 10:9-11) You shall not drink wine nor any thing that may make drunk, thou nor thy sons, when you enter into the tabernacle of the testimony, lest you die: because it is an everlasting precept through your generations: And that you may have knowledge to discern between holy and unholy, between unclean and clean: And may teach the children of Israel all my ordinances which the Lord hath spoken to them by the hand of Moses.
</div>

Specifying Colors in HTML with CSS

Colors in a computer are made up of three color channels: Red, Green, and Blue. These three channels are combined to form all colors. For example, when the three channels are at their maximum value, we get the color white. On the other hand, if all of the channels are set to zero, then we get the color black. We have several methods for setting a color in CSS.

RGB Values

background-color: rgb(255, 240, 200);

For our first method of setting a color, we use the rgb() functional notation. Inside the parentheses, the three values are given as comma separated decimal integers that range between 0 and 255. Above, we have a div that we set with the values red = 255, green = 240, and blue = 200. Since all of the channels are close to their maximum value of 255, the color is close to white. However, is has an orange tint because the red and green channels are the largest.

RGB Percentage Values

background-color: rgb(65%, 95%, 75%);

Instead of the values 0 to 255, we can use percentages. The notation is similar to the prior RGB Values except that the values are given as percentages instead of integers: rgb(65%, 95%, 75%). So, the value 0% is is the same as 0, and the value 100% is the same as 255, in RGB Values. Percentages can be given as fractional numbers, since they will be mapped to the range of values 0 to 255. For example, the color above, rgb(65%, 95%, 75%), is the same as rgb(255*.65, 255*.95, 255*.75) = rgb(165.75, 242.25, 191.25). Of course, since the color values can only be integers, these values are rounded to integers before they can be displayed. The color above has a larger green component in it, so looks green.

Hexadecimal RGB

background-color: #f4cfe5;

If you are wondering why the color values run from 0 to 255, then you might not be familiar with hexadecimal. However, you should learn it because it is a more convenient format for representing how computers store numbers. If you are not familiar with it I suggest watching our short videos on bits and bytes and binary, octal, and hexadecimal. These videos will go a long way toward clearing up this extremely important topic, which is likely to trouble you until you get it sorted out.

The hexadecimal RGB format uses a # sign to signal the hexadecimal format, which is then followed by three sets of two hexadecimal digits to represent the red, green, and blue channels:

   #f4cfe5.

These values convert to f4 = 244, cf = 207, and e5 = 229 in decimal. It takes some time to get used to hexadecimal. Once you do, however, it is more convenient to work with since the values from 0 to 255 can be represented with exactly two digits in hexadecimal. As you can see, the color above is a light purple because the red and blue channels are the largest.

Hexadecimal RGB Abbreviated

background-color: #adf;

The abbreviated hexadecimal format is similar to the two digit hexadecimal format, except that it only uses one digit to represent two digits. It does this by repeating the single hexadecimal digit. So, the abbreviated hexadecimal value #adf is the same as #aaddff:

   #adf

The color above is greenish-blue because the blue channel is the largest followed by the green.

Color Names

background-color: orange;

In addition to the formats above, it is possible to specify a color by name. There are only 17 names that are standardized. First, there is orange, which is shown above and is equal to the color #ffa500 in hexadecimal. The other 16 names are shown below, along with their hexadecimal equivalents.

black
#000000
gray
#808080
silver
#c0c0c0
white
#ffffff
maroon
#800000
red
#ff0000
purple
#800080
fuchsia
#ff00ff
green
#008000
lime
#00ff00
olive
#808000
yellow
#ffff00
navy
#000080
blue
#0000ff
teal
#008080
aqua
#0000ff

Other color designations are available in HTML 5. However, these formats are not supported in all browsers at this time.