ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > CSS Tutorial > Formatting Text
 
 
CSS Tutorial - Formatting Text
    Page 2 of 2
 

Text-Indent

  • Text indent property enables you to convert how the first line of any element is indented without having to use preformatted HTML tags or inserting spaces manually. Normally, the first line of every paragraph is slightly indented.
  • The value of text-indent can be specified using either percentage or length values.
  • Percentage refers to the parent element's width.
  • Negative values are also permitted.
  • Common-use of text-indent would be to indent a paragraph.
 

Example

 

h5{ text-indent : 30%;}or

                   p{ text-indent : 50px;}

                    HTML, Hypertext Markup language, is the overall name for the tags you use to mark up your web pages, so they display and link to other pages correctly. HTML is the official standard endorsed by the World Wide Web Consortium(W3C), but is also a hodgepodge assortment of proprietary extensions and kludges invented more by marketers than by any standards body.

The above paragraph has already been indented 50 pixels.

 
 
Text-Shadow
 
  • This property accepts shadow effects to be applied to the text of the element.
  • Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.
  • A shadow offset is specified with two length values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. The second length value specifies the vertical distance below the text.
  • The color value may optionally be specified before or after the length values of the shadow effect.
 

Example

 

                    h2 { text-shadow : 3px 3px red;}

 

 
 
Text-Transform
 
  • This property controls capitalization effects of letters.
  • It can have the values: none, capitalize, uppercase, and lowercase.
      none - This means no capitalization is made.
      capitalize - This sets the first letter of each word to uppercase.
      uppercase - This sets all letters to uppercase.
      lowercase - This sets all letters to lowercase.
 

Example

 

p { text-transform : none;}

HTML, Hypertext Markup Language, is the overall name for the tags you use to mark up your web pages so they display and link to other pages correctly. HTML is the official standard endorsed by the World Wide Web Consortium(W3C), but is also a hodgepodge assortment of proprietary extensions and kludges invented more by marketers than by any standards body.                        

                   p { text-transform : capitalize;}

HTML, Hypertext Markup language, Is the overall name for the tags you use to mark up your web pages so they display and link to other pages correctly. html is the official standard endorsed by the World Wide Web Consortium(W3C), but is also a hodgepodge assortment of proprietary extensions and kludges invented more by marketers than by any standards body.                        

                   p { text-transform : Uppercase;}

HTML, Hypertext Markup language, IS the overall name for the tags you use to mark up your web pages so they display and link to other pages correctly. html is the official standard endorsed by the World Wide Web Consortium(W3C), but is also a hodgepodge assortment of proprietary extensions and kludges invented more by marketers than by any standards body.        

                   p { text-transform : lowercase;}   

HTML, Hypertext Markup language, is the overall name for the tags you use to mark up your web pages so they display and link to other pages correctly. html is the official standard endorsed by the World Wide Web Consortium(W3C), but is also a hodgepodge assortment of proprietary extensions and kludges invented more by marketers than by any standards body.

 

 
 
White-Space
  • This property will determine how white-space inside an element is handled.
  • It can have the values- normal, pre, or nowrap.
      normal- This commands the browser to ignore the white space.
      pre- This will show all spaces in the text rather than ignoring all occurrences of more than one space.
      nowrap- This will never wrap the text, the text will continue on the same line until a <br> tag is encountered.
 
Example
    p { white-space : normal;}
HTML is the overall name for the tags you use to mark
up your web pages
 
p { white-space : pre;}
HTML is the overall name for the tags you use to mark
up your web pages
 
p { white-space : nowrap;}
HTML is the overall name for the tags you use to mark up your web pages
 
 
Word-Spacing
 
  • With word spacing property, you are able to specify the exact value of the spacing between your words.
  • You can increase or decrease the space between words.
  • It can have the values- normal or length.
  • Negative values are allowed.
      normal- This defines normal space between words.
      length- This defines a fixed space between words.
  • By default, word-spacing is normal.
 

Example

 

p { word-spacing : 30 px;}

HTML forms, are used mainly to collect information from the user.

      p { word-spacing : -1.5px;}

HTML forms, are used mainly to collect information from the user.


 

 
Summary
 

In this chapter you have learnt:

  • Formatting of text using different style options
  • Changing the text color and direction
  • Increasing or decreasing the letter spacing and word spacing
  • Aligning text and other possible transformations
 
Review Questions
 

Fill in the blanks

  1. RGB stands for _____, _____ and _____.
  2. Direction of the text can have values _____ and _____.
  3. The _____ property allows increasing and decreasing of spaces between characters.
  4. The _____ property controls capitalization effects of letters.
Solutions
  1. Red, Green, Blue
  2. rtl, ltr
  3. Letter-spacing
  4. Text-transform

True or False

Direction of the text can be set as up-to-down and down-to-up.

  1. Letter spacing property can have negative values.
  2. The default value of text align property is center.
  3. Overline value defines a line over the text.
Solutions
  1. False
  2. True
  3. False
  4. True
Exercise
Using different style options, format certain text.
Solution
View Code         View Runtime
 
 
What's Next
The next chapter will acquaint you with the basic concepts of background colors and images. It will describe how to choose background colors for a web page.

                      Hop over to the next chapter to get a web page background close-up.

 

 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.