Introduction to XML

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Exercise: Introduction to Cascading Style Sheets (CSS)

CSS - Cascading Style Sheets language

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents
designed for HTML in 1996
CSS1 (1996), CSS2 (current), CSS3 (working drafts)
CSS1 IE5 and IE6
CSS2 Netscape 6,7, IE6 & Opera 6, see
http://www.w3schools.com/css/css_reference.asp
Style sheets can be embedded on an HTML or XHML page or referred to as external files - which is the recommended way of adding style.
own syntax different from HMTL or XML

CSS style rules

Each rule starts with a tag name
h1 {font-size: 32pt; font-weight:bold}
followed by a list of style properties bracketed by { and }
tag name defines the element, classes can be added for specific uses. Class begins by a period .class
Each style property starts with the property's name, then a colon and lastly the value for this property.
property : value
property – i.e. font-size
value – i.e. '32 pt'

Fonts

font-family: "Times New Roman" ; font-family: Arial, sans-serif

serif, sans-serif, monospace, cursive or fantasy

font-style: italic /* normal, oblique */
font-weight: bold /* normal, lighter, ... */
font-variant: small-caps /* normal */
font-size: large

xx-small, x-small, small, medium, large, x-large, xx-large

relative size: em, ex, px

absolute size: pt, in, cm, mm, pc (18pt)

font-size: 18pt

font-size: 50%

font-stretch: semi-expanded /* ... */
line-height: normal /* 18pt */

order: style, variant, weight, size/line height, family

font: italic small-caps bold 24pt/32pt Arial, sans-serif

Colors and backgrounds

color: red /* aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, rgb(r, g, b), hexadecimal */

color: rgb(128, 0, 255)
color: #8000FF
background-color: yellow
back-ground-image: url(myown.gif)
background-repeat: repeat-x /* no-repeat, repeat-y */
background-attachment: fixed /* scroll */
background-position: center /* top, bottom, left, right ... */

background: red url(mypic.gif) no-repeat scroll 10% 10%

Text

word-spacing: 3pt
letter-spacing: 1pt
text-decoration: underline /*none, overline, line-through, blink */
vertical-align: sub /* baseline, super, top, txt-top, middle, bottom, text-bottom, or percentage */

text-transform: uppercase /* lowercase */
text-align: left /*center, right, justify */
text-indent: 3em

Practice CSS.1-4

We start by creating some simple style definitions within the HTML document. Use Notepad, 1st Page 2000 or any other editor of your choice (but NOT Dreamweaver or some other program that changes your code) to create the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Inline Styles</title>
</head>

<body>
<p>This text does not have any style applied to it.</p>


<p style = "font-size: 20pt">This text has the <em>font-size</em>
style applied to it, making it 20pt.</p>

<p style = "font-size: 20pt; color: #0000ff">This text has the
<em>font-size</em> and <em>color</em> styles applied to it,
making it 20pt. and blue.</p>
</body>
</html>

Save it as practice1.html and test the result with a browser.

Continue by creating another page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Introduction to CSS </title>

<style type = "text/css">

em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }

</style>
</head>

<body>

<h1 class = "special">Main heading</h1>
<p> For style sheets to work, it is important that your markup is free of errors. A convenient way to automatically fix markup errors is to use the HTML Tidy utility. This also tidies the markup making it easier to read and easier to edit. </p>

<h1>Another heading</h1>
<p class = "special"> Each style property starts with the property's name, then a colon and lastly the value for this property. I recommend always adding the<em> semicolon </em>even after the last property</p>
</body>
</html>

Save it as practice2.html and test the result with a browser.

Continue by creating another page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>


<head>
<title>Introduction to CSS </title>

<style type = "text/css">

a.nodec { text-decoration: none }
a:hover { text-decoration: underline; color: red;
background-color: #ccffcc }

li em { color: red ;
font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline;
margin-left: 15px }

</style>
</head>

<body>
<h1>Shopping list for <em>an intergalactic party</em>:</h1>

<ul>
<li>Jinond-o-nicks</li>
<li>Drinks

<ul>

<li>jynnan tonnyx</li>
<li>gee-N-N-T'Nix</li>

</ul>

</li>

<li>chinanto/mnigs</li>
<li>tzjin-anthony-ks or <em>Ousisghian Zadah</em></li>
</ul>

<p> Send your order to: </p>
<p><a class = "nodec" href = "http://www.frogstar.int"> the largestsuperstore</a></p>

</body>
</html>

Save it as practice3.html and test the result with a browser.

Continue by creating another page, this time an external style sheet.

/* Exercise CSS4: style4.css */
/* External style sheet */

a { text-decoration: none; }
a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc; }

li em { color: red;
font-weight: bold; }
ul { margin-left: 2cm; }
ul ul { text-decoration: underline;
margin-left: .5cm; }

Save this and then modify your practice3.html to refer to this external style like below. Save it as practice4.html and test again.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>
<title> Linking an external style sheet </title>
<link rel = "stylesheet" type = "text/css" href = "style4.css">
</head>

<body>
<h1>Shopping list for <em>an intergalactic party</em>:</h1>
<ul>
<li>Jinond-o-nicks</li>

etc. like in the previous..

Practice CSS5: position of elements

Here we test the positioning of images and background images. Create an HTML page where the position of two images (they are in this same directory; you could also use some other images) is defined as follows:

<body>

<p><img src = "I.GIF" style = "position: absolute; top: 0px;
left: 0px; z-index: 1" alt = "First picture"></p>
<p style = "position: absolute; top: 50px; left: 50px;
z-index: 3; font-size: 20pt;">Some explanations </p>
<p><img src = "CIRCLE.GIF" style = "position: absolute; top: 25px;
left: 100px; z-index: 2" alt = " place of the second picture"></p>

</body>

Practice CSS6 : relative positioning

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Relative positioning of elements </title>

<style type = "text/css">

p { font-size: 1.3em; font-family: verdana, arial, sans-serif }
span { color: red;font-size: .6em; height: 1em }
.super { position: relative; top: -1ex }
.sub { position: relative; bottom: -1ex }
.shiftleft { position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex }

</style>
</head>

<body>
<p>The text at the end of this sentence
<span class = "super">is in superscript</span>.</p>

<p>The text at the end of this sentence
<span class = "sub">is in subscript</span>.</p>

<p>The text at the end of this sentence
<span class = "shiftleft">is shifted left</span>.</p>

<p>The text at the end of this sentence
<span class = "shiftright">is shifted right</span>.</p>
</body>

</html>

Practice CSS7: background images

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
<title>Background image</title>

<style type = "text/css">

body { background-image: url(logo.gif);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed; }
p { font-size: 12pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; }
.dark { font-weight: bold; }

</style>
</head>

<body>

<p>
This example uses the background-image,
background-position and background-attachment
styles to place the <span class = "dark">Evitech </span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the
browser window. Pick the logo from the course calendar page.
</p>

</body>
</html>

Practice CSS8: text box dimensions

Create your modified version of the next practice8.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>CSS - Box Dimensions</title>

<style type = "text/css">
div { background-color: #ffccff;
margin-bottom: .5em }
</style>

</head>

<body>

<div style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty precent of the width of the screen.</div>

<div style = "width: 80%; text-align: center">
Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen. You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. </div>

<div style = "width: 20%; height: 30%; overflow: scroll">
This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll! You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. You need to have some amount of text to be able to see the effects. </div>

</body>
</html>

Save and test with a browser.

Practice CSS9: text boxes and floats

Create the file practice9.html, change again some of the values.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>CSS - Flowing Text Around Floating Elements</title>

<style type = "text/css">

div { background-color: #ffccff;
margin-bottom: .5em;
font-size: 1.5em;
width: 50% }
p { text-align: justify; }
</style>

</head>

<body>

<div style = "text-align: center">From the restaurant at the end of the universe</div>

<div style = "float: right; margin: .5em; text-align: right">
Chapter 24, extract!!</div>

<p>It is certainly a curious fact, and one to which no one knows quite how much importance to attach, that something like 85 percent of all known worlds in the Galaxy, be they primitive or highly advanced, have invented a drink called jynnan tonnyx, or gee-N-N-T'N-ix, or jinond-o-nicks, or any one of a thousand or more variations on the same phonetic theme. The drinks themselves are not the same.</p>

<div style = "float: right; padding: .5em; text-align: right">
Linguistic facts</div>

<p>What can be made of this fact? It exists in total isolation. <span style = "clear: right">Here is some unflowing text: As far as any theory of structural linguistics is concerned it is right off the graph, and yet it persists. Old structural linguists get very angry when young structural linguists go on about it. </span></p>

</body>
</html>

Save and test with IE and Firefox / Mozilla.

Practice CSS10: text boxes and borders

Frames and borders. Create the file practice110.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>



<head>
<title>CSS - Borders</title>

<style type = "text/css">

body { background-color: #ccffcc }

div { text-align: center;
margin-bottom: 1em;
padding: .5em }

.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }

</style>
</head>

<body>

<div class = "thick groove">Here we have some text within a border.</div>
<div class = "medium groove">Here we have some text within a border.</div>
<div class = "thin groove">Here we have some text within a border.</div>

<p class = "thin red inset">A thin red line...</p>
<p class = "medium blue outset">And a thicker blue line</p>

</body>
</html>

Save and test with different browsers.

Practice CSS11: Creating your own style

Create an HTML page which advertises an excursion, a party (a concert, or something like that), and design a style which has at least a background (color or picture), a div text box and fonts defined. This practice you need to return and it is assessed.

Finally: learn more about CSS on the w3c site, for example on the w3schools site http://www.w3schools.com/.

Examples of possibilities offered by CSS at http://www.csszengarden.com/.

The CSS validator is at http://jigsaw.w3.org/css-validator/.

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Created by: Jaana Holvikivi
Updated: 23.1.2009