An example of a Cascading Style Sheet
Controlling the appearance of your own web pages
You may hear of references to style sheets (CSS) which can be used to
determine the effects of HTML commands such as headings, paragraphs and
tables. They are not complicated and there is plenty of help available on the
internet. Nevertheless, producing a working example can be time consuming and
involve a lot of trial and error.
This page is included to help those who wish to generate web pages from Excel
macros.
All of the pages in the MeadInKent site have been based on a single style sheet. You
may copy the following CSS program and choose whether you wish to modify any of the
features. A brief description of each element is given, but for detailed
instruction search elsewhere.
- body {font-family: Arial, Helvetica; font-size: 11pt;
text-align: Justify; margin-left: 20; margin-right: 20}
- A:link {color: blue}
- A:visited {color: purple}
- A:hover {color: red}
- A:active {color: teal}
- .MySubMenuBar {
- font-size: 9pt;
- word-spacing: 1;
- padding-left: 4;
- padding-right: 2;
- padding-top: 1;
- padding-bottom: 2;
- color: gray
- }
- .MyFooter {font-family: Arial; font-size: 8pt; font-variant:
small-caps; text-transform: uppercase; color: #008080; margin-top: 0}
- h1 {font-size: 18pt; font-weight: bold; margin-top: 8; margin-bottom:
8}
- h2 {font-size: 16pt; font-weight: bold; margin-top: 6; margin-bottom:
6}
- p {margin-top: 4; margin-bottom: 4}
- td {padding: 1pt 3pt 2pt 3pt; border-style: solid; border-width: 1}
- table {
- border-style: 'solid';
- border-width: '2';
- border-color: 'white';
- border-collapse: 'collapse';
- font-size: 11pt;
- text-align: 'Justify'
- }
- caption {font-size: 8pt; color: silver}
- table.grey {border-color: "silver"; color:
"maroon"}
- table.red {border-color: "maroon"}
- td.red {background-color: "maroon"; color: white;
border-color: "white"; font-weight: bold; text-align:
"center"}
- td.grey {background-color: "gray"; color: white;
border-color: "silver"; font-weight: bold; text-align:
"center"}
|
- The body section defines the basic format of a page.
- The A: items sets the colours for hyperlinks.
- The user defined class called '.MySubMenuBar' sets the characteristics
of the coloured bar below the three menu buttons. Note that they 'gray'
colour only appears on the vertical bars, the text all adopting hyperlink
colours.
- The '.MyFooter' class defines the blue text at the bottom of the page.
- H1 and H2 sets the colours, margins and sizes for the HTML header
commands.
- P sets the space before and after each paragraph.
- TD and Table sets the characteristics of table cells. Note that by
default these are set to white (i.e. invisible) but the settings ensure
that when border colours are applied everything appears properly.
- The caption settings affect the descriptive table captions.
- I have defined two alternative table settings called 'grey' and 'red'.
These work in conjunction with the previously defined table settings and
affect only the colours.
- The TD 'red' or 'grey' settings can be applied to individual cells to
give the appearance of inverse colours in header rows.
|
Heading one
Heading two
A normal paragraph
A hyperlink
| one |
two |
| three |
four |
A grey table
And another
To include a user defined class within a table, cell or paragraph,
simply edit the particular HTML command as follows: <Table class='red'> or
<TD class='grey'> or <p class='Mysubmenubar'> or <TR class='MySubMenubar'>.
To incorporate a style sheet in your web page, save a file (such as that
above) with a CSS suffix and add the following line to the header section of a
page: <link rel='stylesheet' type='text/css' href='your_css_filename.css'>
 |
A collection of free HTML, CSS, JavaScript, DHTML, XML, XHTML, WAP, ASP, SQL tutorials with lots of working examples and source code.
I have found this to be the most useful site for learning about anything
web-related. |
