Download presentation
Presentation is loading. Please wait.
Published byDenis Hall Modified over 9 years ago
1
CSS Text Formatting By: Sakeenah Benjamin & Miss Deephouse
2
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;}
3
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;}
4
Background http://www.w3schools.com/css/css_background.asp
5
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)
6
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
7
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!
8
Activity
9
Positioning http://www.w3schools.com/css/css_positioni ng.asp http://www.w3schools.com/css/css_positioni 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
10
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.