CSS Syntax & Structure
CSS syntax defines how CSS rules are written. Each rule tells the browser which HTML element to style and how to style it.
CSS Syntax
A CSS rule consists of a selector and a declaration block.
Example 1: Simple CSS Rule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>Styled using internal CSS</p>
</body>
</html>
Output
This paragraph text is blue.
Explanation:
•
•
•
• Property and value are separated by a colon
•
p is the selector•
color is the property•
blue is the value• Property and value are separated by a colon
:
CSS Declaration Structure
selector {
property: value;
}
Declaration Rules:
• Declarations are written inside curly braces
• Each declaration ends with a semicolon
• Multiple declarations can be added
• Declarations are written inside curly braces
{ }• Each declaration ends with a semicolon
;• Multiple declarations can be added
Example 2: Multiple Declarations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: green;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Syntax Example</h1>
</body>
</html>
Output
CSS Syntax Example
Important Notes
✔ CSS is case-insensitive, but lowercase is recommended
✔ Always end declarations with semicolons
✔ Proper formatting improves readability
✔ Always end declarations with semicolons
✔ Proper formatting improves readability
Frequently Asked Questions (FAQ)
What is a selector?
A selector targets the HTML element that you want to style.
Can I write multiple selectors?
Yes. Multiple selectors can share the same style by separating them with commas.
Is semicolon mandatory in CSS?
Yes. Semicolons prevent errors and are required after each declaration.