CSS Properties

CSS Properties are used to style different classes and id’s in your document. Multiple properties can be used at once, in this chapter we will go over many of these properties.

Text Properties:

font-family - is used to change the font family on your site. Not all fonts are available on all computers, so you are limited to certain font families. Stick to the basics for most text. If you have special headings or something that you want different, you can make those images. If you would like to use a font that is not available in the basic browser you can call a font-family to download in the users browser with-in css. For more information visit http://www.fontsquirrel.com

Some of the basic fonts include:

• Arial
• Helvetica
• Courier
• Times
• Times New Roman
• Verdana
• Georgia
• Tahoma
• Trebuchet.

Give options for fonts, in case the user doesn’t have the first one installed, the browser will display the second option.

font-size – used to declare the text size on your site. For absolute sizing you should use pixels. When you use pixels your text will always be the same size. You can use Em’s for relative sizing.

This font size is 32px

em – is a sizing property that changes depending on parent element. It is based off of the browser default for text size, usually 1em is equal to 16px. If we placed a new div tag in the body and we specify font size at .75em, it would be equal to 12px. You can use up to 3 decimal places for em.

font-weight - used to declare the boldness of text. The options include 100-900, bold, bolder, light, and lighter. Not all browsers support all of these values.

font-style - allows you to declare your font to use italics.

example of italic font style

color - changes the color of the text. There are many different value options including white, black, fuschia, etc. You can also use hexadecimal codes, they require a pound sign, followed by 3 or 6 digits or letters, based on RGB.

Hexadecimal Code – first two digits are red, second two are green, third two are blue.

RRGGBB
#116688

some colors can be shortened like so

#ffffff can be written as #fff

text-decoration – usually used in styling your links. Or unstyling your links. By default links are underlined. values are underline, over line, line-through, none.

letter-spacing - adds space between each letter, you will use measurements such as 20px. Use caution with letter spacing.

LETTER SPACING OF 20px

line-height - spacing between the lines of text. Spacing is even between top and bottom of the text. Total line height, subtract the font-size.

text-transform – controls the capitalization of letters. 3 different values: capitalize, lowercase, uppercase.

word-spacing - controls the space between words.

WORD SPACING OF 30PX

text-indent - indents a paragraph. you can also use it to pull text off of a page by using a negative number.

display – useful property. effects the way elements are displayed. you can change a block-level element to an inline element.

Background Properties

background-color - changes the color of the background of an element. Values work the same as color values. Hex, color name, RGB.

BLUE BACKGROUND COLOR

background-image - you can declare a background image for a block level element. You need to include a url path to the filename from the css document. The path needs to be surrounded by parenthesis.

background-repeat – you can repeat the background in a number of ways. horizontally (repeat-x) or vertically (repeat-y) or not at all.

background-attachment – determines whether a background image is fixed or scrolls with the rest of the page.

background-position – determines a background images position.

background – used to style the background of an element