Width and Height Styles

There are two general width and height style properties that can be used to size any page element. The width property gives the width of an element in pixels or as a percentage of the page width. The height property sets the element's height in pixels or as a percentage of page height.

Figure 3-21. Width and height properties and values.

In subsequent tutorials, these properties are applied to a wide assortment of page elements. For this initial introduction, widths and heights are applied to horizontal rules and graphic images to illustrate their use.

Rule Widths and Heights

As described previously, paragraph level content can be visually and thematically separated by displaying a horizontal rule between them. This is done with the <hr> tag to draw a line across the page.

The default rule is 2 pixels in height and spans the width of the browser window. You can change these dimensions by coding width and height styles for the <hr> tag. This sizing is shown by the following in-line style sheet and browser display.

<hr style="width:75%; height:7px; text-align:center;">

---

Figure 3-22. Styled horizontal rule.

When specifying widths of page elements, it is often preferable to code them as percentages. In this way, the widths always appear in correct proportion to other elements on the Web page regardless of whether the user adjusts the size of the browser window. If a horizontal rule is sized to less than the width of the browser window, then it also can be aligned with text-align:left, text-align:center, or text-align:right to position it horizontally on the line. In the previous example, the rule is 75% of the width of the page and is centered.

Normally all horizontal rules on a page will be of the same style. Therefore, it makes sense to code this styling in an embedded or linked style sheet so that it can be coded one time for application to all rules on the page or all rules on the site. The following code is an example of how horizontal rules can be standardized for a page with an embedded style sheet.

    <style>
        hr { height:1px; width:50%; text-align:center; }
    </style>

Listing 3-28. Code to style all horizontal rules on a page.

With this styling, all <hr> tags on the page produce rules that are 1 pixel in height, 50% of the width of the browser window (irrespective of the window size), and centered horizontally on the page.

Image Widths and Heights

It is often the case that graphic images are not the exact widths or heights needed to fit comfortably on your Web page. This is a recurring problem if you do not possess, or do not know how to use, imaging software to resize the image prior to placing it on the page. However, by applying width and height style properties to these images they can be resized on-the-fly when displayed in the browser.

The actual size of the image shown in Figure 3-23 is 162 x 108 pixels. When displayed on the page, its width is set to 100 pixels with an in-line style sheet.

    <img src="Stonehenge.jpg" alt="Picture of Stonehenge" style="width:100px;">

Listing 3-29. Code for dynamically resizing an image.

When resizing images, set either the width or height property, usually not both. The browser automatically adjusts the other dimension to maintain proper proportion. Of course, you can set both properties independently if you know their correct resized dimensions or if you wish to create special visual effects with disproportionate widths and heights.

Even though an image can be automatically resized when displayed in the browser, it still retains its original file size. An extremely large image still can take up considerable disk space and can cause delays in downloading prior to its display. Ideally, you should edit a large image to reduce its actual size to the dimensions of its page display rather than using width and height styling to reduce only its display size.

An image should not normally be displayed at larger dimensions than its original size. When increasing the size of an image you risk losing resolution and producing a fuzzy "pixelated" image.

Recall from a previous tutorial that the <img> tag has deprecated width and height attributes for resizing images. These attributes should be replaced by their comparable width and height style properties for concordance with HTML5 standards. Although their names are the same, the way in which attributes and styles are applied is different.

The width and height style settings can be applied to almost any HTML5 element by default, not just to <hr> and <img> tags as in the previous examples. In subsequent tutorials, there will be recurring occasion to resize other page elements to fit them with exact dimensions on the page.

TOP | NEXT: Basic Color Styles