Bits & Bytes

Posts Tagged ‘block element’

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.

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.”