1
← Back to quizzesFree quiz
Fundamentals of CSS Styling
Welcome to this comprehensive module on Cascading Style Sheets (CSS). Whether you are a beginner or looking to solidify your knowledge, this course covers the core concepts that power modern…
0 / 11
Score: 0%
2
If two conflicting CSS rules apply to the same element, which rule will win for the property "color"?
3
What does the selector "p.special" target?
4
Which pseudo‑class would you use to style only the first in each ordered list?
5
Given the rule "a[href^=\"https://\"] { color: green; }", which links will be colored green?
6
In a flex container with "flex-direction: column;" and "justify-content: space-between;", how are the items distributed?
7
Which CSS property controls the space between the border of a box and its content?
8
What will be the computed color of a paragraph with the following cascade? Text with CSS: .c1 { color: red; } #p1 { color: orangered; } p { color: rgb(41,140,151) !important; }
9
Which selector correctly selects every element that is a direct child of a element?
10
If an element has "position: absolute;" but none of its ancestors have a positioning context, relative to what is it positioned?
11
Which CSS declaration correctly creates a circular button with a 50 % border‑radius?
Fundamentals of CSS Styling
Welcome to this comprehensive module on Cascading Style Sheets (CSS). Whether you are a beginner or looking to solidify your knowledge, this course covers the core concepts that power modern web design. By the end of the lesson you will understand how to structure CSS for maintainability, master selector specificity, work with pseudo‑classes, attribute selectors, flexbox layouts, and the box model, and correctly apply the cascade and !important declarations.
1. Organising CSS for Large Projects
When a website spans multiple pages, the most maintainable method of adding CSS is to place all style rules in a single external stylesheet and link it in the <head> of each HTML document:
<link rel="stylesheet" href="styles.css">This approach offers several advantages:
- Separation of concerns: HTML handles structure, CSS handles presentation.
- Browser caching reduces load times after the first visit.
- Centralised updates – a single change propagates across the entire site.
Avoid embedding CSS inside <style> tags on every page, mixing CSS with JavaScript, or using inline style attributes, as these practices quickly become hard to manage.
2. Understanding the Cascade and Specificity
The cascade determines which rule wins when multiple selectors target the same element. The primary factors are:
- Importance: Declarations marked with
!importantoutrank normal rules. - Specificity: Calculated from the selector type – IDs > classes/attributes/pseudo‑classes > elements/pseudo‑elements.
- Source order: When specificity ties, the later rule in the stylesheet wins.
Consider the following cascade:
<p id="p1" class="c1" style="color: pink;">Text</p>
.c1 { color: red; }
#p1 { color: orangered; }
p { color: rgb(41,140,151) !important; }
The computed color is rgb(41,140,151) because the !important flag on the p selector overrides both the inline style and the more specific ID selector.
3. Selector Types and Their Targets
3.1 Class and Element Combination
The selector p.special matches any <p> element that also carries the class special. It does not target descendants or parents – only the element itself with that exact class.
3.2 Attribute Selectors
Attribute selectors let you style elements based on attribute values. The rule:
a[href^="https://"] { color: green; }
applies to every <a> whose href attribute starts with https://. The caret (^=) denotes a “starts‑with” match.
4. Pseudo‑Classes for Precise Targeting
Pseudo‑classes enable styling based on element state or position. To style only the first list item in each ordered list, use the :first-child pseudo‑class:
ol li:first-child { /* styles */ }
Other useful pseudo‑classes include :hover, :focus, and :nth-of-type() for more complex patterns.
5. Flexbox Layout Fundamentals
Flexbox provides a powerful one‑dimensional layout model. When a container is set to flex-direction: column;, the main axis runs vertically. Adding justify-content: space-between; distributes items so that the first item touches the start edge, the last item touches the end edge, and equal space appears between each pair of items.
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
This results in a vertical distribution, not a horizontal one, and ensures the spacing adapts automatically as items are added or removed.
6. The Box Model: Margin, Border, Padding, Content
Every element is represented as a rectangular box consisting of four areas:
- Content: The actual text or media.
- Padding: Space between the content and the border.
- Border: The line surrounding the padding.
- Margin: The outermost space separating the element from its neighbours.
The CSS property that controls the space between the border and the content is padding. Adjusting margin moves the element relative to surrounding boxes, while border-width changes the thickness of the border itself.
7. Best Practices for Writing Maintainable CSS
- Use a clear naming convention such as BEM (Block‑Element‑Modifier) to avoid selector collisions.
- Group related rules together and comment sections for readability.
- Leverage CSS variables (
--primary-color) for theme consistency. - Minimise the use of
!important; reserve it for utility classes or third‑party overrides. - Validate your CSS with tools like W3C CSS Validator to catch syntax errors early.
8. Quick Quiz Recap
Test your understanding with the following questions derived from the original quiz:
- Which method of adding CSS is most maintainable for a multi‑page website?
Answer: Linking an external .css file with<link>in the<head>. - When two conflicting rules apply, which one wins for the
colorproperty?
Answer: The rule with the highest specificity, regardless of order. - What does the selector
p.specialtarget?
Answer: Any<p>element that also hasclass="special". - Which pseudo‑class styles only the first
<li>in each ordered list?
Answer::first-child. - Given
a[href^="https://"] { color: green; }, which links turn green?
Answer: All<a>elements whosehrefattribute starts withhttps://. - In a flex container with
flex-direction: column;andjustify-content: space-between;, how are items distributed?
Answer: Vertically, with equal space between the first and last items and the container edges. - Which CSS property controls the space between the border of a box and its content?
Answer:padding. - What is the computed color of the paragraph in the cascade example?
Answer:rgb(41,140,151)(due to!important).
9. Further Reading and Resources
- MDN Web Docs – CSS: In‑depth reference for every CSS property and selector.
- A Complete Guide to Flexbox by CSS‑Tricks.
- CSS Specificity – Quick visual guide.
- Understanding the Cascade – Detailed explanation of inheritance and importance.
By mastering these fundamentals, you are equipped to build clean, efficient, and responsive web pages. Keep experimenting, and remember that well‑structured CSS not only improves performance but also makes collaboration with other developers a breeze.
