CSS syntax consists of a set of rules evaluated by web browsers to style HTML elements. A CSS ruleset contains a selector pointing to the HTML element and a declaration block containing property-value pairs.
A CSS declaration consists of a property name, a colon (:), a value, and a trailing semicolon (;):
/* CSS Rule Structure */
h1 {
color: #38bdf8;
font-size: 2rem;
text-align: center;
}
Components of a CSS ruleset:
h1): Specifies which HTML element(s) to style.{ ... }): Encloses one or more CSS declarations inside curly braces.color): The visual attribute you want to change.#38bdf8): The setting applied to the specified property.flowchart LR
A["Selector (h1)"] --> B["Declaration Block { }"]
B --> C["Property (color)"]
B --> D["Value (#38bdf8)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Syntax Demonstration</title>
<style>
/* Target multiple elements with comma grouping */
h1, h2 {
font-family: system-ui, sans-serif;
letter-spacing: -0.02em;
}
/* Class selector rule */
.highlight-box {
background-color: #1e293b;
color: #38bdf8;
padding: 1rem;
border-radius: 6px;
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h1>CSS Syntax Overview</h1>
<div class="highlight-box">
<p style="margin: 0;">Declarations end with semicolons and group inside curly braces!</p>
</div>
</body>
</html>
h1, h2, h3 { color: #f8fafc; }) to avoid repeating duplicate CSS code.Write a complete CSS ruleset targeting an <article> tag that sets background-color: #1e293b; and line-height: 1.6;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.