CSS Introduction

CSS stands for Cascading Style Sheets.
Used to describe the form of a HTML pages to be displayed.
CSS saves a lot of work.
It allows designers and developers to create and control multiples layout of all webpages at a time.
CSS allows wide range of properties and methods.
  1. It applies styles like fonts, color, size, etc.
  2. Different styles can be applied to a web page in multiple ways.
  3. Control's the layout of a webpage.
  4. We can create high animations and transitions.
  5. bulids a responsive and attrative web pages.


<!DOCTYPE html>
  <title>Classes and IDs Example</title>
    .important {
      font-weight: bold;
      color: red;
    #unique {
      color: blue;
  <p>This is a <span class="important">very important</span> message.</p>
  <p id="unique">This is a unique element with its own styling.</p>

CSS Syntax

CSS syntax consists of rules that define how to style HTML elements. Each rule consists of a selector and a declaration block.
The selector specifies which HTML elements to style, and the declaration block contains one or more property-value pairs that define the actual styles to be applied.


selector {
  property1: value1;
  property2: value2;
  /* more properties and values */

Syntax Explanation

Let's see how the syntax works.




  1. Specifies which HTML elements the styles will be applied to.
  2. Types include Element Selector (targets specific types like p, h1, div), Class Selector (targets elements with a specific class like .classname), ID Selector (targets elements with a unique ID like #elementID), and Attribute Selector (targets elements with specific attributes like [type="text"]).


Represents the CSS attribute you want to modify, such as color, font-size, margin, etc. Many CSS properties allow you to control different aspects of an element's presentation.


The setting applied to a property. For example, for the property color, the value could be red, #00ff00, or rgb(255, 0, 0).

Declaration Block

A group of property-value pairs enclosed in curly braces {}. Multiple declarations are separated by semicolons ;

Quick Recap

Topics Covered

CSS Syntax

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example 1

Example 1 Example 2 Example 3 Example 4 Example 5