Links Lists Tables Page layout
CASCADING STYLE SHEETS - HOW TO USE.
Part 3 - Link, List and Table Properties
Style sheets allow much greater control over the appearance of web pages than was possible with HTML tags alone. Your Browser default settings govern the basic appearance of links, lists and tables. However, Style sheets give you much greater control over their appearance. This Guide uses only properties and values that are widely implemented by all Browsers, and only those that are most widely used.
LINKS
Link tags in an HTML document allow the reader to go easily and quickly to another website or to another page on the same website. The default values in most browsers are quite adequate, but by adding Style specifications you can personalize. See the example below:| This is the Style sheet section and body section of your HTML write-up: <html> <head> <title>Suggested link Styles</title> <style type="text/css"> a:link {color:navy;} /* unvisited link */ a:visited {color:#blue;} /* visited link */ a:hover {color:#white; background:#blue; text-decoration:none;} /* mouse over link, text-decoration:none eliminates underline */ */ a:active {color:#00ffff;} /* selected link. not essential */ </style> </head> <body> <p> <a href="consult.html" target="_blank">This is a link</a> The target="_blank" statement forces the linked page to open in a new screen, this is optional. NOTE: a:hover MUST come after a:link and a:visited in the CSS definition , and a:active MUST come after a:hover in the CSS definition in order to be effective. .</p> </body></html> |
This is the resulting web page:
This is a link |
LISTS
List tags in an HTML document enable the presentation of either a numbered or unnumbered list. The default values in most browsers are quite adequate, but by adding Style specifications you can personalize, both the appearance of the bullets and the method of numbering. A single property is used in the Style sheet list-style-type:xxxx The examples below show the most frequently used values, and a specific way of ussing the element class.
|
Example of Style list and HTML code <html> <head> <style type="text/css"> ul.b {list-style-type:circle;} /* this is a Class specification for Class b within the element ul */ ol.e {list-style-type:lower-latin;} </style> </head> <body> <ul class="b">Unordered list with circle markers. <<li>State</li> <li>County</li> </ul> <ol class="e">Ordered list with letter instead of numbers. <li>State</li> <li>County</li> </ol> </body></html> |
What the example on left looks like in your browser
|
|
List of all List property values from www.w3schools.com . |
TABLES
Tables are most useful for presenting a set of data. In HTML the appearance of each cell, if not default, has to be specified separately. This requires many lines of additional coding. Style sheets make this chore much easier and simpler.
The first table on this page used the following Style specifications:
.table3
{
color: navy;
background-color : #fffccc;
font-size : 12px;
font-family : arial, sans-serif;
border: 1px solid gray;
border-collapse: collapse; /* necessary if you only want single line borders */
}
.table3 td
{ border: 1px solid gray;
padding:2px;
text-align:left;
}
In the Body section, the table specification started with:
<table class="table3" width="650px"><tr><td width="50%">
NOTE: The Table width was specified 650 pixels, if this was left blank, the table would have adjusted its width to fill the available space. The width of the first cell (and also of the second cell) was set at 50%. This was essential to ensure that the two cells are of equal width. If there were more rows in the table, the cell width in the subsequent rows would automatically be the same as in the first row, it is not necessary to specify width in each row.
In the second table the cell widths were set at 25% so that all four cells in the row are the same width.
Here is another example of a table this time with a header and double borders:
| This is the Style sheet section and body section of the HTML write-up of the Table: <html> <head> <style type="text/css"> #table1 { border:1px solid black; color: navy; background-color : #ffffcc; font-size : 12px; font-family : arial, sans-serif; } #table1 th, #table1 td { border-width: 2px; padding: 3px; border-style: solid; border-color: #666666; text-align:center; } #table1 th { background-color : green; /* color of table header */ font: bold; } </style></head> <body> <table id="table1" table width="400"> <tr><th width="25%">Tunnel</th><th width="25%">Country</th><th width="25%">Type</th><th width="25%">Length</th></tr> <tr><td>Seikan Straight<td>Japan><Railway</td><td>53.8km, 33.5mi</td></tr> <tr><td>Channel</td><td>Uk-France</td><td>>Railway</td><td>50.4km, 31.3mi</td></tr> </table> | This is the actual table, which lists the longest tunnels in the world.
|
LAYOUT OF PAGE
In the article Page design, it was explained how you can design pages using Table tags. Before 2010, all pages on this website were designed that way.
The Standards Organization W3C deprecates this method and recommends that Style sheets should be used for this purpose. Unfortunately, many older Browsers, including Microsoft Internet Explorer up to v.8 (2010) do not correctly interpret all Styles. This writer spent a year testing many proposed solutions to the problem and found that Matthew James Taylor designed the most reliable solution. All present biega.com pages are based on his
Holy Grail Liquid-Layout. However, the subject is too complex to discuss here.
A sample page design with incorporated Style Sheet may be downloaded to your computer. Use this to experiment and test your knowledge. Download this file (csstest2.html) from the Internet to your computer and follow the instructions included with it.