Applying Advanced Formatting with Cascading Style Sheets
The HTML standard is continually evolving, and in fact has evolved far beyond simple
tags. One of the
How CSS Works
The way CSS works is to
Attributes are defined in CSS by means of a
. Each rule includes the
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
Note how the value for each property follows a colon (:). You can put a space between the
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
The method of defining a style sheet within the
> of an HTML page uses what is called a
embedded style sheet
. With this approach, all the attribute declarations are placed in the
of the document, within
container tags. If you remember, the
tag is one of those tags that is
Some sellers like to
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.
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.
So what are the CSS properties you can declare using the
attribute? Table 5.3
Table 5.3. 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.
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.
eBay Timesaving Techniques for Dummies
The eBay Seller's Tax and Legal Answer Book: Everything You Need to Know to Keep the Government Off Your Back and Out of Your Wallet
Starting an eBay Business For Dummies
Three Weeks to eBay Profits, Revised Edition: Go from Beginner to Successful Seller in Less than a Month (Three Weeks to Ebay Profits: Go from Beginner to Successful)