Learning on CSS - Part 4

Go back to Learning on CSS - Part 3

Learning on CSS - Part 4

Style text inside boxes

So far, we’ve mostly styled text inside of its container tags, like p or h2, by altering style characteristics. But you can also easily style the alignment, borders, and spacing of that text. To do so requires thinking of the text itself as being contained inside a ‘box’ (even if you can’t see the four edges of the box when the page is displayed in a browser).

Width and Height

Before you can style the individual aspects of text boxes, consider first setting the height and width so the browser knows how much space to set aside for the content being styled. Styling content boxes can become quite complex very quickly. To understand how to specify a box’s size, we must first take a look at how CSS handles text boxes. Unfortunately, certain browsers have their own interpretations of the standard text box. Thankfully, CSS3 gives us a way to make sure we start out on an even playing field. The box-sizing property is used to accomplish this task, and has two possible options:

• box-sizing: border-box; — height and width values include borders and padding
• box-sizing: content-box; — height and width values do not include borders or padding

After specifying which type of box sizing you’ll use, you can then reliably assign values for the height and
width of the text box.

 
Above provides a visual example of how the various box properties work together to style a box set to ‘border-box’, where the height and width values include border and padding.

 
Above shows how a box set to ‘border-box’ is assigned, where the width and height of the content box do not include the borders or padding. Margins are never included in the content box dimensions, but are added onto those dimensions when the browser renders the page.

Height and width values must include the unit of measurement, such as px (for pixels), cm (for cen-timetres), or % (for a percentage of the containing box). So, if you wanted to create a 150px by 200px content box, where those values did not include any borders or padding, here’s what the code might look like:

div#section1 {
                      box-sizing: content-box;
                      width: 150px;
                      height: 200px;
}

Alignment

Suppose you wanted to cause a paragraph to be aligned to its right edge, instead of the default left edge. The text-align property can help with that. The only trick is to remember you are aligning the text horizontally, within its container ‘box’. So if you placed a paragraph inside of a content division called ‘mainText,’ and that section of your site covered the entire width of your web page, the text would be aligned along the right edge of the page. But if the container area only covered half the web page, the text would still be aligned along the right edge of the container – which, in this case, means it would align to the middle of the page.

<div id=”mainText” style=”text-align:right; vertical-align:top;”>

The preceding code example had alignment properties for both the horizontal and vertical spaces in the mainText content division. Horizontal alignment options are left, right, center, and justify. When you use text-align:justify, you can also use the text-justify property to specify exactly how the text should be justified.

 
Above show lists the justification methods available. Common vertical alignment possibilities include top, bottom, middle, sub (as if the content was subscript), and super (as if the content was superscript). When specifying these alignment properties, keep in mind they are done so in relationship to the container box.

Space in and around the box

If you refer back to above, you can see there are two properties used to specify the amount of black space in and around content boxes. Padding constitutes the space around the content inside the box borders, while margins are the space outside of the box borders. Margin and padding values can be specified individually, as in margin-right, in groups, or all together. For example, here’s how we might style a box with five-pixel margins on the top and bottom, but eight-pixels on the left and right:

<p style=”margin: 5px 8px;”>

When specifying two values, the first one indicates the top and bottom, and the second value indicates the left and right. When assigning four unique values, they are coded in the following order: top, right, bottom, left, or clockwise beginning at the top.

<p style=”padding: 2px 4px 6px 8px;”>

Borders

Text boxes can also have border sizes, independent of the padding and margin sizes. The border property works in much the same fashion as the margin and padding properties, where you can specify the values individually, in groups, or all at once. In this example, there is a top and bottom border two-pixels wide, but no left or right border.

div#footer{ border: 2px 0px; }

You can also customize the color and format of the border, by adding a few additional options to your style sheet. In the following code snippet, we’ve created a special paragraph with a one-pixel, dashed blue border. (The padding is included to prevent the text from running up against the blue border.)

p.quote {
              border-width: 1px;
              border-color: blue;
              border-style: dashed;
              padding: 5px;
}

In addition to dashed, other border styles include dotted, solid, double, groove, ridge, inset, and outset. The latest CSS specification also finally gave us the ability to easily round the corners of box borders. To do so, use the border-radius property, like this:

p.quote {
               border-width: 1px;
               border-color: blue;
               border-style: dashed;
               padding: 5px;
               border-radius: 25px;
}

To recap, table below outlines the properties covered in this section.

Read Next - Learning on CSS - Sharing Resources