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 WorksThe 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: 8ptNote 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: redThree Ways to Apply a Style SheetThe 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 PropertiesSo what are the CSS properties you can declare using the style attribute? Table 5.3 presents some of the most common CSS properties.
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. |
EAN: 2147483647
Pages: 101