COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Syntax

Learn the basic syntax of CSS and understand how selectors, properties, and values form a CSS rule.

What is CSS Syntax?

CSS syntax is the standard way of writing CSS rules. It tells the browser which HTML element should be styled and what style should be applied.

A basic CSS rule contains a selector followed by one or more declarations.

Parts of a CSS Rule

Selector

Selects the HTML element

→

Property

What should change

→

Value

How it should change

CSS Syntax

selector {
    property: value;
}

This is the basic structure that you will use when writing CSS rules.

Example 1: Basic CSS Rule

Let us create a paragraph and change its text color using CSS.

Code

<!DOCTYPE html>
<html>
<head>

    <style>

        p {
            color: blue;
        }

    </style>

</head>

<body>

    <p>
        Learning CSS Syntax
    </p>

</body>
</html>

How It Works

p is the selector.
color is the property.
blue is the value.
The semicolon ; ends the declaration.

Output

Learning CSS Syntax

Example 2: Multiple Declarations

A selector can contain multiple declarations. Each declaration contains a property and value.

Code

<!DOCTYPE html>
<html>
<head>

    <style>

        p {
            color: green;
            font-size: 22px;
            text-align: center;
        }

    </style>

</head>

<body>

    <p>
        Welcome To Ciit  Institute 🤓❤️..!
    </p>

</body>
</html>

How It Works

color: green; changes the text color.
font-size: 22px; changes the text size.
text-align: center; moves the text to the center.

Output

Welcome To Ciit Institute 🤓❤️..!

Important CSS Syntax Rules

The selector identifies the HTML element.
Curly braces { } contain CSS declarations.
A property and value are separated by a colon :.
Each declaration normally ends with a semicolon ;.
Multiple declarations can be written inside one CSS rule.

Remember:

CSS syntax follows a simple pattern: Selector → Property → Value. Once this structure is understood, writing basic CSS becomes much easier.

Summary

CSS syntax defines how CSS rules are written. A rule contains a selector and declarations. Each declaration contains a property and a value. Curly braces contain the declarations, while colons and semicolons separate the parts of a rule.