Formatting Text With Style Sheets

CSS Measurement

Measurement

Many CSS properties (values within the declaration) require that you specify a unit of measurement, such as spacing between elements, border widths, and font size.

Knowing these measurements will minimize errors in the look you were expecting.

Measurement ContinuedCSS supports measuring values in inches,

centimeters, and millimeters. However, the actual size of these can be very unpredictable from one monitor to the next. Therefore, it is not recommended.

Pixels are the building blocks of your computer monitor. However, the exact size of a pixel cannot be predicted, but because it is a real unit of measurement in computer monitors, it is widely used in CSS. Pixels are not recommended for font sizes.

Measurement Continued…Points and Picas: There are 72 points to an inch,

and 6 picas in an inch (or 12 points in one pica). Again, they are not recommended for use as they are based on the inch which is determined to be unreliable.

Ems and Exes: An em is a unit of measurement defined as the width of a capital letter M (within the current font). Browsers treat an em as an equivalent to the font size, so if your text is 16 pixels, 1 em would equal 16 pixels. Exes are defined as the width of a lowercase “x,” though most browsers simply treat it as ½ an em.

Measurement Continued…Percents: CSS rules inherit from other rules,

so the property with a percentage value will be that percent of whatever the size defined in the body. (Example: if you set the size of the body at 90%, and then a paragraph at 80%, the paragraph’s size would be 80% of the 90% of the default size.)

IE and Font Scaling: Internet explorer will only allow the user to resize text only if you set your font size in ems, exes, or percents. This applies only to font size.

Measurement Continued…Specifying units: Most units have associated

abbreviations, so if you want to use pixels, write px.

Absolute Measurement

points = ptpicas = pccentimeters = cmInches = inMillimeters = mm

Relative Measurement

pixels = pxem space = emx space = ex

Formatting the Text

Font-weightWeight values are stated as:

Lighter, normal, bold, or bolderYou can use the normal value to remove

boldness that may be inherited from previous style rules.

You can also specify a number value using a multiple of 100 from 100 to 900 to control the boldness level. Not all browsers support this feature.

Selector {font-weight: bold}Try it!

Font-styleFont-style property accepts 3 different

values:Italic, oblique, normal

Italic and oblique apply similar slanted formatting to text whereas normal makes text non-italic

Avoid using italics on small text as it can make it hard to read.

Selector {font-style: oblique}Try it!

Text-indentYou can use the text-indent property to indent

your paragraphs to give them the traditional look and feel.

You can also use the text-indent property to apply a hanging indent (also called outdent) by using negative values.

Can set the value as a specific measurement value or as a percentage of the overall text block width.

Selector {text-indent: 30px}Selector {text-indent: 20%}

Can also use mm, cm, in, pt, pc, ex, or emTry it!

Font-sizeYou can use the font-size property to

emphasize or de-emphasize different sections of text on your page.

Accepts a variety of measurement units:pt, px, pc, ex, emCan also use xx-small, x-small, small, medium,

large, x-large, or xx-large font sizeSelector {font-size: 20pt}Try it!

Font-familyChoose the font by name

Still want to apply the rules the same as hand-coded html: Stay with safe fonts. Use a few different fonts as

browsers accept fonts that others may not. When creating the style, you do not need to

place the declaration values in quotations; however, if the name is more than one word, you will have to place the name in quotations.

Selector {font-family: arial, “Gill Sans”, “Times New Roman”, verdana;}

Try it!

Text-transformYou can change the text case for a particular tag.There are four case values:

Capitalize : if you want the first character of each word to appear capitalized

Uppercase: as in putting on the CAPS to your fontLowercase: all characters will remain in lowercaseNone: Will simply leave the text as is (as it was

originally typed)Selector {text-transform: uppercase}Try it!

Text-alignYou can control the horizontal positioning of

block-level text in your page.Block-level text includes paragraphs, tables,

and other elements that display a blank line and after the element on the page.

Values are stated in 4 ways:Right, left, center, and justify

Selector {text-align: justify}Try it!

Line-heightUse this property to adjust the spacing, or leading,

between lines of text. The value can be specified as a multiple of the

height of the elements font, an absolute value, or a percentage.Using em’s are a great way to set size because it is

automatically relevant to the font size.Be careful when applying small values because this

can result in overlapping lines. There can be no negative values!

Selector {line-height: 1.5em;}Try it!

Letter-spacingAlso known as “kerning.”Values can be stated in the following:

pt, px, pc, ex, emThe specified value is added to the default

spacing that is normally inserted between letters.

Negative values condense the space between letters…not recommended!

Selector {letter-spacing: 5px}Try it!

ColorValues are stated either by stating the 16

predefined html colors, hexadecimal values, or rgb.

Used in a variety of ways:To emphasize important information and

change other web elements such as tables, borders, and horizontal rules.

Selector {color: pink}Try it!

Background-colorUsed to change the background color that

will appear behind the text and/or other elements.

Stated in one the 16 predefined html colors, hexadecimal values or rgb values.

Have seen it as background or background-colorBe careful of your selector!

Selector {background: #FFFF99}Try it!

Color background

Background imagesCan either be stated as background: or background-

images:You must know the location of the image file. If the image is small, it will repeat (or will display as

tiles) to fill the background area. You can control the repeat using the repeat values.

Remember to be careful when choosing a background!Free-backgrounds.com and backgroundcity.com

public domainSelector {background-image:

url(“thenameoftheimage.jpg”);}Preferably within a div or body

Try it! Create a style rule in “personal 2” (or the one without the div), using your body as the selector and add your imageBackground image in browser

Background image:

Repeat, no repeat, repeat-x, repeat-y

Repeat:Repeats the image to fill the background

This is the default therefore you really should not have to use it.

No-repeat:Prevents a background image from repeating

Repeat-x:Tiles the image horizontally

Repeat-y:Tiles the image vertically

Simply add the command to the outside of the parenthesis though within the declaration following your image location.

Try it! Selector {Background-repeat: repeat-x;} body {background-image: url("Hydrangeasresized.jpg"); background-

repeat: repeat-y;} Image Repeat-y in Browser

Background image repeat-x

BorderCan add a border to any element to separate the

element from other web page objects. Designate a specific thickness value or can specify

one of three descriptive values:Thin, medium, or thick

You can also specify a colorYou can even create a single, double, dotted, or

other type of line solid, double, groove, ridge, inset, outset, dotted, or

dashedId selector {border: medium dotted teal;

padding: 10px}Try it!

A:link text-decorationYou can control the

appearance of links throughout the page to display a different color for visited, unvisited, and active links. Specified using one of the 16

predefined html colors, a hexadecimal color value, or an rgb value.

After your “a:” follows the type of link you want to change (link, visited or active)

a:active {color: orange}Try it!

You can remove the default underlining that normally appears beneath a link using the text-decoration property.

a:link {text-decoration: none}

Try it!

a:hover a:focusUsed to control how link text

appears when the mouse pointer hovers over it.

You can change the font style, add a border, or change the background color.

If you have removed the underline from links, you can add it for the hover effect.

a:hover {font-weight: bold; border: solid 2px blue; text-decoration: underline; background: red;}

Try it!

Used to control how link text appears when the TAB is used to navigate a page.

You can add the same properties as you have with the hover selector.

a:focus {font-weight: bolder; border 4px green; text-decoration: underline;}

Try it!