CSS First Steps

CSS First Steps

CSS – <div>, <span>, Backgrounds, Links and Bullets

These CSS features (tricks) will let you enhance any web page.

<div> </div<span> </span>

These html tags do not show on screen but if you need to add styles to something you can put these around it and set the style for them instead. A <div> tag behaves as a block – like a paragraph or a picture. A <span> tag behaves inline – you could set a different style for a few words in the middle of a line.

<div class="blueborder"<img src="bike.jpg" /</div>

<p>this is <span class="bigwriting">different</span text</p>

Backgrounds

You can set a background for a whole page or just certain elements.

body {

background-image: url('ocean-scene.jpg');

}

.greenbg {

background-color: green;

}

Links

You can specify the link fonts and colours to override the normal blue/purple/underline method. This one sets up yellow links that get a white background when moused over.

.link-text {

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 10pt;

color: yellow;

}

. link-text a:link{color: yellow; text-decoration:none;}

. link-text a:visited{color: yellow; text-decoration:none;}

. link-text a:hover{color: yellow; background-color:white; text-decoration:none;}

. link-text a:active{color: yellow; background-color:white; text-decoration:none;}

To use it you html like this:

<a class="link-text" href="index.html">Home</a>

Bullets

A bullet list in html uses the <ul> tags meaning Unordered List

Normal html bullets are boring. You can use CSS to set them up as different shapes or even to utilise little images like hands, stars etc.

ul {

list-style: circle;

}

ul.mybullets {

list-style: square url("star.jpg");

}

The first example sets all bullet lists to a hollow circle.

The second example says to use the star image when the class is set to mybullets (or a square until the image is loaded).

Exercise

Create a web page with:

  1. A link that changes colour when you mouse over it.
  2. An image with a green border.
  3. A paragraph of text with a red border and background image of the sky.
  4. A bullet list that has little images as the bullets.

You can use the web to find suitable images.

Hint. Use Dreamweaver to create the basic page then addCSS to get the styles right.

Page 1 of 2

Top View