Applying Advanced Formatting with Cascading Style Sheets

The HTML standard is continually evolving, and in fact has evolved far beyond simple <b> and <p> tags. One of the newer extensions to the HTML language is called extensible HTML or XHTML . What's cool about XHTML is that it uses something called cascading style sheets , or CSS, to more fully describe the appearance of web pages. And, not surprisingly, you can use CSS code to create your eBay item listingswithin certain limits.

How CSS Works

The way CSS works is to universally define the look of specific elements on a page, so that whenever you use an element (such as an <h1> tag), the predefined attributes are applied. When you define a page element with CSS, that definition overrides the default page settings in the user 's web browser. By using CSS, you don't have to apply the <font> tag and its associated attributes every time you want to format text on the page; just apply a predefined CSS element, instead.

Attributes are defined in CSS by means of a rule . Each rule includes the name of the attribute followed by a property and the value for that property.

For example, you might want to define an attribute so that all paragraph text consists of 8 point type. The rule for that attribute would be as follows :


font-size: 8pt

Note how the value for each property follows a colon (:). You can put a space between the colon and the value, as I've done here, or close up the space; either approach is allowed. Once you define the attribute in this fashion, all text enclosed within the attribute containers will be 8 point type.

Note

The properties and values assigned to an attribute are called the declaration .

You can also declare multiple properties within a single rule. Just make sure you separate each property with a semicolon (;). For example, to define an attribute as both 8 point and red, you use this code:


font-size: 8pt; color: red

Three Ways to Apply a Style Sheet

The CSS standard defines three different ways to apply a cascading style sheet, only one of which can be used in your eBay listings. That's because one of the methods uses the <head> of the HTML document (which eBay won't let you do), and a second references a separate style sheet file (which eBay also won't let you do).

The method of defining a style sheet within the <head > of an HTML page uses what is called a global or embedded style sheet . With this approach, all the attribute declarations are placed in the <head> of the document, within <style> and </style> container tags. If you remember, the <style> tag is one of those tags that is prohibited by eBay; this is why. So using an embedded style sheet is out of the question.

Note

Some sellers like to employ the <style> tag to universally change the attributes on the entire eBay listing page. While this technically will work, if eBay catches you they'll cancel your listingand possibly bring disciplinary action against your account.

Also out of the question is using a linked style sheet . This approach requires the creation of a separate .CSS file that contains all the attributes and declarations, and is called from within the main HTML page by the <link> tag. Once again, sharp-eyed readers will recall that the <link> tag is banned by eBay, because it refers to a page (actually, the .CSS file) that is stored outside the eBay system. So you can't used linked style sheets.

This leaves us with the final, not quite so versatile method of defining styles that employs local or inline style sheet declarations. These inline declarations apply only to specific text on the page, and are used in place of <font> tags to specify font size, color, and so on.

You create an inline style sheet declaration by using the style attribute within any attribute tag, such as the <p>, <h1> , and <img> tags. The declarations are treated as attribute values, and placed within master quotation marks.

For example, let's say you want to format an <h1> heading with centered alignment. You could simply surround the heading with <center> and </center> tags, or you could use the following CSS code:


<h1 style="text-align: center">


This is the centered heading</h1>

All text within the <h1> and </h1> container tags would thus be centered on the page.

You can, of course, gang multiple CSS rules together in a single style attribute. Suppose that you wanted to format a particular paragraph with green 12-point boldface Arial type. Here's how you'd do it with CSS:


<p style="font-size: 12pt; color: green; font-weight: bold;


font-family: Arial">This is the text to format.</p>

Note that each declaration includes a separate "property: value" combination, and that the declarations are separated by semicolons.

CSS Properties

So what are the CSS properties you can declare using the style attribute? Table 5.3 presents some of the most common CSS properties.

Table 5.3. CSS Properties

Property	Description
background-color	Specifies a color for the background of a page or page element
background-image	Specifies an image file used for the background of a page or page element
border-color	Sets the color of a border
border-style	Sets the style of a border, from the following list: `none` , `hidden` , `dotted` , `dashed` , `solid` , `double` , `groove` , `ridge` , `inset` , and `outset`
border-width	Sets the width of a border, as either `thin` , `medium` , or `thick` ; can also be used to set a precise width, in pixels
color	Specifies the color of selected text
font-family	Specifies the type face
font-size	Specifies the type size, in points
font-style	Sets the style of a font, as either `normal, italic` , or `oblique`
font-weight	Sets the weight of a font, as either `normal, bold, bolder` , or `lighter`
height	Specifies the height of an element
margin-bottom	Sets the bottom margin of an element, in pixels or as a percentage
margin-left	Sets the left margin of an element, in pixels or as a percentage
margin-right	Sets the right margin of an element, in pixels or as a percentage
margin-top	Sets the top margin of an element, in pixels or as a percentage
padding-bottom	Sets the bottom padding of an element, in pixels or as a percentage
padding-left	Sets the left padding of an element, in pixels or as a percentage
padding-right	Sets the right padding of an element, in pixels or as a percentage
padding-top	Sets the top padding of an element, in pixels or as a percentage
text-align	Specifies the alignment of selected text: `left, right, center` , or `justify`
text-decoration	Adds the following decoration to selected text: `none, underline, overline, line-through` , or `blinking`
text-indent	Specifies how much the first line of a paragraph is indented, in pixels or as a percentage
text-transform	Used to control the case of selected text: `none, capitalize, uppercase` , or `lowercase`
width	Specifies the width of an element

These are just a few of the many CSS properties that you can employ when creating HTML auction templatesbut they're enough to do pretty much all we'll need to do. We'll discuss any additional properties that come up throughout the book if and when they arise.

Note

Want to learn more about CSS? Then check out Sams Teach Yourself HTML and CSS in 24 Hours, 7th Edition by Dick Oliver and Michael Morrison (Sams, 2005), available wherever computer books are sold.

Why Use CSS Instead of Straight HTML?

Given the limitations that eBay forces on the use of CSS (inline only), what advantages are there to using CSS over traditional HTML tags?

Well, in many instances, there is no benefit. If all you're doing is changing font size or color, you might as well use the old-fashioned <font> tag instead of the CSS style attribute approach. That's why a lot of the template code you'll find in this book is basic HTML, nothing fancy.

That said, CSS does allow some more sophisticated formatting that you can't do with straight HTML. For example, with CSS you can define the margin-left property, which helps to distance text from the left margin. You can't do this with the <font> tag, and it's useful for positioning text on the page. As another example, CSS lets you define specific font size in points, where you only get relative sizing with the size attribute in the <font> tag. Again, if you need a more precise design, CSS is the way to go.