Advanced Activities

 « Previous 1 2 2b 2c 3 4 Next »

Styles and their HTML equivalents

"Styles" change the way your HTML tags work, much the same way as attributes do, but they do it differently. Here, we will show only a very few styles, enough to get you started becoming familiar with how styles work.

You may hear the term "Cascading Style Sheets." The "Cascade" refers to the way all of the factors which control the display of your page "cascade" like a waterfall in lots of small steps, each one contributing something to what you end up seeing. Your computer, your browser, your personal preferences, the HTML and its attributes, each affect the final outcome. Cascading Style Sheets try to help designers gain some control over these factors, usually from a central point (the "stylesheet") so the effort can be minimized.

There are three ways to apply styles to HTML pages, only one of which applies to the pages you are making on your ABWholesaler.com site, but it may help to know these other ways exist.

  1. Not applicable: External Stylesheet linked from the <head> section of your page. Your ABWholesaler web site is already linked to a stylesheet that controls font styles, sizes and colors, but it cannot be altered from within the ABWholesaler.com interface.
  2. Not applicable: Internal Styles - These go in the <head> section of your page, but again, they cannot be altered from within the ABWholesaler.com interface.
  3. Inline Styles, which you can put inside your HTML tags. This is what is explained on this page.

If you are interested, there are many good tutorials available on the web that can teach you more about styles. We've tried to give you examples you can actually use, and you should feel free to experiment.

Here is a chart which gives you an HTML tag with an attribute, then shows how you might use styles to achieve the same or similar effect.

HTML Version: Using Inline Styles:
<font size="1">

<p style="font-size: xx-small;"> </p>*

(You can also apply a font style to <td>, <span>, <a> <H1> etc. Also, you can put more than one style inside a tag - just be sure they're separated by a semicolon, for example: <a href="#" style="font-size: xx-small;color: #FF0000;">)
<font size="2"> <p style="font-size: x-small;"></p>*
<font size="3"> <p style="font-size: small;"></p>*
<font size="4"> <p style="font-size: medium;"> </p>*
<font size="5"> <p style="font-size: large;"></p>*
<font color="#FF0000"> <p style="color: #FF0000;"></p>*

*Be sure you close your <p> tags if you use them. Otherwise, your style will continue to apply. We mention this because there are some older tutorials which teach you to use a <p> tag as a line break. You should consider <p></p> a "paragraph container" instead, using <p> at the beginning of a paragraph, and </p> at the end.
no equivalent <a href=" " style="text-decoration: none;"> Creates links which are not underlined.
<table border="1"> This sets a border of 2 pixels around every cell. <table style="border: solid #000000 1px;"> This sets a 1 pixel border around the whole table.
no equivalent <td style="border: solid #000000 1px;"> This sets a single pixel border around a single cell.
« Back to HTML Attributes On to Add a Photo Gallery »