CSS Text Formatting

By: Sakeenah Benjamin & Miss Deephouse

Text Color

The color property is used to set the color of the text.

Example: name – a color name .. Like “red”.RGB- an RGB value, like “rgb(255,0,0)”Hex- a hex value, like “#ff0000”.

Text AlignmentThe text align property is used to set the

horizontal alignment of a text. The text can be centered, left, right or just justified. When its set to justify, each line is stretched so that every line has equal width and the left right margins are straight.

Example: h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

Text DecorationThe text-decoration property is used to set or

remove decorations from text. It is mostly used to remove underlines from link for design purposes.

Example:a {text-decoration:none;}h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}

Background

http://www.w3schools.com/css/css_background.asp

Activity

• Use CSS and html• In CSS Sheet, specify one ID and one class. Use the

ID once only in your html. Use the class at least twice.

• Experiment with Text, background, and one other property of your choice from the W3 Schools “CSS Styling” tutorials

• You can use either an external style sheet or an internal style sheet (in the heading, like our first CSS activity)

Page Structure: <div>s

• In the past, pages were structured with tables.• This was cumbersome and annoying.• I did not teach this method because it is

passé..• The current method involves the <div> tag

<div>

• This tag is used to separate a page into logical sections

• Within the <div> tag, you can use the align property …. (align = “left” align = “center” align = “right”)

• For other formatting, use style sheets!

Activity

Positioning

• http://www.w3schools.com/css/css_positioning.asp

~Try it Yourself 1: Move “Some more text” farther right

~Try it Yourself 2: Move the headings~Try it Yourself 3: Fix the overlapping

Main ContentMain ContentNavigation

Navigation

Activity

• Use the <div> tag to set up a block of text for a navigation bar and one for the main content of your website.

• Use an external style sheet to define the styling of each div.

• Arrange the areas you created so that the navigation bar runs down the left side and the main content area sits to the left of that.