SYSK 185: CSS as a Replacement of Tables? Yes!
Did you know that you can design complex web pages without a single table by using cascading style sheets? Generally, this type of design results in smaller (as measured in downloaded bytes) pages, and (arguably as, if not more, importantly) pages that are easier to understand and maintain because it allows for a clear separation of content and formatting.
But first, one must understand CSS selectors, which is the topic of this post.
There are four kinds of CSS selectors:
- Tag selectors – the defined formatting applies to elements with matching type; e.g. div { … } will apply to all <div>…</div> elements
- Class selectors – formatting applies to all elements that use that class name; e.g. .redText { color: red; } will apply to all elements that have matching class attribute as in <div class=”redText”>Hello World!</div> .Note: you can specify multiple class names separated by space, e.g. <div class=”contents evenrow value”>123</div>
- Id selectors – formatting applies to a specific element with that id; e.g. #PageHeader { … } will apply to an element with id PageHeader as in <div id=”PageHeader”>XYZ</div>
Note: HTML elements on the page must have unique ids.
- Composite selectors – a combination of the above. Note: the order in which the tags appear will match the html element flow. For example,
#PageHeader .redText span
{
color: blue;
}
will apply blue color formatting whenever a span element is found as an inner element of another element with class=”.redText”, which, in turn, is an inner element of an element with id=”PageHeader”
Here is an example:
<style type="text/css">
#PageHeader { font-size: 20px; }
.redText { color: red; }
#PageHeader .redText span { color: blue; }
</style>
<div id="PageHeader">
<p class="redText">
<span>Blue Text</span>
Red Text
</p>
<span>Guess what color :)</span>
</div>
Other text
results in:
Blue Text Red Text
Guess what color :)
Other text
Another common variation of a composite selector is:
#SomeID div.myclass
which applies to all DIVs of class=”myclass” that are inner elements of an element with id=”SomeID”
Finally, you can apply the styling based on a behavioral attribute, e.g.
#SomeID a:hover
results in applying the rule to all links inside the element of id=”SomeID” but only when the mouse is hovering over.
So, check this out… The following CSS/HTML produces the result below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Demo</title>
<style type="text/css">
#LeftSideBar
{
width: 200px;
border: 1px maroon solid;
border-bottom: 0px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
}
#LeftSideBar div.header
{
background: maroon;
color: white;
font-size: 110%;
font-weight: bold;
padding: 2px 0;
text-align: center;
}
#LeftSideBar div.contents
{
background-color: #FFD9D9;
}
#LeftSideBar a
{
display:block; /* turn an inline link element into a block element, so the entire area is clickable */
color: #0C0C0C;
font-size: 80%;
padding: 3px 3px 3px 5px;
border-bottom: 1px maroon solid;
text-decoration: none;
}
#LeftSideBar a:hover /* invert the back-color and fore-color when mouse is hovering over */
{
background-color: #C0C0C0;
color: white;
font-weight: bolder;
}
#LeftSideBar a.selected
{
border-right: 8px maroon solid;
}
#LeftSideBar a.selected:hover
{
color: #0C0C0C;
background-color: #FFD9D9;
}
</style>
</head>
<body>
<div id="LeftSideBar">
<div class="header">Possible Options</div>
<div class="contents">
<a href="HTMLPage.htm">Option 1</a>
<a href="HTMLPage.htm">Option 2</a>
<a href="HTMLPage.htm">Option 3</a>
<a href="HTMLPage.htm" class="selected">Option 4</a>
<a href="HTMLPage.htm">Option 5</a>
</div>
</div>
</body>
</html>
Stay tuned for tomorrow’s post for more on using CSS instead of tables.
Special thanks to Erik Saltwell who introduced me to the better way of designing web pages by using CSS instead of tables.