CSS Syntax
CSS syntax defines how styles are written to apply visual formatting to HTML elements. It consists of selectors and declarations.✅ Basic Structure of CSS
selector {
property: value;
}
🔍 Components Explained:
Selector: Specifies which HTML element(s) to style (e.g., p, .class, #id)Property: A style attribute you want to change (e.g., color, font-size)
Value: The setting for the property (e.g., blue, 16px)
🔸 Multiple properties can be grouped inside one selector using curly braces {}
🔸 Each property-value pair ends with a semicolon ;
🔧 Example: Styling a Paragraph
✅ CSS Code:
p {
color: #333;
font-size: 16px;
line-height: 1.5;
}
✅ HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #333;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<p>This is a styled paragraph.</p>
</body>
</html>
🖼️ Output Behavior:
Paragraph text appears in dark gray (#333)
Font size is 16px
Increased spacing between lines for better readability
💡 Notes:
Property names are case-insensitive, but it's common to write them in lowercase.CSS ignores extra spaces and line breaks.
/* This is a comment */
📘 Summary:
CSS syntax is simple: selector{ property: value; }
It allows you to target HTML elements and apply styles
Writing clean, consistent syntax is key to maintainable stylesheets