CSS

From TechWiki

A good tutorial can be found here: German, English.

A great debugging tool for Firefox: Firebug.

An empty HTML shell importing the stylesheet myOwn.css from /folder: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>My template</title>
    <style type="text/css">
      @import url(/folder/myOwn.css);
    </style>
  </head>

  <body>
   ...
  </body>
</html>

You can also always incorporate stylesheet definitions into HTML-documents: 

<html>
  <head>
    <title>Title</title>
    <style type="text/css">
      ...
    </style>
    </head>
  <body>
    ...
  </body>
</html>

Contents

[edit]

Basic Syntax

Definition in the stylesheet: 

h1 { color:red; font-size:48px; }

Deployment in the HTML-document: 

<h1>This title uses 48 pixels and is red</h1>

Generically, the stylesheet syntax is: 

selector { feature:value; ... }

where the selector can be any HTML-tag, e.g.: 

<body> for the whole document
<h1> is the 1st level title
<p> is a paragraph
<li> is a list
<a> is a link

and the features include, e.g.: 

background-color:#FFFFCC;
margin-left:100px;
font-size:300%;
color:#FF0000;
font-style:italic;
border-bottom:solid thin black;
line-height:140%;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.1em;
word-spacing:0.3em;

Note that: 

h1, h2, ... {...}

will assign the features in the curly brackets to h1 and h2, and that: 

hi i {...}

will assign the features in the curly brackets to <h1>... <i>the text here</i></h1>, and that 

p[align=center] { color:red; }

will work for <p align="center">this text</p>.

[edit]

Classes

[edit]

Basics

Define classes: 

h1.myClass1 {...}
.myClass2 {...}
.myClass3.subClass1 {...}

and use them in the HTML document: 

<h1 class="myClass1">...</h1>
<b class="myClass2">...</b>
<h3 class="myClass3 subClass1">...</h3>
[edit]

div and span

div is like a dummy HTML-tag, that allows you to define a new paragraph: 

.myClass  {...}
<div class="myClass">...</div>

span works similarly, but is applied inside paragraphs: 

.myClass1  {...}
.myClass2  {...}
<div class="myClass1">Text <span class="myClass2">more text</span>...</div>
[edit]

id

Define formats, e.g.: 

#myFormat {
  position:absolute;
  top:130px;
  left:30px;
  width:320px;
  padding:10px;
  margin:0px;
  border:4px solid #EE0000;
}
h1#anotherFormat {
  font-family:Arial,sans-serif;
  font-size:2em;
  font-weight:normal;
  color:green;
}

and deploy them in the HTML-document: 

<h1 id="anotherFormat">...</h1>
<div id="myFormat">.../div>
[edit]

Links

HTML-syntax: 

<a href="http://www.whatever.org/" target="_blank">whatever</a>

So called pseudoclasses can be employed with the HTML-tag <a>: 

:link = not yet visited links
:visited = visited links
:hover = while mouse is over link
:active = just clicked link

E.g.: 

a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }

target specifies if the link should be opened in a new window (_blank) or the same window (_self), respectively.

And more elaborately: 

div#linkst a {display:block;background-color:black; text-decoration:none; font-family:Arial; color:white; font-size:13px;}
div#linkst a:hover {color:black; background-color:CCFFCC;}
div#linkst a img {height:0; width:0; border-width:0;}
div#linkst a:hover img {position:absolute; top:200px; left:575px; height:240px; width:200px; }

will change the text of the link during hover and display an image at the specified coordinates, if the HTML-document contains: 

<div id="linkst"><a href="http://whatever.org" target="_blank">whatever<img src="image.jpg"></a></div>
Retrieved from "http://j-node.homeip.net/tech_wiki/index.php/CSS"