Cascading Style Sheet (CSS) Tutorial
CSS are a way of using 'styles' to seperate formatting from content.
- CSS has more formatting options than HTML alone.
- Its possible to change the 'look and feel' of an entire web page (or website)
just by editing a CSS 'style' in one place, rather than by changing dozens of
individual font tags.
- HTML pages are 'content only', making them much simpler.
- CSS mimics the paragraph 'styles' in word processors, e.g. MS Word.
- It is possible to dynamically change styles within a webpage by using Javascript together with CSS, e.g. to change text colour when the mouse is moved over it. This is called DHTML (or Dynamic HTML).
Change the default formatting of HTML tags
This changes the formatting of the HTML h1, h2, h3, and strong elements, e.g. the headings on this page.
<style>
<!--
h1, h2, h3, strong { color: #005A9C;}
//-->
</style>
Change the formatting of table cells
If the name of the format starts with a "dot", then it defines a class name.Almost any tag can take a class name, e.g. <TR CLASS="odd">
<style>
<!--
.even {background: cyan; font-weight:bold; }
.odd {background: pink; font-weight:bold; }
.food {background: powderblue; font-weight:bold; }
//-->
</style>
<table cellspacing=5>
<tr class=odd>
<td width=100> odd
<td width=100> odd
<tr class=even>
<td> even
<td> even
<tr class=odd>
<td> odd
<td class=food> food
</table>
| odd | odd |
| even | even |
| odd | food |
Change the formatting of hypertext links
This changes all "default" links, and sets up a class called fred, so just certain links can be changed.
<style>
<!--
a:visited { color : green; text-decoration : none; }
a:hover { color : red; text-decoration : underline; }
a { color : green; text-decoration : none; }
a.fred:visited { text-decoration : none; color: blue; }
a.fred:hover { text-decoration : underline; color: green; }
a.fred { text-decoration : none; color: blue; }
//-->
</style>
<a href="#">this is a link</a>
and
<a class=fred href="#">this is a class fred link</a>
this is a link
and
this is a class fred link
More Complex Formatting.
Style sheet have more complex formatting options than standard HTML.In this example, the background colour, a border (the black box), margin (the top, right, bottom, and left gap around the outside of the box) and padding (the gap around the inside the box) are set.
<style>
<!--
pre {
padding: 5 5 5 5 ;
border: solid 1px;
margin: 0 20 10 20;
background: ccffcc;}
//-->
</style>
<div class=lastminute> this is how this green box was made <div>
Using 'Mouse Over' Events to Change the Colour of Table Cells
Or CSS, Dynamic HTML (DHTML) and Javascript.Most HTML tags can have 'events' associated with them, e.g. OnMouseOver
Note, with the HTML below, the javascript is case sensitive, so its "this.className"
<style>
<!--
.over {background: #dddddd; font-weight:bold; }
.out {background: #eeeeee; font-weight:bold; }
.light {background: #eeeeee;}
//-->
</style>
<table>
<tr>
<td class=out
onMouseOver="this.className='over'"
onmouseout="this.className='out'">
Move your mouse over this cell for the colour to change
</table>
| Move your mouse over this cell for the colour to change |
Using 'Mouse Over' Events to Hide and un-Hide Text
An example use of this is to click on a language flag, and display text in that language
<table> <tr> <td> <span onmouseover="english.style.display='inline'; french.style.display='none'"> <strong>Move your mouse here for English... </strong></span> <td> <span onmouseover="english.style.display='none'; french.style.display='inline'"> <strong>or here for French.</strong></span> </table> <div id=english> This text could be in <b>English</b> </div> <div id=french style="display:'none'"> Some French text could go here.<p> </div>
| Move your mouse here for English... | or here for French. |
This text could be in English
Some French text could go here.
Where to put CSS Style Sheets
There are 3 places to put style sheet information:- 'inline style sheets' (not recommended, but very useful),
- in the HEAD section of an HTML page (which Google do) - best for program generated
(and server side include) web pages
- in a seperate CSS document, e.g. 'styles.css' - best for static web pages. This has
2 great advantages. First, all your style information is stored in only one places,
so all your pages have the same style. Second, you can change the style of your
entire website just by editing one file, not every single one of them.
<p style="color:red;">1. This is an inline style</p>
<HEAD>
...
<!-- 2. example of styles stored in the head section of a webpage -->
<style>
strong { color: #005A9C;}
</style>
...
</HEAD>
<!-- 3. in a seperate document -->
<!-- this goes in the HEAD section -->
<!-- then put everything between the style tags in a seperate file called -->
<!-- my_styles.css (or any other name you choose) -->
<HEAD>
...
<link href="my_styles.css" rel="stylesheet" type="text/css">
...
</HEAD>
1. This is an inline style
2. and this is the colour of the strong tag, try VIEW>SOURCE to see how its done.Don't Re-invent the Wheel, Copy !!
If you see a great website, or nicely displayed text, just do VIEW SOURCE to see how its done.You may have to check for a seperate style sheet in the HEAD section of the web page, just enter it into the ADDRESS bar to get hold of it, e.g. http://www.somewhere.com/styles.css
CSS Quick Reference
| Hint | Example | Comments |
| Quoting |
h1 {color:'red'} h1 {color:red} |
wrong, should not be quoted correct |
| Comments | /* this is a comment */ | |
| Grouping | h1, h2, h3, b {color:red} | |
| Font Sizes |
H1 { margin: 0.5em } H1 { margin: 1ex } P { font-size: 12px } |
em means 'relative to font size', so this margin would be 50% of it ex means 'relative to height of a lowercase x', so this would be the same as this px means pixels |
| Wildcards |
* {color: green} *.fred {color: green} |
All the default tags (h1, h2, p, td, etc.) are green All the tags in class fred are green |
Introduction