|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.27 - 1.28
ATWI80KB 14
July 7, 2000
1) Colors
2) Background Pictures
Example
1) COLORS
You already know how to use 'color' to change the color of text. Another property is used for page backgrounds - 'background-color'. It's quite easy to get confused between them.
'background-color' can have an HTML color code as a value, or 'transparent' to make sure that there's no background. A background color can be applied to anything - the whole page, a paragraph or even one letter.
CSS control over this sort of thing is what makes it so much better than normal HTML.
Here's another use of 'background-color' - in making navigation toolbars.
Graphical toolbars might look good, but they take ages to load. A text-based one can look cool if the background and/or text color changes when the mouse is over it:
<style type="text/css">
<!--
A:link {
text-decoration: none;
color: #FF0000;
background-color: #FFFFAA
}
A:hover {
background-color: #FFFFDD;
color: #000000
}
-->
</style>
2) STYLESHEETS AND LINKS
Background pictures are added with 'background-image' property. Here's how it's used:
TAG { background-image: url(URL OF BACKGROUND PICTURE) } or TAG { background-image: none }
There are a few properties you can do with background pictures. The only useful one is 'background-repeat'. It controls whether the image is 'tiled' horizontally and vertically. A value of 'repeat-x' makes the image tile horizontally. 'repeat-y' tiles it vertically. 'no-repeat' means it won't tile at all.
eg. Imagine you have an image that looks like this:
repeat-x:
repeat-y:
no-repeat:
'background-position' isn't supported by the browsers about three fourths of people use, so it's not worth knowing how to use. Anyway, is you want to use it type the pixel or percentage value of X and Y coordinates respectively.
'background-attachment' controls whether the image scrolls with the rest of the screen when the page viewer scrolls the page. It can have a value of 'fixed' or 'scroll'. Default is 'scroll' of course.
eg. body { background-image: url("whatever.jpg");
background-attachment: fixed }
EXAMPLE
<html>
<head>
<title>CSS is a stupid name for CSS</title>
</head>
<style type="text/css">
<!--
body { background-image: url('purple.jpg');
background-attachment: fixed;
background-repeat: repeat-x;
}
div { background-color: #000000;
color: #FFFFFF
}
span { background-color: #FFFFFF;
color: #000000
}
b { background-image: url('fences.jpg');
color: #FFFFFF
}
A:link { text-decoration: none }
A:visited { text-decoration: none }
A:hover { background-color: #FFFFFF;
color: #000000
}
-->
</style>
<body link="#FFFFFF" alink="#FFAAAA" vlink="#FFFFFF" bgcolor="#FFFFFF">
<font face="verdana, arial, helvetica">
<hr><br>
<div>
<br>
Tool<span>BAR </span>
<a href="http://atwi80kb.homepage.com"> ATWI80KB </a> <a href="http://kkeducation.tripod.com"> KK Education </a>
<a href="mailto:aniruddhnath@hotmail.com"> Email Us </a>
<br>
</div><br>
<b>Text.</b>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
</font>
</body>
</html>
See you in a week!
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.