• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Css » Tutorial » CSS Syntax and Selectors
Next →
← Prev

CSS Syntax and Selectors

By Dinesh Thakur

In order to create a style sheet, we have to specify a set of rules known as CSS rules or Styles. These rules are used to control the appearance of various elements that appear in the associated HTML documents. The general syntax for specifying the rule is  CSS SYNTAX

A selector is an element(s) to which each CSS rule is applied. It may be a HTML tag name (without a starting and a closing brace), class or ID attributes.

Property specifies the attribute that you want to change corresponding to a selector. The value that the property can take is specified by Value. In other words, Value is a physical characteristic of the property and Property declares what should be formatted. The Property and Value are separated by a colon (:) and enclosed in curly braces. Each property value pair is known as a declaration. If multiple declarations exist then each declaration must be separated by a semicolon (;). The semicolon tells the browser where a declaration ends and other begins. Now let us consider some rules,

p {color: Red;} 
 h1 {color : green; font-style : italic;}  
body  {  color : #FFOOFF;  font-family : Arial;  font-size : i6pt;  } 
 p { }

In the first rule, p represents selector, color represents the property and Red represents the value. On applying this rule, the color of all <p> element’s contents in HTML document will be set to Red.

In the second rule, h1 represents selector and color: green and font=style : italic are the two declarations used. Each declaration is separated by a semicolon and enclosed in the curly braces. CSS RULE

This rule when applied will set the color and font-style properties of <HI> tag in HTML document to their respective values green and italic respectively.

Similarly, the third rule when applied will set the body’s properties of the HTML document. The text enclosed in <body> element will be such that color will be #FFOOFF, font-family will be Arial and font-size will be 16pt.

The last rule does not contain any declaration so it does nothing. Now let us consider three different rules,

h1 {color : Red;} 
 h2 {color : Red;} 
 p {color : Red;}

We notice that in the above three rules, all the selectors contains the same declarations so instead of giving them separately, you can group the selectors h1, h2 and p separating each by a comma followed by declaration as follows

h1,h2,p {color : Red;}

You’ll also like:

  1. What is Parser (Syntax analysis)? Error Handling and Recovery in Syntax Analyzer
  2. Syntax Directed Definition (SDD) and Types of Syntax Directed Definitions
  3. CSS margin property
  4. CSS padding property
  5. CSS background property
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

CSS Tutorials

CSS Tutorials

  • CSS - Font Property
  • CSS - Background Property
  • CSS - CSS - Border-Style Property
  • CSS - Text-Decoration Property
  • CSS - Tables
  • CSS - Position
  • CSS - Syntax and Selectors
  • CSS - List
  • CSS - Margin
  • CSS - Padding

Other Links

  • CSS Tutorials - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2025. All Rights Reserved.

APPLY FOR ONLINE JOB IN BIGGEST CRYPTO COMPANIES
APPLY NOW