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

CSS Tutorial - Basic CSS Concepts

   
                                                                             Page 1 of 2
 
Overview
 

In this chapter you will learn:

  • How to write a basic CSS program
  • Syntax of CSS
  • Grouping of selectors
  • Class Selector

This chapter familiarizes you with some basic terms and concepts of CSS. But before
beginning, you should be familiar with how the first style should be written. The following is an illustration of how this is done:

Example

<html>

<head>

<STYLE Type="text/css">
      h1{font-family:arial}
   p{font-size:12pt ; font-style: italic}
</STYLE>
</head>
<body>
<h1>Mahatma Gandhi</h1>
 
<p>Mahatma Gandhi's real name was Mohandas Karamchand Gandhi. He was born on October 2, 1869 at Porbandar, Gujarat, India. His father's name was Karamchand Gandhi and his mother's name was Putlibai.
 
</body>
</html>
 
 

Syntax

Selector {property: value}

 For example:

                                        body {color: red}   or

                                        p {font-family: “Times New Roman”}     or

                                        h1 {font-weight: bold} etc

 

Selector

Selector is  usually  an  HTML  element or a tag on  which various properties are applied. Each property has its own value and any number of properties with their corresponding values can be set, in a Selector.

As shown in the example given above; body, p, and h1 are Selectors while color, font-family and font-weight are their respective properties.

Example

 

 h1 {font-size: 22px; text-align: center; color: red; font-family: Arial;}

 

This can also be written as:  

Example

 

 h1 {
                               Font-size: 22px;
                               Text-align: center;
                               Color: red;
                               Font-family: Arial;  
 }

 

Grouping of Selectors

As can be seen, a single selector can have a  number of properties. Similarly,  there  can be a  number of Selectors sharing one property. This is known as Grouping of Selectors.

Example

 

   h1 , body , p , ul
   {
         color : green;
   }

 

 

Example

 

<td valign=top> classic jokes </td>

 

                                 In the above example, the header element, body element, paragraph element and unordered list element have been grouped together. All these elements will have a green color.

Why is Grouping used?

  •  To share the same styles, i.e. if  the selector elements are to share the same set of properties, (e.g. font, size, color, etc.) grouping is used.

  • To give same style properties to different elements at once. 

  • To save time while adding properties as well as while editing properties in the elements.
Note
   The list of selectors should be separated by commas
 
 
                 

 

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