11 Aug 2009
Tims aide memoire for CSS.....
Every time I return to CSS I seem to struggle to get the syntax in my head so I thought I'd make a little example page of the major construction types.
The output of the following HTML/CSS examples/both HTML and CSS are validated as ok by the validator
Here is the HTML File...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tim's Example Page of CSS declarations</title>
<link type="text/css" rel="stylesheet" href="examples.css" />
</head>
<body>
<h5>Tim's example page</h5>
<p>Hello World</p>
<h1>I am heading 1</h1>
<h2>I am heading 2</h2>
<table>
<tr><th>column1</th><th>column2</th></tr>
<tr><td>no para</td><td><p>para</p></td></tr>
</table>
<h3>I am heading 3</h3>
<h4>I am heading 4</h4>
<p id="onlyoneid">There is only one use of this selector</p>
<p class="multipleuses">There can be lots of use of classes</p>
<h1 class="multipleuses">like this</h1>
</body>
</html>
/* define all text as black */
body { color: black; }
/* define all the <p> tag entries as red */
p { color: red; }
/* define all h1 and h2 tag entries as green */
h1, h2 {color: green; }
/* define all paragraphs in table data elements as blue [a contextual selector]*/
td p {color: blue; }
/* define all h3 and h4 entries as grey and italic [known as grouping selectors]*/
h3, h4 {color: gray; font-style: italic;}
/* define h4 as bold too - show that multiple css statements can refer to one tag type*/
h4 { text-decoration: underline; }
/* define id selector onlyoneid - ids only used once so that javascript and others can locate the exact point in the page */
#onlyoneid { color: yellow; }
/* define class multipleuses which can be used wherever you like */
.multipleuses { text-decoration: underline; }