CSS Tutorial - Beginners

Part 3

Author: Derek Duban  www.upwithabang.com
for how-to docs on web development and free plug-in services for your site.

Common style properties and values

Style Sheet Properties

Properties of an HTML element are given values. For example the colour of text is the 'colour' property. The text font has many different properties including font-family, font-size, font-weight and text-decoration. Some property value types must be of the correct units. Two common value types are colour and size.

Style sheet size values

Sizes assigned to properties in CSS are best given in screen pixels or "em". "em" is the measurement of the current font such that 1.2em means 20% larger than the current font. You'd be right to think it is just easier to work in pixels as designated as "px". For example: font-size: 20px;

Style Sheet Colours

Colour values can be specified in 3 ways.

• Colour name
• A rgb value as in rgb(0,127,255)
• A hexidecimal value like #F39AB3

Valid colour names in style sheets are maroon, red, orange, yellow, olive, purple, fuchsia, white, lime, green, navy, blue, aqua, teal, black, silver, and gray.

You can get more colours by numerating the red, green and blue portion of your screen value with numbers between 0 and 255. For example rgb(200,127,255) means to show 200 parts red, 127 parts of green and 255 parts blue. This makes this colour:    

Instead of using the rgb format you may also use the traditional HTML hexadecimal format like #1234ff. In this format each 2-digit set are red, green and blue values respectively. So in #1234ff, the red value is 12, the green value is 34 and the blue value is ff.

12 3 4 5

Top