Bits & Bytes

Posts Tagged ‘cascading style sheets’

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>

Handling Overflow in HTML Block Elements with CSS

The overflow property is used to specify how a block element handles content that is too large to fit inside it. There are five possible values for the overflow: visible, hidden, scroll, auto, and inherit. Inherit specifies that the element is to have the same value as the element it is contained in. The other values are explained and demonstrated below.

The code for the first example is shown here with the overflow specification in bold:


<div style="background-color:#DDDDDD; width:300px; height:160px; padding:10px; border:5px solid #444444; margin:30px; overflow:visible;">

<p style="width:300px;">(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."</p>

</div>

visible

The value visible is the default that is used when no value is specified, and it means that all of the content is displayed whether or not it fits inside the element. As shown below, this can look sloppy if you are not careful.

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”

hidden

Using the value hidden, fixes the problem of the sloppy look and it forces all of the content outside the element to be clipped. Unfortunately, this can make some of the content unreadable.

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”

scroll

Setting the overflow value to scroll, forces the element to add scroll bars that allow the user to scroll through all of the content. This makes it possible for the user to see all of the content even if it does not fit inside the element. Unfortunately, the scroll bars are displayed whether we need them or not. Notice that the horizontal scroll is not needed in this example. However, the horizontal scroll bar is still there taking up space.

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”

auto

The final setting, auto, adds scroll bars only when and where they are needed. On the left, we have an element that has been stretched so that it can fit all of the content without needing scroll bars. On the right, we have a shorter block that requires only a vertical scroll bar. Both of these are specified as auto.

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”