Bits & Bytes

Posts Tagged ‘style’

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

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.

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.

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.

The CSS Box Model

The CSS box model has four regions: the content region, the padding region, the border region, and the margin region. These regions can cause some confusion when coding CSS, so we have created some examples below for illustration. We start with the basic content region, which we can resize by setting the width and height parameter values. Then we add a border to the the content. Next, we put padding around the content area to separate it from the border. Finally, we add a margin to separate this content box from elements on the page via whitespace. Additionally, we add scroll bars to show what happens when the content does not fit within the content region.

Each web page is made elements that can exist within CSS boxes. Oftentimes the content that goes into these boxes, like images, has a set width and height. With text, we typically set the width and the height is determined by the amount of text in the box. However, we can set the width and height directly, and this will resize an image or set the bounds of the text area and so that we need to adjust scroll bars to see all of the text. When we set the width and height of the content region, we have to keep in mind the size of the overall box on the page.

width = 200 pixels
height = 100 pixels

To the left, we have a simple red box with black text that describes the width and height of the box, which we set with the style rules width: 200px; height: 100px;. The content region has no background color by default, but we set the color shown here by setting the background to red, using background-color: #FF0000. This box is simply the content region, which often holds text, like this one does, or an image. When the width and height properties are set like this, the values only apply to the content region and not the surrounding regions, as we will show. So, we have to keep that in mind when considering layout. None of the other regions are present in this example.

width = 200 pixels
height = 100 pixels

Some text that extends outside the box horizontally.

More text
More text
More text
More text

Sometimes the content extends beyond the bounds of the content region. For example, we might have more text than what will fit in the content box. When this is the case, the text will wrap at the specified width and extend outside of the box below it. Generally, we will want to keep the text inside of the content area and add scroll bars to allow the content to be viewed within the content region only. This can be accomplished by styling via an overflow rule, which can be set to always have scroll bars like this: overflow: scroll;. To the left, we have our original content region with some added content and scroll bars to allow all of the text to be read. Notice that the scroll bars are placed inside of the content region and take up some of the space there; they do not expand the width and height of the box.

width = 200 pixels
height = 100 pixels
border = 10 pixels

To give our content a more pleasing appearance, we can add a border to it. Borders can have many styles and serve as a frame for the content much as a picture frame on a picture. Border styles include: solid, dotted, dashed, and several others; we can also change the border’s color as well. To the left, we have added a dark gray border that is 10 pixels wide, using the style rule border: 10px solid #444444;. A typical border is usually much thinner than this, but we have made this one wide for greater visibility. Notice that in this case, the border does not use up content area like the scroll bars do, but it does add to the width and height of the overall box. So, the overall box width and height have the width and height of the content region plus the border: overall width = 220 pixels, overall height 120 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels

Notice that the text inside the box above touches the border. This looks cluttered and makes the content more difficult to read. To make the content more pleasant looking and provide some much needed whitespace, we can use the padding region. To the left, we have set the padding to a width of 20 pixels on each side, using the style rule padding: 20px;. This helps to empasize the content by separating it from the border in much the same way that a matte does in a picture frame. Notice that the padding region is not visible. That is, it is is the same color as the background of the content area. In fact, we can consider the background region to be made up of the content region and the padding region. Also, notice that the padding region adds to the overall width and height of the box, so now we have: overall width = 260 pixels, overall height 160 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Finally, we remark that the text outside of the box tends bump up against the border and give the layout a sloppy appearence. To fix this, we can add margins to the box to separate the border from the outside content. To the left, we have the same box as last time, except that we have added a 30 pixel margin on each side of the box, using the style rule margin: 30px. The margin region is not visible. It looks just like the surrounding area with the same backgound color. So, the margin merely serves as a spacing for the content to separate it from outside content. Again, this adds whitespace to our content box, which helps it to stand out and look less cluttered. Again, the margin adds to the size of the entire box for the element so that now we have: overall width = 320 pixels, overall height 220 pixels.

width = 200 pixels
height = 100 pixels
padding = 20 pixels
border = 10 pixels
margin = 30 pixels

Unfortunately in the previous box, we were not able to clearly see the content region, the padding region, and the margin region. That is because they share background colors with adjacent regions. To help clarify where these regions are, we have colored the content region and the margin region. To the left, we have the margin region that is 30 pixels wide on the outside in black. Inside this region, we have the border region that is 10 pixels wide in dark gray. Just inside of the border, we have the padding region which 20 pixels wide and is red, as it was before. Finally, in the middle, we have the content region, which has been changed to light gray. Notice that we have added the scroll bars again to illustrate that they appear in the content region. This box is the same size as the previous one. It is merely colored differently for illustration.

Notice that each of our content boxes were the same size 200 pixels by 100 pixels. However, the size of the entire box has expanded as we added the padding region, the border region, and the margin region. CSS offers finer control than what we have used, and we can set the width of the padding, border, and margin regions for each side individually. Given that, we can give the formulas for the width and height of the entire box as

overall width = width + (right and left padding)

+ (right and left border)

+ (right and left margin)

overall height = height + (top and bottom padding)

+ (top and bottom border)

+ (top and bottom margin)

Categories

Recent Posts