MeadInKent
| Simple WebPages | Formatted WebPages |

An example of a Cascading Style Sheet

Controlling the appearance of your own web pages

Cascading style sheets (CSS) can be used to determine the appearance 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 involve some trial and error.

This page may help those who wish to generate web pages from Excel macros. The following VBA code can create an HTML page header which includes some CSS formatting instructions and classes.

print #1,"<head>"
print #1,"<meta content='en-gb' http-equiv='Content-Language' />"
print #1,"<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />"
print #1,"<title>MeadInKent website</title>"
print #1,"<style type='text/css'>"
print #1,".stylegrey {background-color: #EAEAEA;}"
print #1,".stylegreen1 {background-color: #ECFFEC;}
.stylegreen2 {background-color: #C7F1C7;}
.stylered1 {background-color: #FFF1EE;}
.stylered2 {background-color: #FFD3CA;}
body {font-family: Arial, Helvetica;font-size: 11pt; margin-left:40px; margin-right: 40px}
h1 {color: green; font-size: 14pt; font-weight: bold; margin-top: 8px; margin-bottom: 4px}
td {padding: 3pt 5pt 4pt 5pt; border-style: solid; border:1px solid white;}
table {border-collapse: collapse; font-size: 11pt; border: 2 solid white}
.MyFooter {font-size: 8pt; font-variant: small-caps; text-transform: uppercase; color: #0F5BB9; margin-top: -2px}"
print #1,"td.msblue {background-color: #3333ff;color: #ffffff;font-weight: bold;padding: 4px;}"
print #1,".styleborder {border-color: #000080;border-width: 2px;}"
print #1,"</style></head>"


The following items have had these CSS instructions applied.

Heading one

A default paragraph which is not defined in this particular set of CSS instructions.

The following table uses a CSS class to format the blue header cells: <class='msblue'>  The table itself uses the default <table> instructions.

msblue msblue
three four

The following example uses various CSS classes to format some of the cells. <td class='msblue'> The table itself uses a class to add a border: <table class='styleborder'>.

none none
stylered1 styleborder
stylered2 stylegreen1
stylegrey stylegreen2

The following paragraph has been given a CSS attribute in order to reduce its size and change its colour and case.

A page footer using <p class='myfooter'>


Web page coding 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.

file: helpusingcss.htm meadinkent.co.uk 2014 Last updated Aug14