GeoffKnagge.com

Home

Web Development


Short Contents

Introduction
CSS Basics
Selectors
Terminology
Colours
Fonts
Text
Blocks
Classification

Full Contents

Introduction

 Other CSS sites
Download this Guide

CSS Basics

 Setting Styles
...setting values
Comments
Inheritance

Selectors

 ...by class
...by id
...contextual

Psuedo Classes
...<A> links

Psuedo Elements
...first line
...first letter

Terminology

 Cascades
"! important"
CSS element model
Block elements
Terminology used here
Units
...lengths
...colours

Colours

 Foreground colour
Background
...-color
...-image
...-repeat
...-attachment
...-position

Fonts

 Font
...-family
...-style
...-variant
...-weight
...-size

Text

 word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height

Blocks

 margin-top
margin-right
margin-left
margin-bottom
margin
padding-top
padding-right
padding-bottom
padding-left
padding
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color
border-style
border-top
border-left
border-bottom
border-right
border
width
height
float
clear

Classification

 Display
whitespace
list-style
list-style-type
list-style-image
list-style-position

Colour and background properties

color

Value color
Initial depends on the program used
Used with all elements
Inherited yes
Used to set the text color, and can be specified in two ways: 
  color: colourname
  color: rgb(red,green,blue) 
       /* red, green, blue are integers in the range 0-255   */

background-color

Value color | transparent
Initial transparent
Used with all elements
Inherited No, but since the default is transparent, the colour behind will be seen

background-image

Value url | none
Initial none
Used with all elements
Inherited No
Example BODY { background-image: url(picture.gif) }
This property replaces the background colour with an image.

background-repeat

Value repeat | repeat-x | repeat-y | no-repeat
Initial repeat
Used with all elements
Inherited No
Example background-repeat: repeat-y; /* Repeats vertically */

background-attachment

Value scroll | fixed
Initial scroll
Used with all elements
Inherited No
Determines whether the background scrolls with the image, or is "watermarked" onto the screen. 
  BODY 
 { 
    background-image: url(imagefilename);
    background-attachment: fixed;
  }

background-position

Value :
or :		 [top | center | bottom] [left | center | right]
[percentage | length ] [percentage | length]
Initial 0% 0%
Used with block-level and replaced elements
Inherited No
Percentages values Percentage distance across the element, with 0% being the left or top.
Examplesbackground-position: 0% 2cm;
background-position: 100%;
background-position: 100% 100%;

If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. Negative positions are allowed.

If the background image is fixed to the screen, the placement is relative to the screen instead of the element.

background

Value background-color || background-image || background-repeat || background-attachment || background-position
Used with all elements
Inherited No
Example P{ background: url(picture.gif) white 20% repeat fixed}
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.