CSS Syntax, Selectors, Declarations, Comments, and File Organization
Learn the basic structure of CSS rules and how selectors and declarations work in maintainable stylesheets.
Inside this chapter
- Basic CSS Rule Structure
- Common Selectors
- External, Internal, and Inline CSS
- Comments and Readability
- Organizing Stylesheets
- Practical Example
Series navigation
Study the chapters in order for the clearest path from CSS basics and styling foundations to advanced layout, responsive design, architecture, and maintainable interface systems. Use the navigation at the bottom to move smoothly through the full tutorial series.
Basic CSS Rule Structure
h1 {
color: #1f3a5f;
font-size: 32px;
}A CSS rule has a selector and a declaration block. The selector chooses which elements are targeted. The declaration block contains property-value pairs that define how those elements should appear.
Common Selectors
- Element selectors such as
porh1 - Class selectors such as
.card - ID selectors such as
#mainHeader - Attribute selectors such as
input[type="email"] - Combinators such as descendant or child selectors
External, Internal, and Inline CSS
Professional projects usually prefer external stylesheets because they are reusable and easier to maintain. Internal CSS is useful for quick demos or isolated pages. Inline styles should be limited because they mix presentation directly into markup and can make code harder to manage.
Comments and Readability
/* Primary hero heading styles */
.hero-title {
font-size: 48px;
}Comments should explain intent or structure when helpful, not restate obvious property lines. Good naming and grouping are just as important as comments.
Organizing Stylesheets
Students should build the habit of grouping related rules, keeping selectors readable, and organizing CSS in a way that mirrors page structure or component structure rather than letting styles become an unstructured long file.
Practical Example
A landing page stylesheet may group rules into header, hero, features, testimonials, pricing, and footer sections. That kind of organization helps teams change designs without hunting through scattered declarations.