Bits & Bytes

Posts Tagged ‘website’

« Older Entries

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

By: Michael Hall | 08/27/2013 | Tags: , , , , , , , , , | Posted in CSS | No Comments » |

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;
}

Specifying Colors in HTML with CSS

By: Michael Hall | 05/15/2013 | Tags: , , , , , , , , , , , , | Posted in CSS | 1 Comment » |

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.

Types of Positioning for HTML Elements with CSS

By: Michael Hall | 05/11/2013 | Tags: , , , , , , , , , , | Posted in CSS | 1 Comment » |

There are four positioning styles for HTML elements, which can be specified by a CSS style specification: static, relative, absolute, and fixed. Additionally, we can set the position style to be specified as inherited, in order to copy the positioning style of the parent element.


<div style="width:400px; height:200px; background-color:#aaaaaa; padding:10px; margin:5px;">

<p>"But what became of the young lady?" I asked.</p>

<div style="float:right; position:static; width:150px; height:50px; left:10px; top:20px; background-color:#333333;"></div>

<p style="width:400px;">"Do you really want to know?" he said, buttoning himself in his fur coat carefully. "I confess to the small malice of sending her Sevrin's diary. She went into retirement; then she went to Florence; then she went into retreat in a convent. I can't tell where she will go next. What does it matter? Gestures! Gestures! Mere gestures of her class."</p>

</div>

Above, we have the code for a container div element that contains three other elements: two p sections and a div section. We will focus on changing the position property for the inner div element, which is dark gray. The position specification is shown in bold and we will change the static specifier to change the style

static

The default positioning scheme is static, which simply positions elements as they appear in the normal document flow. The important point to remember about this style is that it ignores positioning specifications. So, if you set a position element like left, it will be ignored in static mode.

“But what became of the young lady?” I asked.

“Do you really want to know?” he said, buttoning himself in his fur coat carefully. “I confess to the small malice of sending her Sevrin’s diary. She went into retirement; then she went to Florence; then she went into retreat in a convent. I can’t tell where she will go next. What does it matter? Gestures! Gestures! Mere gestures of her class.”

In the static example above, the inner div section, which is dark gray, simply floats right. The text section, which comes afterward wraps around the floated div section. Also, the left and top specifications are ignored because of the static position specification.

relative

The relative position scheme acts like the static scheme, except that the element is moved after everything is positioned. We can think of it like this: All of the elements are placed according to the static rules. Then the relative element is moved from its static position by the amount specified by the position coordinates.

“But what became of the young lady?” I asked.

“Do you really want to know?” he said, buttoning himself in his fur coat carefully. “I confess to the small malice of sending her Sevrin’s diary. She went into retirement; then she went to Florence; then she went into retreat in a convent. I can’t tell where she will go next. What does it matter? Gestures! Gestures! Mere gestures of her class.”

In the relative example above, we see that everything is in the same place as it was, except that the element is move 10 pixels to the right and 20 pixels down. This happens because the left and top specifications are used to move it.

absolute

For the absolute specification, everything is first placed as though the positioned element does not exist. Then the positioned element, the dark gray rectangle, is positioned according to its containing element, the light gray rectangle.

“But what became of the young lady?” I asked.

“Do you really want to know?” he said, buttoning himself in his fur coat carefully. “I confess to the small malice of sending her Sevrin’s diary. She went into retirement; then she went to Florence; then she went into retreat in a convent. I can’t tell where she will go next. What does it matter? Gestures! Gestures! Mere gestures of her class.”

As we see in the example above, the absolute positioning means that no space is left for the floated div element and that that element is place 10 pixels to the right and 20 pixels down from the upper-left corner of the container because of the left and top specifications (Note that when the absolute positioned element is inside a static positioned div, as shown here, we need to nest an additional absolute positioned div inside the outer div. Otherwise, the position will be taken relative to an outer element–in this case, the whole browser window.).

fixed

The fixed specification works like the absolute specification in that everything is placed as though the positioned element did not exist. Then the positioned element is placed relative to the entire browser window. We did not show this example, because the behavior is too strange. The fixed element actually stays exactly where it is placed as you scroll up and down the page. It is very messy, and we will leave it to your imagination and simply say that the rectangle sits 10 pixels to the right and 20 pixels down from the corner of your browser window as you scroll.

« Older Entries
 

© 2007–2024 XoaX.net LLC. All rights reserved.