Cascading Style Sheets
Cascading style sheets give the structured information in the document its shape - how it looks and is formatted. They are very useful since the separate the form of the document from its content.
They are placed in the <head> of the document within <style> tags.
<style type="text/css">
html{margin:0 auto;max-width:33em}
body{font-family:Georgia,serif;padding:.75em 0 .5em .5em}
h1{font-size:115%;font-weight:normal;text-transform:uppercase;letter-spacing:0.18em}
h2{font-size:115%;font-weight:normal}
h3{font-size:110%;font-weight:normal}
h4{font-size:105%;font-weight:normal}
p{font-size:100%;line-height:1.5em}
a:link{color:#900;text-decoration:none}
a:visited {color:#900;text-decoration:none}
img{width:20%;height:auto;display:block}
.shapes{width:200%;height:auto;display:block}
</style>
The tags above are the ones seen most often. They are included in most web sites
The structure of a css entry starts with the element and then within curly brackets { } the properties are be specified for the element, like: margin, color and font-size.
Here are screen shots of the same content with two different style sheets – the first uses the font Georgia and the second, the font Verdana.
External and print style sheets
The style sheet can also an external file and linked to the html document like this: <link rel="stylesheet" type="text/css" href="foo.css" media="screen">
For material that will be printed as well as viewed online, you need to link a print style sheet in the <head> of the document. The link is like this: <link rel="stylesheet"type="text/css"href="print.css"media="print">.
A print style sheet will usually specify a smaller font size, about 75% of the default size, and does not include a maximum width.
For example: body{margin:0 auto;font-size:12px;}
Geometric shapes made with CSS3
Using CSS3, it is possible to make a variety of geometric shapes, like this triangle, square and circle.
