Client side web programming

| | SYLLABUS | CALENDAR AND EXERCISES |

Introduction to Cascading Style Sheets (CSS)

CSS - Cascading Style Sheets language

CSS style rules

Classes and id references can be added for specific uses.
Class begins by a period .class.
Id reference starts with a hash #idref.

.beverage {font-size: 80%; color: #440011 }
#first {font-style:italic}

Fonts

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

font-style: italic /* normal, oblique */
font-weight: bold /* normal, lighter, ... */
font-variant: small-caps /* normal */
font-size: relative or absolute definitions

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

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 1.1-4

We start by creating some simple style definitions within the HTML document. Use Notepad, Notepad?? 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>

<!-- Practice 1.1: inline style -->
<!-- Using inline styles -->

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

<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare inline -->
<!-- styles. Separate multiple styles with a semicolon. -->
<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>
<!-- Practice 1.2: internal style -->
<head>
<title>Introduction to CSS </title>

<!-- Declaring a style in the header section -->
<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>
<!-- This class attribute applies the special (blue) style -->
<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>
<!-- Exercise 3: more internal styles -->
<!-- With a class called nodec and pseudoclass hover -->
<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 4: 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">

<html>
<!-- Exercise 4: practice4.html -->

<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 1. 5: 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 1.6 : relative positioning

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

<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 1.7: background images

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

<html>
<!-- Background image -->

<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">EVTEK </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 1.8: 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>

<!-- Setting box dimensions and aligning text -->

<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 browsers. If the scrollbar does not show, try dimensions with pixel sizes like 70px, 200 px

Practice 1.9: 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>

<!-- Floating elements and element boxes -->

<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 Netscape / Mozilla.

Practice 1.10: 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>

<!-- Setting borders of an element -->

<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.

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

 

Created by: Jaana Holvikivi
Last update: 19.1.2013