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 > Working with Lists
 

CSS Tutorial - Working with Lists

    Page 2 of 2
 
 
List-Style-Position
 

With CSS it is possible to determine how the list-item marker will be placed in relation to the content of the list-item.

  • It can have the values: outside or inside.
  • Outside- This is the default value. This marker is placed outside the text. Wrapping text is not indented under the marker. Only the first line is indented. Subsequent lines are not aligned under the marker.
  • Inside - This marker is placed inside the text. The text lines up with the marker on the left margin. It makes the second and subsequent lines of a list item left-indented with the marker.
 
Example for Outside Marker
ul{ list-style-position : inside;}
    Select your flavor:
  • vanilla
  • strawberry
  • black currant
  • chocolate
 
Example for Inside Positon
ol {list-style-position: outside;}
    Select your subject :
  1. java
  2. c/c++
  3. .net
  4. unix
 
 
Summary
 

In this chapter you have learnt:

  • How lists are used for organizing data
  • Various list style options available
  • Different list styles and their corresponding values
  • Employing images in lists, in place of the normal bullets
  • Positioning the list-item marker
 
Review Questions
 

Fill in the Blanks

  1. Lists are used to organize data in a _____ manner.
  2. Types of lists are ______ and _____.
  3. Square, circle, disc, and none are the values of _____ list-type.
  4. Values for list-style-image are _____ and _____.
Solutions
  1. Linear
  2. Unordered list, ordered list
  3. Unordered
  4. None, URL

State whether True or False

  1. If an ordered-list-type has value as lower-alpha, then it can start the list from 'd' alphabet also.
  2. The default list-item-type has value none.
  3. List-style-position determines how the list-item-marker will be placed in relation to the marker of the list.
  4. The default list-style position value is inside.
Solutions
  1. True
  2. False
  3. False
  4. False
Exercise
Create a list showing all the list styles.
Solution
 
 
What's Next

The next chapter will introduce the concepts of setting dimension around objects. The chapter will also discuss setting the height, and width of various HTML elements.

              Hop over to the next chapter to get a close-up on dimension properties. 

                 
 

 

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