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 > Basics CSS Concepts

CSS Tutorial - Basic CSS Concepts

    Page 2 of 2

Class Selector

As mentioned above, grouping is used to bring uniformity to the web pages. But, what do you do if you want to apply different styles on the same element? Class Selectors enable you to do so. A Selector can have different classes, which means allowing the same element to follow different styles.

Syntax of Class Selector


               .class selector { property : value;}


For example, if you want to have two different styles of lists in your document - one with red color and the other one with green color, you can write:



   li . red {color : red , font-size= small}
   li . green {color : green , font size = large}


To indicate the class of an element, the class attribute is specified in the HTML document.

In the following HTML document, two different classes are created. One class has the value 'red' and the other has the value 'green'. When the calss, class="red" is encountered, then the selector red will be selected. Its properties and their corresponding values will be set.



                     < li class="red">
                               What is the capital of America?
                     <li class="green">

                                Washington D.C. is the capital of America.


The output of this code would be as follows:


What is the capital of America?


Washington D.C. is the capital of America.


Classes can also be declared without specifying the element .

In the example given below, wherever the class red or green is encountered in the html document, irrespective of the element with which it has been used, the corresponding styles would be applied.



   .red { font-size : small }

   .green {font-size : large }


In this chapter you have learnt:

  • How to add styles in a web page
  • Syntax of CSS
  • Uses of Grouping
  • How to apply classes to select styles
Review Questions

Fill in the Blanks

  1. The _____ technique is used by various tags to share same styles.
  2. A _____ is any HTML element on which various properties are applied.
  3. Besides selector, _____ enables you to apply different styles on the same element.
  1. Grouping
  2. Selector
  3. Class-selector

State whether True or False

  1. A single selector can have only one property.
  2. Various properties can be shared by various HTML elements.
  3. Classes can be declared without specifying the element.
  1. False
  2. True
  3. True
Write a few problems with their solutions, with different style options, using grouping.

View Code              View Runtime
What's Next

The next chapter will acquaint you with the concepts of linking style sheets with your web page. It will also tell you  the different ways of linking style sheets and SPAN and DIV tags.

                 Hop over to the next chapter to get a close-up of linking the style sheets.
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.