About Markup and CSS for the Web

Before making any radical changes to the code within your templates, you should have a good general understanding of the technologies you'll be working with. Many of you are already ace markup and CSS authors, but others have limited exposure to Web technologies. The next two sections provide a very general introduction—obviously, entire books are written about these individual technologies themselves. We'll give you enough information to be familiar with the code used in Movable Type so that you can modify it adequately and accurately.

HTML and XHTML

Any Movable Type template concerned with the direct expression of content to a browser uses XHTML (Extensible Hypertext Markup Language). Those of you with some exposure to Web languages may well be acquainted with HTML, but not XHTML. XHTML uses a series of tags and attributes to help describe the content. These tags and attributes include conventions such as enclosing paragraphs in a set of tags, opening paragraphs with a <p>, and closing with a </p>.

XHTML can be thought of as a combination of HTML and XML, the Extensible Markup Language. XHTML is very much like HTML in that XHTML uses the same vocabulary. For example, the <p> and </p> tags in XHTML are from HTML, so the markup itself is going to be pretty familiar to HTML users. But XHTML gets many of its stricter rules of syntax from XML.

To learn more about the differences between HTML and XHTML, see the article “Converting HTML to XHTML” at www.informit.com/content/index.asp? product_id={5F8C1795-CAE9-4998-B4F3-39CC67425992}. You can also check out the book Special Edition Using HTML and XHTML, from Que, which is a comprehensive guide to authoring in both languages and was written by Molly E. Holzschlag, coauthor of this book. See samples of that book's content at www.informit.com/content/index.asp? product_id={367E5F00-9BB6-4F04-AC85-95D3AE63F12D}. Two excellent starting points for XHTML and CSS are available at www.informit.com/isapi/guide~webdesign/seq_id~33/guide/content.asp and www.informit.com/isapi/guide~webdesign/seq_id~51/guide/content.asp.

Movable Type takes care to include the necessary portions of XHTML markup in all of its templates, so you need only worry about ensuring that the markup is kept intact, or modified responsibly. You'll learn a bit more about how to do that in Hour 12.

For now, take a look at Listing 11.1, which displays a code snippet from the default Movable Type Main Index template, to get an idea of some of the XHTML tags and attributes in use.

Listing 11.1. XHTML Tags in Template Code

							<div id="banner">
							<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
							<span class="description"><$MTBlogDescription$></span>
							</div>
						

If you study the markup in Listing 11.1, you'll see that all the highlighted tags are XHTML. Here, you're looking at the markup that generates the content for the top division of the weblog (the “banner”), providing a linked version of the weblog name as the primary heading (h1), and including the blog description beneath it (see Figure 11.1).

Figure 11.1. The banner portion of the Main default Index.

[View full size image]

Specifically, here's what the XHTML in Listing 11.1 means:

• <div id="banner"> . . . </div>. This is the division container that has an ID of banner. The ID identifies it as a unique division within the page and allows styles to hook into the element.

• <h1> . . . /h1>. Header level 1 signifies the most important header within a document. Typically, an h1 should only appear once.

• <a href="" accesskey="1"> . . . </a>. The a is the anchor element, which creates a hyperlink. The attribute href will have a value in this case of your weblog's URL. The accesskey attribute is an accessibility feature and allows people to get to the link with a single keystroke.

• <span class="description"> . . . </span>. The span element denotes a span of information and is often used to help apply style to that span. In this case, it's the description of your weblog. The class="description" attribute creates a hook for the styles that will define the description.

Contemporary Web design practices leave the styling of a Web page to Cascading Style Sheets (CSS) and the structuring of content to markup. Following this practice means that the colors, fonts, and layout are managed only with CSS, not with HTML or XHTML, which in some versions do contain tags to manage some aspects of presentation. The banner shown in Figure 11.1 uses CSS, not XHTML, to control the design aspects, including colors, fonts, and positioning. The XHTML is there to merely provide the structure, such as denoting the weblog name as the primary header (h1) and the link to the weblog itself.

The other tags are Movable Type template language tags and are fairly self-explanatory: The MTBlogURL tag, for example, pulls in the URL of your weblog from the weblog's configuration information that you set up many hours ago.

When you begin working with Movable Type template tags, it will be important to discern which portion of any given markup is XHTML and which is not.

Cascading Style Sheets (CSS)

CSS is a technology used to style documents written in HTML, XML, and XHTML. CSS uses different syntax than markup but is very approachable, although it is also quite complex. Fortunately, Movable Type is built with streamlined, intelligent CSS, so you don't have to be a CSS expert to get in and use CSS to make adjustments to the visual output of your site.

In Hour 10, you examined the complete style sheet for the Movable Type default style “Georgia Blue.” Listing 11.2 shows a snippet of that style sheet so that you can follow along with a bit of explanation as to how the style works.

Listing 11.2. A Predefined Style Sheet in Movable Type

#banner {
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        font-size:x-large;
        font-weight:normal;
        border-bottom:1px dotted #FFF;
        border-top:3px solid #99CCFF;
          background:#336699;
          padding:15px;
          text-transform:uppercase;
        letter-spacing: .2em;
        }

You'll notice that I've selected the primary styles that relate to the markup shown in Listing 11.1. Here, we can see how the styles for the banner directly hook into the XHTML. In turn, the Web browser then interprets the content and style to get the desired visual results.

Here's a closer look at the meaning of the selectors and properties in use in this CSS snippet:

• #banner. This is an ID selector. It hooks into the id="banner" code in the related XHTML and allows the CSS rule relating to this ID to be applied.

• font-family. This is a CSS property, which selects the font family style. Just like fonts in HTML, the font you use has to be available on the visitor's computer, so selections are limited, and several font names are often used in hierarchies, so that if the first named font isn't available, the second one will be. The convention is then to use the generic font family name as a catch-all to ensure that if the named fonts aren't found, one similar to it will be chosen for display instead. In this case, the value of the property is "Verdana, Arial, sans-serif".

• color. In CSS the color property refers to the foreground color. Colors in CSS can be represented in a variety of ways including hexadecimal value, hex shorthand (in use here), RGB values, RGB percentages, and valid color names. The value here is #FFF, which is white.

• font-size. This property allows for a number of values including actual sizing in pixels, or several descriptive values. Here, the font size is "x-large", which is suitable for a banner rather than body text.

• font-weight. A font's weight can be valued in CSS numerically or in descriptive terms. Here it's described as "normal", which means that it's not bold or light but a standard weight.

• border-bottom. CSS is great for a lot of reasons, and one of them is that you can control individual borders. Here, the bottom border is being given a value of 1 pixel, dotted style, with a color of white.

• border-top. This refers to the top border, which has a value of 3 pixels, solid style, and a hexadecimal value of #99CCFF, which is a light blue.

  The shorthand value for #99CCFF becomes #9CF. You can use shorthand values with CSS, but not with HTML.

  
  

• background. This is a shorthand property that controls background features. Here, the value is just a color, #336699, which is a medium dark blue. (Go ahead and guess its shorthand! You can find the answer in the Summary section later in this hour.)

• padding. This is a shorthand property that allows you to enter a value for padding around an element for all sides, which in this case calls for 15 pixels.

• text-transform. This property forces a specific case; in this instance, the value of the banner text will be uppercase.

• letter-spacing. The letter-spacing property allows you to control the space between individual letters within a font. Here, the value is .2em, or 2/10 the width of the letter M in that font.

Of course there's much, much more to CSS, but understanding these basic properties and their relationship to the XHTML markup in the content templates will help you get comfortable using CSS to modify your Movable Type templates.

To see all available CSS properties for CSS 2.0, take a look at www.w3.org/TR/REC-CSS2/propidx.html.