CSS (Cascading Style Sheets) is a language used to style HTML documents. It describes how HTML elements should be displayed on screen, paper, or in other media.CSS (Cascading Style Sheets) is used to apply styles to HTML elements. The basic syntax of CSS follows a structured format made up of selectors, properties, and values.
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 12px;
}
Explanation:
Selector = h1 → selects all <h1> elements
Property = color or font-size → the style you want to change
Value = blue, 12px → the new style value
CSS Example in Full (HTML + CSS)
HTML + Internal CSS Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>This is a red, centered paragraph</p>
</body>
</html>
External CSS Example:
HTML File (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>
CSS File (style.css):
h1 {lor:red;
co
text-align:center;
}
Example:
p {
color: blue;
font-size: 16px;
}
This styles all <p> tags to have blue text and a font size of 16 pixels.
Multiple Selectors:
h1, h2, h3 {
color: darkgreen;
}
Comment Syntax:
/* This is a comment in CSS */
Key Components:
1. Selector: Identifies the HTML element to be styled (e.g., p, .class, #id).
2. Property: Defines the style aspect to be modified (e.g., color, font-size).
3. Value: Specifies the setting for the property (e.g., red, 16px).
4. Declaration Block: Enclosed in {}, contains one or more declarations separated by semicolons ;.
Example in Theory (No Code):
A paragraph (p) can be styled to appear red in color and centered. The selector is p, and the declarations include color and text-align.
Additional Notes:
- Each declaration must end with a semicolon
;. - CSS is case-insensitive, but it’s best to follow lowercase naming conventions.
- White space and indentation improve readability but are not required.
Summary:
- CSS syntax is made up of selectors and declarations.
- A selector targets HTML elements.
- A declaration consists of a property and its value.
- Declarations are written inside curly braces
{}and separated by semicolons. - CSS helps control layout, color, font, spacing, and more in a structured format.
Conclusion:
Understanding CSS syntax is the foundation of web styling. With correct syntax, you can effectively design and control the look of web pages. Writing clean, well-structured CSS improves readability and maintainability of your code.