CSS Syntax:

CSS (Cascading Style Sheets) is used to style and format HTML elements, making webpages visually appealing. CSS follows a specific syntax to apply styles efficiently.

1- Basic Structure of CSS

A CSS rule consists of:

Selector → Specifies which HTML element(s) the style applies to.
Property → Defines what aspect of the element will be styled.
Value → Specifies the setting for the property.

General Syntax:

selector {
  property: value;
}

For example, if we want to change the text color of all paragraphs (<p>) to blue, the CSS rule will be:

p {
  color: blue;
}

Here:

p → Selector (targets <p> elements).
color → Property (specifies what to change).
blue → Value (sets the color to blue).

2- CSS Properties and Values

CSS has different properties that define the appearance of elements. Below are some commonly used properties:

Text Styling Properties

color → Sets text color (color: blue;).
font-size → Defines text size (font-size: 18px;).
font-weight → Specifies text thickness (font-weight: bold;).
text-align → Aligns text (text-align: center;).

Background Properties

background-color → Sets background color (background-color: yellow;).
background-image → Adds a background image.

body {
  background-image: url("image.jpg");
}

Box Model Properties (Spacing & Size)

margin → Adds space outside an element.
padding → Adds space inside an element.
border → Creates a border around an element.

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

3- Example Usage

Here is a complete example applying different CSS properties to an HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <style>
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            font-size: 18px;
            color: black;
            line-height: 1.5;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of how <span class="highlight">CSS</span> works.</p>
</body>
</html>

Summary

CSS rules consist of selectors, properties, and values.
Selectors target specific HTML elements.
Properties define what style to apply.
Values specify the settings for the style.
CSS can be applied inline, internally, or externally.