Theory
The Black and White Portfolio
You have spent hours writing perfect HTML tags for your online portfolio. You have got headings, paragraphs, and a clean layout. But when you load it in the browser, everything looks identical to every other student project, boring black text on a stark white background. If every element uses the exact same plain font, how do you make a recruiter stop and notice your work? How do we style your portfolio without messing up the structure of your HTML code?
Theory
The Construction Site and the Paint Bucket
Think of your portfolio's HTML as the concrete foundation, pillars, and brick walls of a house. It defines where the rooms are, but looks raw and unfinished. Cascading Style Sheets (CSS) act like the interior designer. Instead of building new walls, CSS brings paint brushes, wallpaper, and light fixtures. It targets existing brick walls and changes their color or texture from the outside, keeping the structural blueprint entirely separate from presentation.
Theory
Understanding CSS Architecture
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML. A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons, where each declaration includes a property name and a value, separated by a colon.
At a glance
Anatomy of a standard CSS rule expression.
| Syntax Component | Example | Purpose |
|---|---|---|
| Selector | h1 | Targets the specific HTML element to be styled. |
| Property | color | Specifies the attribute you want to alter, like text color. |
| Value | blue | Assigns the specific setting or appearance to the property. |
| Declaration | color: blue; | Combines a single property and value inside curly braces. |
Practical
Styling the Main Portfolio Heading
/* Target the main heading of your portfolio page */
h1 {
color: darkblue;
font-size: 32px;
text-align: center;
}Quiz
Look at this line of code: p { color: red; }. What term describes the 'color' part of this statement in a university exam?
- Selector
- Value
- Property
- Declaration block
Show the answer
Property
In CSS syntax, color is a property. The p tag is the selector, red is the value, and the entire combo inside curly braces makes up the declaration block.
Theory
The Evolution of CSS Versions
CSS has evolved through distinct versions to support modern web layouts:
- CSS1 (1996): Introduced basic properties like fonts, colors, and margins.
- CSS2 (1998): Added support for absolute positioning and media types.
- CSS3 (1999 to present): Split the specification into independent modules like Flexbox, Grid, borders, and animations, allowing continuous updates without waiting for a complete new version release.
Think first
Mental Evaluation of Semicolons
Mentally predict what happens if you write a CSS block with two declarations but forget to place a semicolon between them. Think before tapping.
Show the answer
The browser will fail to parse the styles. It will view both declarations as a single invalid command and ignore them completely, leaving your webpage components completely unstyled.
Watch out
The Missing Semicolon and Colon Confusion
A devastating mistake made by beginners in practical lab sessions is mixing up colons and semicolons, or using equal signs like in HTML attributes. Writing color = red; or color; red: will render your style sheets completely useless. Always remember the strict pattern: use a colon after the property name, and close every declaration with a semicolon before moving to the next line!
Formula
Formula for CSS Syntax Questions
When asked to explain CSS syntax in a theory exam, present these three distinct parts for maximum marks:
- 1. Structural Example: Write a sample rule like h1 { color: red; } and label the selector, property, and value explicitly.
- 2. Definition: Define a rule set and explain how curly braces group declarations.
- 3. Delimiters: Clearly specify that colons separate properties from values, while semicolons separate individual declarations.
Summary
Key takeaways
- CSS separates structural layout from visual presentation in modern web development.
- A CSS rule set pairs a selector with a declaration block enclosed in curly braces.
- Properties and values are divided by colons, while individual declarations require semicolons.
- CSS3 operates as a collection of modular upgrades rather than a single monolithic release.
- Memory Hook: Selectors target the element, colons set the state, semicolons close the gate.