CSS Week 4 Examples

Pseudo Elements

first-line

This is an example of the first line, small caps pseudo element.
This second line should appear without the element applied.

This is a normal paragraph. Now go on to next topic.

first-letter

The first letter should be in color. The rest are not.


Anchor states

active, link, visited, and hover

Link state applies to unvisited links.
Visited state obviously applies to visited links.
The active state never happens.
Hover only applies when the link has not been visited.

MSN
Google
CNN
Yahoo


Text spacing

line-height

10pt

This paragraph has a line-height of 10pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


20pt

This paragraph has a line-height of 20pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


30pt

This paragraph has a line-height of 30pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


2

This paragraph has a line-height of 2. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


200%

This paragraph has a line-height of 200%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


50%

This paragraph has a line-height of 50%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.



letter-spacing

10pt

This paragraph has a letter-spacing of 10pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


20pt

This paragraph has a letter-spacing of 20pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


30pt

This paragraph has a letter-spacing of 30pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


2

This paragraph has a letter-spacing of 2. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


-2

This paragraph has a letter-spacing of -2. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


-1

This paragraph has a letter-spacing of -1. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


200%

This paragraph has a letter-spacing of 200%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


50%

This paragraph has a letter-spacing of 50%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


-0.5

This paragraph has a letter-spacing of -0.5. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.



word-spacing

10pt

This paragraph has a word-spacing of 10pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


20pt

This paragraph has a word-spacing of 20pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


30pt

This paragraph has a word-spacing of 30pt. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


2

This paragraph has a word-spacing of 2. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


-2

This paragraph has a word-spacing of -2. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


200%

This paragraph has a word-spacing of 200%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.


50%

This paragraph has a word-spacing of 50%. Large percentages of high school seniors are posting weak scores on national math and reading tests even though more of them are taking challenging courses and getting higher grades in school, say two new government reports released Thursday.



vertical-align

This paragraph will demonstrate vertical align property.
The following word will be sub aligned: sub

The following word will be super aligned: super

The following word will be baseline aligned: baseline

The following word will be text-top aligned: text-top

The following word will be text-bottom aligned: text-bottom

The following word will be 50% aligned: 50%

The following word will be -25% aligned: -25%

The following word will be -2 aligned: -2

The following word will be 1 aligned: 1

The following word will be -1 aligned: -1

The following word will be 2 aligned: 2

The following word will be top aligned: top

The following word will be middle aligned: middle

The following word will be bottom aligned: bottom



Hanging indent

Major airports in New York:

JFK
La Guardia
Newark



Force a page break



The !important attrobute

The !important doesn't work when it comes from an external style file, but works as embedded or inline.

Here is an example of inline overriding using !important. Notice that the sentence has an inline font size of 18pt, but an earlier style of 30pt with !important supercedes it. This is 18pt, but the !important declaration overrides it.

Here is the code for it:

<span style="font-size: 30pt !important>
  <span style="font-size: 18pt;"> This is 18pt, but the !important declaration overrides it.
  </span>
</span>