Commonly used CSS properties
Note that the values following the properties are often keywords - reserved words that mean a very specific thing. Keywords are never in quotes, strings are.
Color
Colors are expressed on the web as red-green-blue (RGB) values. Always precede the color with a hash mark and express as a hexadecimal number. Colors generally have six digits (2 for red, 2 for green, 2 for blue) but can also be expressed in a 3 digit shorthand where #369 is the same as #336699. An example color property is:
color: #996633; although this can also be written color: #963; To find out what these colors look like use a photo/graphic editing tool like Photoshop or just use Dreamweaver or most other web editing tools.
Border, Margin & Padding
Margins can be applied to the top, right, bottom and left of an element (in that order). An example for setting uniform margins of 10 pixels on every side is:
margin: 10px 10px 10px 10px;
Borders start on the inside of the margin and have various styles (dashed, dotted, solid etc) but are uniform on all sides unless the explicit border-top border-bottom border-left or border-right properties are separately set. An example for setting a 1 pixel border is:
border:#00CCCC 1px solid;
Padding starts inside the border and offsets the content from the border and margins. Padding, like margins, can be specified with a single command to set top, right, bottom and left padding (in that order). An example to set 5 px padding is:
padding: 5px 5px 5px 5px;
Measuring Width: some details
- Width of an item = content width + (margin x 2) + (border x 2) + (padding x 2) - which must still fit inside the parent. For an image:
Width = img width + L margin + R margin + border + border + L padding + R padding
Font Styling: family, size, weight, and style
These choices are limited by what the browser of each viewer can display - you may have the specified font, but your viewers may not. Survey on commonly available Windows fonts
- font-family: Verdana; (other choices include Courier, Times, Arial, Helvetica, Modern, Garamond etc. You can also use generic family names such as serif, sans-serif, cursive, and monospace)
- font-size: .8em; (other choices of unit besides em include %, px, pt, in, cm, mm, pc. All must be preceded by a number with no space between the number and unit)
- font-weight: bold; (other choices include normal, lighter, bolder, and even 100s from 100 to 900)
- font-style: italic; (other choices include normal, oblique)
Float & Clear
Float pushes elements to one side or another of the parent element to allow other sibling elements to float or wrap around them like this paragraph wraps around the image to the right.
Once the image is marked "float", all paragraphs and other elements will wrap around it.
But see what happens when you "clear" the float? Clear undoes the float so that the next elements start clear of the previously floated element. (Like this paragraph which DOESN'T flow around the photo). This was done by setting a style: .clearboth {clear:both} and then applying it to the element, in this case this paragraph: <p class="clearboth">
Background
Paragraphs, headers, the whole body of your document can have a background color by setting this property: background-color: #xxx. Use background-color: transparent to restore an element to no background.
Likewise a background image for all or part of the screen can be set by specifying the .jpg or .gif image file you wish to use: background-image: url('filename.jpg')with background-repeat: repeat (or repeat-y or repeat-x if you want it to repeat in the vertical or horizontal direction only). All of these parameters can be combined as follows:
background: #color url('imagefile') no-repeat center
Overflow
Default option is "visible". See visual example or right click to see html
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
Other Resources
see w3schools.com for more detailed information about font-family. The also have good examples for all the CSS properties
See Wikipedia to see what your browser sees when various font-families are used.
Advanced: Official CSS2 Syntax from w3.org