Home / code / css

CSS.

This is only a short list of the most used tags. If you want a complete list, take a look at w3.org

Selectors :


Properties :

 

Selectors :

Body

It's the same like the body in html.
Example: 

body {
	background:#2C4A72;
	color:#ccc;
	font-size:12px;
	font-family: Verdana;
	margin: 0px 0px 0px 0px
	}

 

Links

Links are represented in css by an 'A'.
Example: 

A:link, A:visited, A:active {color:#999}
A:hover {color:blue}
If you put several Selectors, separated by a comma, after each other they all get the same property (color:#999).
Link means a link that is not visited and not active.
Visited means a link that has been visited.
A link is active is when you are pressing/clicking on it.
Hover is when your mouse moves over it.

 

Headings

H1, H2, ... H7 are all headings.
Example: 

H1 {
	color: green;
	font-size: 36pt;
	font-family: serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: normal;
	}

 

Table

Same as in html. Note: The properties in the table-file are for every table on every page where the css-file is included.
If you want to set properties for only few tables you need classes. Example: 

table	{font-size:12px; font-family: Verdana}

 

Form

Again same as in HTML. You can specify input, select from the rest if you want to.
Example: 

form {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}
input, select {
	background-color: #fff;
	border: 1px solid #000;
	font-family: Tahoma, Arial, Helvetica, Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #000;
	margin: 0px 5px 0px 5px;
	}

 

Classes

With classes you can define individual headers, tables, buttons, ....
Example: 

.prod1 {
	width: 565px;
	background-color: #b3c5de;
	margin: 10px 0px 0px 10px;
	border: 1px solid #000;
	}
In order for it to work you have to include a small tag every where you want these rules to apply.
<table class="prod1">

If you want to have urls a different color just in this class, use the following syntax :

a.classname:link {color: red;}

 

 

Methods :

Height, width

Yep, it specifies the height and width.
You can do it in pixles : width: 565px;,
or in percentage : width: 90%;,
or relative to the font size : width: 1em;.
If you just set a number width: 565;, they assume it is pixles.

 

Background

Here you specify the background of a page, table or even plain text.
There are several sub parts:

  • background-color: #89A7CC;
  • background: #89A7CC; (is the same as the above, but shorter)
  • background-image: url(back.gif);
  • background-repeat: no-repeat;

 

Margin

The margin is the margin of a page, table, form, ...

BLOCKQUOTE {
	margin-top: 1em;
	margin-right: 0em;
	margin-bottom: 1em;
	margin-left: 0em;
	}
or short
BLOCKQUOTE {margin: 1em 0em 1em 0em;}
This can also be set in pixles or percentage.

 

Border

Is like the border in HTML but you can do a lot more.
Example:

border: 3px double #cccccc;
  • border-top: thin solid (border-bottom,border-left,border-right)
  • border-style: none (dotted,dashed,solid,double,groove,ridge,inset,outset)
  • border-width: 2
  • border-color: red
You can make combination with the above:
border-top-color: #0066FF;

 

Font

Font is made for text of course, and again many options.

  • font-size: 36pt;
  • font-family: serif; (Tahoma, Arial, Helvetica, ...)
  • font-style: normal; (normal,italic)
  • font-weight: normal; (normal,bold)
  • font-variant: normal;
A short version:
font: 36pt serif
Note: In font-family you can set several types, if the first is available the first is taken, but if not the second is tested, and so on.

 

Color

Color just means color. There are several options to write it:

  • color: red;
  • color: #FF0000;
  • color: #F00;
They are all the same color, Red.
The last one is for web-save colors. (#125 = #112255,#A5F = #AA55FF).

 

TOP

Latest script:

 

Books: