Outer Court

Tech - HTML4 - Properties

Here's some of the more important things you need to know about how to define properties for CSS declarations (such as H1, body, .logo, etc.)
For a complete list check out the web design links leading to the W3C standards. You should download the HTML4 and CSS2 standards for reference.

Colors

With colors it's like: if you set one, better set all. First of all, you don't know somebody else's default settings. Also, systems may have certain user stylesheets which partially overrides the default settings you may be used to. Colors are defined in 3 basic different ways. Let's take a bright red: you can give the hexadecimal color value with #FF0000, the percentage with rgb(100%,0%,0%) or the absolute decimal value with rgb(255,0,0). In all cases, the order is: red, green, blue, and the final color is determined by how much of each color is mixed into the final one. The hexadecimal value for pairs (like FF) can also be shortened by writing #f00.

If you need a tool for color converting you can download WebCol at the VB files section.

Example

Wanted effect

A page background is white, the text is black.

Hypertext
<body bgcolor="#ffffff" text="#000000">
Stylesheet
body
{ background-color: #fff; color: #000
}

Fonts

There's different basic font families, which are: serif, sans-serif, cursive, fantasy, monospace. You assign these values to the property font-family. You can also still use font names like "times". To make sure the browser which hasn't got "times" still gets a serif font, you'd write:
font-family: times,serif.

If a font-name includes a space, you put quotation marks around it (like arial, but "arial narrow").

Font sizes can be given in a variety of forms. These include absolute values like points (pt) or pixel (px), or relative values like a percentage and the keywords "larger" and "smaller".

Example

Wanted effect

A paragraph font is arial narrow, if not available it's arial, and as last alternative it's a default sans-serif font the browser determines if available. The text is set to a little bigger.

Hypertext
<p><font name="arial narrow,arial" size="+1">
Stylesheet
p
{ font-family: "arial narrow", arial, sans-serif; font-size: 110%
}

Images

You can have background-images with CSS. You just type background-image: url(name.gif). If you don't want the background-image to repat, you write: background-repeat: no-repeat:. The values can also be repeat-x/ repeat-y (for tiling in only one direction). You could also position the background image or set it to fixed, like when the document is scrolled and the body background shouldn't, but these properties aren't crossbrowser-supported.

Example

Wanted effect

The body has a blue background-tile with a certain texture. The picture only runs along the left side of an otherwise white page.

Hypertext
<body background="bluesquare.gif">

<!-- the GIF file is a big picture of a small blue square with over thousand pixels of white to the right -->
Stylesheet
body
{ background-image: url(bluesquare.gif); background-repeat: repeat-y; background-color: white
}

/* The GIF file is a picture of a small blue square */

Positioning

Normally, things are positioned in the context flow. A div after a div for example is typically put below the last element. If you use position: absolute, the block element is taken out of its context and positioned at the left and right properties you assign. You can use different units with these, like percentage or pixel. You can also assign the boundaries with width and height. Absolute positioning is a risk, since two areas could overlay and hide content, if a positioning bug exists on a browser. To relatively put a block to some side, you can use float with the values left, right. If you just want to position the content of like a div, you'd use text-align, which has the additional value justify to spread text over the area in block style manner.

Example

Wanted effect

Position content at the lower right corner of another content block. Invert the colors of both contents (see the positioning sample pic).

Hypertext
<table cellspacing=0 border=0>
<tr><td bgcolor="#000000"><font color="#ffffff">Content
1</font></td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td bgcolor="#000000"><font color="#ffffff">Content 2</font></td></tr>
</table>

<!-- Guess what happens if a browser can display text colors, but not font colors, like MSIE2 -->
Stylesheet
<head>
<style>
.content { position: absolute; background-color: #000; color: #fff; width: 100px; height: 100px; }
#c1 { left: 100px; top: 100px; }
#c2 { left: 200px; top: 200px; }
</style>
</head>
<body>

<div class="content" id="c1">Content 1</div>
<div class="content" id="c2">Content 2</div>

Distances

Relative distances from one object to the other can be set by margin and padding. Margin is the distance from the border to the next object, padding is the distance from the block's border to the inner content (see distance sample image). You can set the values by pixels (px) or other units.

Example

Wanted effect

An area has a picture to the left and text to the right. Move the text a bit away from the right border of the image.

Hypertext
<img src="..." align=left hspace=30>Text area
Stylesheet
<img src="..." alt="" style="float: left; margin-right: 30px">Text area

Continue with the tutorial: Cascading, Inheritance.

 
Basic
Goodies
Design
Tech
Email
Make a donation