CSS Selectors / CSS Basic Text Formatting

CSS SELECTORS

Class Selectors

There will be times when you will want to have the same tag apply different, for instance you may want two different paragraphs to look different. For this we can use what we call the class selector. To put it simply we “name” a style and refer to it by class. The class name is allways preceded by a period.

EXAMPLE:

In CSS we may have something that looks like this:

p.bodyText {font-family : verdana, arial, helvetica, sans-serif;}

To apply that style we have to refer to it by using a class attribute in HTML:

<p>

Notice how the class attribute is referring to what the class is “named”. This style will only apply to paragraphs as the p selector and other selectors will not be allowed. NOTE: the designer chooses what to name the classes and must follow normal naming rules (case sensitive, no spaces, no funny characters, and avoid using numbers at the front of the name ). In the example, “bodyText” is a name that is made up and is not a name create by the CSS language.

CSS – Generic Class

There will be times when you want to apply the same style, in the previous example the style can only be applied to paragraphs. For this we use what is called the GENERIC CLASS. It pretty much is the same thing except we leave out an html selector:

CSS

.bodyText {font-family : verdana, arial, helvetica, sans-serif;}

To apply that style we have to refer to it by using a class attribute in HTML and in this case we can use any HTML tag:

<p>

<body>

<h3>

CSS – ID Selectors

In many ways, ID selectors are the similar to the class elector with just a few differences. First is that the ID selector is preceded by a number sign (#) instead of a period.

EXAMPLE:

#bodyText {font-family : verdana, arial, helvetica, sans-serif;}

Secondly, in HTML we use an ID attribute instead of a CLASS atribute:

What’s the difference? Well, not much as CLASS and ID selectors do work in the same manner. However, “in theory”, we are supposed to use the ID selector once and only once within an HTML document. Think of it like a driver license ID number – it is

CSS – FONT PROPERTIES

font-family

values: family-name | generic-family
initial value: UA Specific
applies to: all elements
Inherited: Yes

The following code will cause the paragraph to choose a font based on the order listed in the rule. Here is an example listing each of the values. Notice you can specify an exact font by using single quotation marks – needed when there is one or more spaces in the name.
example: P.family {font-family:’AGaramond bold’,times,serif;}

The font of this paragraph is determined by the font-family style.

Generic families: serif, sans-serif, cursive, monospace, fantasy.

font-weight

The darker and “more bold” a font appears, the heavier it is said to be. This is referred to font-weight. A font family may have different variants of these (ex. gil sans, gil sans light, gil sans, bold, gil sans black, gil sans ultra black…) . The downfall in trying to code for these specific fonts is that the user would have to have these fonts loaded for them to appear. Thus we have the font-weight style.
example: P.weight {font-weight:bold;}

This paragraph should be using a bold font.

Note:

Using the numbers can give you unpredictable results, use carefully! They are useful when used as a relative value.

font-size

According to the CSS1 specification, the difference between one absolute size and the next should be about 1.5 going up, 0.66 going down the scale. ex. if medium is 10px, then large should be 15px. In the real world it will be different between browsers and in CSS2 it’s 1.2 times.
In the following example the text should be very small.
example: P.xxsmall {font-size:xx-small;}

This paragraph should be very small and hard to read.

example: P.xxlarge {font-size:xx-large;}

This paragraph will be very large.

example: P.12px {font-size:12px;}

This font in this paragraph will be 12px.

Note:

Be careful with inherited items

font-style

values: italic | oblique | normal
initial value: normal
applies to: all elements
Inherited: yes
example: p.italic {font-style:italic;}

This text should be italic.

font-variant

values: small-caps | normal
initial value: normal
applies to: all elements
Inherited: Yes
example: P.smallcaps {font-variant:small-caps;}

Here is an example of small caps.

Note:

If the font being used does not support small caps, the result will either be, the font will display as normal or all uppercase

Using Shorthand with the Font Property

values: font-style | font-variant | font-weight | font-size | font-family
initial value: refers to individual properties
applies to: all elements
Inherited: Yes

Writing out all of these font styles can get tedious, so using shorthand we can put them together keeping our code nice and neat.
example: P.shorthand {font: italic small-caps 900 30px times;}

The styles for the font used in this paragraph are defined by one line of code.

Note:

The styles can be written in any order.
If the predefined value of a style is normal, it can be left out of the declaration.

CSS – TEXT PROPERTIES

text-indent

values: length | percentage
initial value: 0
applies to: block level elements – PRE, H1-6, BLOCKQUOTE…
Does not apply to: inline elements – B, A HREF, IMG …
Inherited: Yes

The following code will cause the first line of a paragraph to indent by 0.25 inches.
example: P {text-indent:0.25in;}

Note:

Try using a negative value
Try using a percentage value

text-align

values: left | center | right | justify
initial value: UA specific
applies to: block level elements – PRE, H1-6, BLOCKQUOTE…
Does not apply to inline elements: B, A HREF, IMG …
Inherited: Yes

The following code will cause the first line of a paragraph to be centered.
example: P.center {text-align:center;}

Note:

You can cause the centering of elements with both text and images inside of them
Be careful in using justify as it may unpredictable

line-height

values: length | percentage | number | normal
initial value: normal
applies to: all elements
Inherited: Yes

Line-height is similar to leading used in desktop publishing (well, kinda). WHAT IS LEADING? It is the extra space between lines of text above and beyond the font’s size. Line-height, in broad terms, increases or decreases the vertical space between lines of text. This is done by dividing the leading in half and applying each half leading to the top and bottom of the text. WHAT DOES THAT MEAN????
Well, if the leading is 14 points, and the line-height is set to 18 points, the difference(4 points) is divided in half, and each half applied to the top and bottom. Whew! Let’s try it out.
example: P.lineheight {line-height:30px;}

Note:

Be careful with inherited items
Be extremely careful when elements with different sizes are on the same line

vertical-align

example: b.sub {vertical-align:sub}

Note:

Be careful with inherited items
Be extremely careful when elements with different sizes are on the same line

word-spacing

values: length | normal
initial value: normal (0)
applies to: all elements
Inherited: Yes

Word spacing will accept a value that is either positive or negative. This value is added to the usual space between words.
example: P.wordSpacing {word-spacing:10px;}

Note:

Be careful with inherited items
Be extremely careful when elements with different sizes are on the same line

letter-spacing

values: length | normal
initial value: normal (0)
applies to: all elements
Inherited: Yes

Letter spacing is similar to word spacing except that letter spacing affects the space between letters or characters.
example: P.letterSpacing {letter-spacing:10px;}

Note:

Be careful with inherited items
Be extremely careful when elements with different sizes are on the same line

text-transform

values: uppercase | lowercase | capitalize | none
initial value: none
applies to: all elements
Inherited: Yes

Causes text to be transformed to the value specified value.
example: P.transform {text-transform:capitalize;}

Note:

Unexpected results may occur as different browsers may recognize the start of words differently. ex. word-spacing may appear as Word-Spacing or Word-spacing

text-decoration

values: none | underline | overline | line-through | blink (DO NOT USE BLINK)
initial value: none
applies to: all elements
Inherited: no

Causes text to be transformed to the value specified value.
example: P.underline {text-decoration:underline;}

Note:

you can use the value of none with the A tag to get rid of the underline for links

Exercises

Style your resume using CSS text and font properties

30 Minute Surfing

Go to a site and view the source code. See if you can start recognizing the structure of the HTML page. See if you can find the CSS.

Resources

w3schools.com

Extras

http://neilrpearce.co.uk
CNN New website deconstructed :
http://www.webdesignerdepot.com/2009/11/cnns-new-website-design-deconstructed/