Around the Web in Eighty Kilobytes

Home Old Issues Examples
 PreviousIssues : 12 - June 23
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.23 - 1.24
   ATWI80KB 12

June 23, 2000

1) CSS?!
2) Writing Stylesheets
Example


   HTML is a pretty useful language to know, but it just isn't powerful enough. Complicated pages act funny and have a large file size. CSS (Cascading StyleSheets) make it easy to get cool formatting with just a couple of lines of code. CSS is also an important bit of Dynamic HTML.
   The major disadvantage is that browser versions 3.0 and below hardly support CSS. But as long as you don't make your pages CSS-dependent, stylesheets can be used to make your pages look great to the majority of viewers. If you need to, you can make separate versions of each page, one for old browsers and one for 4.0 and above, but I don't think it's a good idea because it means twice the work.
   Anyway, back to learning stuff. I haven't included all the CSS things I know of, because there are LOTS of unimportant or badly supported ones.

There are four ways to put Stylesheets in a page:
  1. Make a separate file and link it to the HTML.
  2. Embed it into the HTML document.
  3. Add individual attributes in the page body.
  4. Import it. Not very well supported, so let's forget it.

  1. Linking
       The stylesheet is written in a file with a '.css' extension. I'll show you how to write the stylesheet itself in a moment. Stylesheets are linked to HTML documents with the <link> tag between <head> and </head>. <link> has a few attributes:
       <link rel=stylesheet href="STYLESHEET'S URL" type="text/css">
    Of course, instead of "STYLESHEET'S URL", you're meant to write the location of the '.css' file. It's written the same way as a link.

  2. Embedding
       Code is inserted anywhere in the HTML document above the body. It's not usually put between the <head> and </head> tags, but that shouldn't make a difference. Stylesheets are written between <style> and </style> tags, with an attribute:
       <style type="text/css">

    Everything between the <style> and </style> tags should be commented (put between <!-- and -->) to prevent old browsers from showing the stylesheet itself.

  3. In the Page
       Just add the "STYLE" attribute to a tag.
    eg. <DIV style="whatever">
    (<DIV> is like <P> and <SPAN> is nothing in particular)


2) WRITING STYLESHEETS
   Stylesheets are written like many programming languages, though it isn't one. here's how it works:
   TAG { PROPERTY: VALUE }

   'TAG' is the HTML tag you want to apply the style to. For example, 'img { whatever }' means properties apply to all <img> tags and 'b { whatever }' means the properties apply to everything between <b> and </b> anywhere in the page.

   Between the wiggly brackets '{' and '}' type the properties you want to apply to the tag.
eg. b { background-color: #CCCCCC }

This means that bold text has a gray background. You'll learn about 'background-color' and lots more properties in the next few issues.    To add more than one property at a time, separate them with ';'.
eg. b { background-color: #FF0000; color: #0000FF }

Bye the way, CSS, like HTML, ignores extra spaces and 'enter's.

A useful attribute you can add to HTML tags in the body is 'class'.
eg. <p class="colored">

If you want text between <p class="colored"> and </p> to be red and everything else normal, type in the stylesheet:
   p.colored { background-color: #FF0000 }
EXAMPLE
HTML Doc with Embedded Stylesheet:
<html>
<head>
<title>Spock</title>
</head>

<style type="text/css">
<!--
SPAN { background-color: #FF0000 }
b {
  color: #550000;
  background-color: #CCCCFF
  }
b.green {
  background-color: #CCFFCC
  }
-->
</style>

<body bgcolor="#FFFFFF">
<b>BOLD stuff</b><br>
<b class="green">Wierd bold stuff</b><br>
<br>
<!-- Look how styles can be used in the document: -->
Blah blah <SPAN STYLE="color: #0000FF">Blah</SPAN>!
</body>
</html>

A Stylesheet - say "style.css":
SPAN { background-color: #FF0000 }

b { color: #550000; background-color: #CCCCFF
  }
b.green {
  background-color: #CCFFCC
  }

HTML File, in same folder as 'style.css':
<html>
<head>
<title>Spock</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<b>BOLD stuff</b><br>
<b class="green">Wierd bold stuff</b><br>
<br>
<!-- Look how styles can be used in the document: -->
Blah blah <SPAN STYLE="color: #0000FF">Blah</SPAN>!
</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.