CSS Syntax
Part of the Styling with CSS section of Coddy's HTML journey — lesson 2 of 76.
In CSS, syntax refers to the set of rules that define how CSS code should be written. Understanding CSS syntax is essential for creating well-structured and functional stylesheets. A basic CSS rule consists of a selector and a declaration block.
Here's a simple breakdown:
- Selector: Specifies the HTML element you want to style (e.g. p, div, img).
- Declaration Block: Contains one or more declarations enclosed in curly braces
{}.
- Declaration: Consists of a property and a value, separated by a colon
:(e.g. color:green;). Each declaration should be terminated with a semicolon (;).
- Property: The style attribute you want to change (e.g., color, font-size).
- Value: The value you want to set for the property (e.g., blue, 16px).
For example:
p {
color: blue;
font-size: 16px;
}In this example, p is the selector, targeting all paragraph elements. The declaration block contains two declarations: one setting the text color to blue and the other setting the font size to 16 pixels.
Challenge
EasyYou are given an HTML code with a paragraph element and a CSS rule for that paragraph. Modify the CSS rule to change the text color to red.
Cheat sheet
CSS syntax consists of a selector and a declaration block:
- Selector: Specifies the HTML element to style (e.g. p, div, img)
- Declaration Block: Contains declarations enclosed in curly braces
{} - Declaration: Property and value separated by a colon
:, terminated with semicolon; - Property: The style attribute to change (e.g., color, font-size)
- Value: The value for the property (e.g., blue, 16px)
p {
color: blue;
font-size: 16px;
}Try it yourself
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Styling with CSS
5 Colors and Backgrounds
Background ColorHEX ColorsRGB ColorsTransparency with RGBARecap Challenge #1