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>


Here is the CSS file...


/* 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; }



And while we are at it here are some other useful links for HTML/CSS

example blank HTML pages

special HTML characters

CSS validator


click here to return to the blog