Managing Layout, Positioning, and Appearance - HTML 4

You can use CSS to lay out your pages so that images and blocks of text

  • Appear exactly where you want them to
  • Fit exactly within the amount of space that you want them to occupy

After you create the styles within a document, you can create an external style sheet that applies the same styles to any page you want.

Developing specific styles
Listing shows a Web page without any defined styles.

Listing : A Fairly Dull Page

<!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”>
<head>
<title>Pixel’s Page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
</head>
<body>
<h1>I’m Pixel the Cat. Welcome to my page.</h1>
<div class=”navbar”>
Links of interest:
<a href=”http://www.google.com/”>Google</a>
<a href=”http://www.amazon.com/”>Amazon</a>
<a href=”http://www.yahoo.com/”>Yahoo</a>
</div>
<img src=”/images/pixel1.jpg” alt=”The Cat” width=”320” height=”240”
id=”theCat” />
</body>
</html>

The cat looks great, but the page certainly doesn’t show off his possibilities. The addition of some styles improves the page immensely. Here’s how!

1. Visual layouts
Instead of the links appearing above the image, as they are in Figure, we want them on the left, a typical location for navigation tools. The following markup floats the text for the search site links to the left of the image:

<style type=”text/css”>
.navbar {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: left;
margin: 0 0 0 10px;
padding: 0 10px 0 10px;
width: 190px;
}
</style>

Figure : This styleless page doesn’t live up to this cat’s possibilities

This styleless page doesn’t live up to this cat’s possibilities

In the preceding rules, we

  • Added a <style> tag
  • Defined the navbar class inside the <style> tag
  • Used the navbar class to instruct the content to float to the left of images, which causes them to appear in the same part of the page on the left, rather than above the graphic

This rule says that anything on the page with a class of navbarshould display with

  • A light-gray background
  • A bottom and left thin grooved-line border in a darker gray
  • No top or right border
  • A block that floats to the left
  • A left margin of 10 pixels
  • Padding at top and bottom of 10 pixels each
  • A navbar area 190 total pixels wide

Figure : The navigation bar now looks more like the standard left-hand navigation

The navigation bar now looks more like the standard left-hand navigation

Note that several of the properties in the declaration, called shorthand properties, take multiple values, such as margin and padding. (They are known as shorthand properties because they collect values from multiple related CSS properties [like margin-height, margin-width, and so forth]. Those values correspond to settings for the top, right, bottom, and left edges of the navbar’s box. margin creates an empty zone around the box, and padding defines the space between the edges or borders of the box and the content within the box. Here are the rules that explain how to associate values with properties that deal with margins, borders, padding, and so forth:

  • If all the sides have the same value, a single value works.
  • If any side is different from the others, every side needs a separate value.

To remember what’s what, think of the edges of an element box in clockwise order, starting with the top edge: top, right, bottom, and then left.

2. Positioning
CSS provides several ways to specify exactly where on a page an element should appear. These controls use various kinds of positioning based on the relationships between an element’s box and its parent element’s box to help page designers put page elements where they want them to go. The kinds of properties involved are discussed in the following sections.

3. Location
You can control the horizontal and vertical location of an image. Instead of just being drawn automatically to the right of the navigation bar, you can put it down and to the left, as shown in Figure:

#theCat {position: absolute; top: 100px; left: 100px;}

You might be wondering why the navbar rule starts with a period, and the theCat rule starts with a pound symbol (also known as a hash mark or octothorpe). That’s because the period applies to a class attribute, butthe pound symbol applies to an id attribute. You could apply either a class or an id; the difference between the two is that a class can be used more than once, but an id must be unique for a page. You can’t have anything else on the page with an id of theCat. The difference, quite simply, is that a class lets you refer to some entire kind of element with a single reference, but an id can address only a single instance of an element.

Figure : The image is much more striking in this location

The image is much more striking in this location

4. Overlapping
Two objects can be assigned to the same position in a Web page. When that happens, the browser must decide the display order and which objects to show and which ones to hide.

The z-index, added to any rule, tells CSS how you want an object stacked over and under other objects the page knows about:

  • Lower numbers move down the stack.
  • Higher numbers move up the stack.
  • The default value for z-index is auto, which means it’s the same as for its parent element.

Giving theCat a z-index value of -1 automatically puts it behind everything else on the page for which the z-index isn’t set.

Figure : The cat’s peeking out from behind the navigation bar.

The cat’s peeking out from behind the navigation bar.

5. Fonts
You can make a page more interesting by replacing old boring default fonts. Start by specifying a generic body font as well as setting some other default rules such as background color and text color.

6. Body text
Here’s an example that sets the style for text within the body tag:

body {font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 12px; line-height: 16px; background-color: white;
color: black;}
Because the body element holds all content for any Web page, this affects everything on the page. The preceding rule instructs the browser to show all text that appears within the body element as follows:

  1. The text is rendered using one of the fonts listed. We placed Verdana at the head of the list because it is the preferred choice, and browsers check for available fonts in the order listed in the markup. (Note that a generic font, in this case sans-serif, almost always appears last in such lists because the browser can almost always supply such a font itself.)
  2. You can list more than one font. The browser uses the first font in your list that’s available in the browser. For example, the browser looks for fonts from our list in this order:

    • Verdana
    • Geneva
    • Arial
    • Helvetica
    • The browser’s default sans-serif font
  3. 12-pixel font size
  4. 16-pixel line height

The lines are spaced as though the fonts are 16 pixels high, so there’s more vertical space between lines.

Figure shows that

  • All the changes apply to the entire page, including the navigation bar.
  • The font-family changed in the h1 heading, but neither the fontsize nor line-height was changed.

Because headers have specific defaults for font-size and lineheight, another rule is needed to modify them.

The figure shows that the top of the header is slightly truncated. This is a bug in Internet Explorer for Windows that doesn’t occur in other browsers. Unfortunately, CSS rendering is unpredictable enough that you must test style rules in various browsers to see how they look and then tweak accordingly.

7. Headings
If we explicitly assign style properties to the h1 element, display results are more predictable. Here’s a sample set of styles:

h1 {font-family: “trebuchet ms”, verdana, geneva, arial, helvetica, sans-serif;
font-size: 24px; line-height: 26px;}

Figure : The fonts are nicer, but they could still use a little more work

The fonts are nicer, but they could still use a little more work

Figure shows a first-level heading using the font family and type size that we want: 24-pixel Trebuchet MS, with a 26-pixel line height. If we didn’t have the Trebuchet MS font on our system, the heading would appear in Verdana. When a font name includes spaces (like trebuchet ms or times new roman), the full name must be within quotation marks.

Figure : Declaring a rule for h1 makes it appear just how we want it.

Declaring a rule for h1 makes it appear just how we want it.

8. Hyperlinks
We think that having the hyperlinks underlined makes the menu look a little cluttered, so underlines are normally off. But we still want the hyperlinks to look like hyperlinks, so we tell CSS

  • Make links bold.
  • Make underlines appear when the cursor is over a link.
  • Show links in certain colors.

The following style rules define how a browser should display hyperlinks:

a {text-decoration: none; font-weight: bold}
a:link {color: blue}
a:visited {color: #93C}
a:hover {text-decoration: underline}

What’s going on here? Starting from the top, we’re setting two rules for the tag that apply to all links on the page:

  • The text-decoration declaration sets its value to none
  • This gets rid of the underlining for all the links.
  • The font-weight declaration has a value of bold.
  • This makes all the links on the page appear in bold.

The remaining rules in the preceding code are pseudo class selectors. Their most common usage is to modify how links appear in their different states. For more information on pseudo classes. Figure shows how the page appears when the previous style rules are applied.

Figure : The final version of our page.

The final version of our page.

Externalizing style sheets
When the final page is the way you want it, you’re ready to move the tested, approved internal style sheet into an external style sheet.

  • Every page of the site can use the whole style sheet with the addition of only one line of code to each page.
  • Changes can be made site-wide with one change in the external style sheet.

To create an external style sheet from a well-testing internal style sheet, follow these steps:

  • Copy all text that sits between the <style> and </style> tags.
  • Paste that text into its own document.
  • This text should include only CSS markup, without any HTML tags or markup.
  • Add a .css suffix to the document’s name (for example, myStyles.css
  • This shows at a glance that it’s a CSS file.

Here are two methods for linking an HTML file to an external style sheet:

  1. Use the <link> tag.
  2. All CSS-capable browsers understand the link tag.
  3. Use the <style> tag with the @import keyword.
  4. Only newer browsers understand the <style> and @import combination.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics