CSS Syntax and Rules

CSS Syntax & Rules:

CSS (Cascading Style Sheets) defines the visual appearance of HTML elements on a webpage.

CSS syntax consists of two main parts:

selector {
    property: value;
}

CSS rules follow a structured format:

h1 {
    color: blue;
    font-size: 24px;
    margin-bottom: 20px;
}

Here:

h1 is the selector (targets all <h1> elements).
color, font-size, and margin-bottom are properties.
blue, 24px, and 20px are respective values. Each CSS declaration ends with a semicolon (;).

Selectors help you pinpoint which HTML elements to style.

Type	Example	Explanation
Element	`p {}`	Selects all paragraphs (`<p>)`.
Class	`.className {}`	Selects elements with a specific class (class="className").
ID	`#uniqueId {}`	Selects one element with a unique ID (id="uniqueId").
Universal	`* {}`	Selects all elements on the page.
Attribute	`input[type="text"] {}`	Selects elements by attribute and value.
Pseudo-class	`a:hover {}`	Selects elements based on their state or user interaction.

CSS can be applied in three ways:

<p style="color:blue;">Inline styled text.</p>

<head>
  <style>
    h1 { color: green; }
  </style>
</head>

 style.css

body {
  background-color: white;
}

<head>
  <link rel="stylesheet" href="style.css">
</head>

Comments explain or disable parts of your CSS.

/* This is a comment, ignored by browser */

/* .hidden {
    display: none;
} */