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 Alignment The 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 Decoration The 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

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: 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 tag

This tag is used to separate a page into logical sections Within the tag, you can use the align property …. (align = “left” align = “center” align = “right”) For other formatting, use style sheets!

Activity

Positioning ng.asp ng.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 Content Naviga tion Activity Use the 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.