1. Basic Syntax

CSS (Cascading Style Sheets) syntax consists of rules that define how HTML elements are styled. Each CSS rule has a selector and a declaration block.

Syntax: 

  selector {
    property: value;
}
  • Selector: The HTML element to which the styles will be applied.
  • Property: The aspect of the element to be styled (e.g., color, font-size).
  • Value: The value assigned to the property (e.g., red, 16px).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic CSS Syntax</title>
    <style>
        h1 {
            color: navy;
            font-size: 24px;
        }
        p {
            color: gray;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS</h1>
    <p>This is a paragraph styled with CSS.</p>
</body>
</html>

2. Selectors

Selectors are used to target HTML elements for styling. Here are some common types of selectors:

2.1 Universal Selector

The universal selector (*) applies styles to all elements on the page.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Selector Example</title>
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <p>This paragraph and all other elements will use border-box sizing.</p>
</body>
</html>

2.2 Type Selector

The type selector targets elements based on their tag name.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Type Selector Example</title>
    <style>
        h2 {
            color: teal;
        }
    </style>
</head>
<body>
    <h2>This is a heading styled with a type selector.</h2>
</body>
</html>

2.3 Class Selector

The class selector targets elements with a specific class attribute. It is prefixed with a dot (.).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class Selector Example</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="highlight">This paragraph has a background color and bold text.</p>
</body>
</html>

2.4 ID Selector

The ID selector targets a single element with a specific ID attribute. It is prefixed with a hash (#).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Selector Example</title>
    <style>
        #unique {
            color: orange;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="unique">This paragraph is styled with an ID selector.</p>
</body>
</html>

2.5 Attribute Selector

The attribute selector targets elements based on their attributes.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <style>
        input[type="text"] {
            border: 1px solid blue;
            padding: 5px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="This is a text input field">
</body>
</html>

2.6 Pseudo-class Selector

Pseudo-class selectors apply styles based on the state of an element.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-class Selector Example</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">Hover over this link to see the effect.</a>
</body>
</html>

2.7 Pseudo-element Selector

Pseudo-element selectors style specific parts of an element.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-element Selector Example</title>
    <style>
        p::first-line {
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a paragraph where the first line is styled with a pseudo-element selector.</p>
</body>
</html>