CSS From Scratch. 5:2 CSS Properties

Tweet

Before looking further at CSS here are some useful examples of CSS properties. Notice how when we set a border before we used a shorthand which combined declarations for the border width, style and colour into one line:

* {border: 1px solid red;}

If we wrote these out as separate declarations the CSS would look like this:

* {
border-width: 1px;
border-style: solid;
border-color: red;
}

Notice how the properties use plain english words, and that the name of the main property is followed by a hyphen and then the word describing the more specific aspect of that property. This is the format followed by almost all CSS declarations. There are very many CSS properties, but it is often possible to guess what they are called.

You can look up lists of CSS properties online. The W3C website is a good source of information, and properties are grouped into sections with examples that you can try out on the website.
http://www.w3schools.com/css/default.asp

We have already seen that color is used to give the text colour of an element, and background-colour gives the background colour of an element.

Here are some useful properties for fonts and values that they take:

• font

Declare all properties at once using CSS shorthand. List the values in this order: font-style font-variant font-weight font-size/line-height font-family. Only font-size and font-family are required.

Example:

p {font: 14pt serif;}

• font-family

Names of fonts as comma separated list. Names of fonts which are more than one word should be in quotes (“Times New Roman”). The last value should always be either serif or sans-serif as these are the most generic font families (not all computers have the same fonts installed)

• font-weight

This can have values bold, normal or inherit, or a number between 100 and 900.

• font-style

This could be italic, oblique, normal or inherit

• font-size

This would be a numerical value in units such as pixels, ems, points or a percentage. (eg 12px, 2em, 14pt, 90%). Ems and Points are printers’ units for measuring text sizes. Percentage values and ems will be relative to the default text size, and will scale if someone enlarges the text in their browser.

• line-height

Numerical value in same units as above (px, em, pt, %)

There are numerous other CSS properties, but these ones should get you started.

Tags: background colour, border color, border width, comma separated list, css properties, declarations, element, font families, font family names, fonts, hyphen, line border, sans serif, serif font, shorthand, source of information, style font, text colour, times new roman, w3schools

This entry was posted on Saturday, August 6th, 2011 at 8:43 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.