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
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 1 of 2

In this chapter you will learn:

  • The importance of lists
  • Different style options for lists
  • Different types of lists
  • Adding images to the lists
  • Setting position for a list
CSS allows you to customize your web pages using lists. Lists are a basic way of organizing data in a linear way, one item after another. They format the data in an easy-to-use method.
List-style property allows you to specify the list-style-type, list-style-position and list-style-image properties. These properties can also be used independently. Their use is explained below.

This property specifies the style of list-item maker (or bullet point) associated with a list item.

  • There are two types of lists: Unordered list and Ordered list.
  • Unordered list contains the values: square, circle, disc, none.
      none -This means there will be no list marker.
      disc -This will look as a  filled circle.
      circle - This will look as an empty circle.
      square - This will look like a solid square.
  • Ordered list contains the values: decimal, upper-roman, lower-roman, lower-alpha, upper-alpha etc.
      decimal - The marker is a number, for example, 1,2,3,4 etc.
      lower-roman - The marker is in lower roman, for example, i, ii, iii, iv etc.
      upper-roman - The marker is in upper roman, for example, I, II, III, IV etc.
      lower-alpha - The marker is lower case ASCII letter, for example, a, b, c, d etc.
      upper-alpha - The marker is upper case ASCII letter, for example, A, B, C, D etc.
  • By default, a list-item-type has value disc.
Example for Un-Ordered List
ul { list-style-type :circle;}
  • strawberry              
  • vanilla              
  • chocolate              
  • butterscotch
Example for Ordered List
ol { list-style-type : lower-roman;}
  1. strawberry
  2. vanilla
  3. chocolate
  4. butterscotch

CSS also lets you specify an image by URL in place of the normal bullets.

  • This property lets you use a custom graphic for bullets.
  • List-style-image has values: none, url(<url>)
      none - This value displays no image.
      url - This specifies the path to the image.
  • If list-style-image is none, then list-style-type marker would be used.
  • If image loading is turned off, list-style-type marker would be used.

ul { list-style-image : url ( 'Redo.gif ');}







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