Try for free
DiscoverMobile appPricingFor schoolsHelpLogin
← Back to quizzesFree quiz

Fundamentals of CSS Styling

Welcome to the Fundamentals of CSS Styling course. Whether you are building a single‑page portfolio or a large multi‑page web application, mastering the core concepts of Cascading Style…

10 questions~5 min
Fundamentals of CSS Styling — Qwi
0 / 10
Score: 0%
1

Which method of adding CSS to an HTML document is considered the most maintainable for a multi‑page website?

2

Given the rule "p { margin:10px 20px 30px 40px; }", what is the margin applied to the right side of the paragraph?

3

If an element has both an inline style "color: pink;" and an external stylesheet rule "color: red;" applied via a class, which color will be rendered?

4

Which selector correctly targets every element that also carries the class "italique"?

5

In a flex container with "flex-direction: column;" and "justify-content: space-between;", how are the flex items distributed?

6

What is the effect of the CSS rule "a:hover { color: rgb(13, 204, 42); }" on a link that has already been visited?

7

Which of the following CSS declarations correctly defines a semi‑transparent background using the RGBA notation?

8

If an element is positioned "absolute" and its nearest positioned ancestor is a with "position: relative;", where will the element be placed?

9

Which selector will match any element that has a "data-role" attribute, regardless of its value?

10

When two CSS rules have identical specificity, how does the browser decide which one to apply?

Introduction to CSS Fundamentals

Welcome to the Fundamentals of CSS Styling course. Whether you are building a single‑page portfolio or a large multi‑page web application, mastering the core concepts of Cascading Style Sheets (CSS) is essential for creating maintainable, responsive, and visually appealing websites. In this module we will explore the most common CSS techniques, from linking external style sheets to advanced layout models such as Flexbox.

1. Organizing Styles with External Stylesheets

When a website contains many pages, the most maintainable way to apply styles is to link a single external .css file from the <head> of each HTML document.

  • Centralisation: All visual rules live in one place, making global updates as simple as editing one line.
  • Performance: Browsers cache external files, reducing the amount of data transferred on subsequent page loads.
  • Separation of concerns: HTML remains focused on structure, while CSS handles presentation.

Example of a proper link:

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>

Alternative methods such as @import inside a <style> block, inline style attributes, or embedding a <style> tag on every page are less efficient and harder to maintain.

2. Understanding the Margin Shorthand

The CSS rule p { margin:10px 20px 30px 40px; } uses the four‑value shorthand syntax. The values are applied in the order top, right, bottom, left (clockwise).

  • Top margin: 10 px
  • Right margin: 20 px
  • Bottom margin: 30 px
  • Left margin: 40 px

Visualising the box model helps you remember the order. Think of a rectangle that you rotate clockwise; the second value always lands on the right side.

3. CSS Specificity and the Cascade

Specificity determines which rule wins when multiple declarations target the same element. Inline styles (e.g., style="color: pink;") have the highest specificity, outranking external stylesheet rules, even those defined with class selectors.

Consider the following HTML snippet:

<p class="alert" style="color: pink;">Attention!</p>

If the external stylesheet contains .alert { color: red; }, the paragraph will appear pink because the inline declaration wins the cascade.

To override an inline style you would need to use !important in the external rule, but relying on !important is discouraged for maintainability.

4. Crafting Precise Selectors

Selectors let you target exactly the elements you need. To select every <h2> element that also carries the class italique, the correct syntax is:

h2.italique { /* styles */ }

Explanation of common selector patterns:

  • h2[class="italique"] matches an h2 with an attribute named class exactly equal to italique. It works but is less concise.
  • h2#italique looks for an h2 with an id of italique, not a class.
  • .italique h2 selects h2 elements that are descendants of any element with class italique.

5. Flexbox Layout: Column Direction and Space Distribution

Flexbox provides a powerful way to arrange items in one dimension. When you set flex-direction: column; the main axis becomes vertical. Adding justify-content: space-between; distributes the items evenly along that axis, leaving equal space between each item and no extra space before the first or after the last.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Result:

  • First item aligns to the top of the container.
  • Last item aligns to the bottom.
  • All intermediate items share the remaining vertical space equally.

This pattern is ideal for creating vertical navigation bars, card stacks, or full‑height sections where you want evenly spaced content.

6. Pseudo‑Classes: :hover vs :visited

The rule a:hover { color: rgb(13, 204, 42); } changes the link colour while the mouse pointer is over the element, regardless of whether the link has been visited before. The :hover state has higher priority than the static :visited colour because it applies only during the interaction.

a:visited { color: purple; }
a:hover { color: rgb(13, 204, 42); }

When a user hovers over a visited link, the colour will temporarily become the green defined in :hover, then revert to the visited colour once the pointer leaves.

7. Using RGBA for Semi‑Transparent Backgrounds

RGBA adds an alpha channel (opacity) to the traditional RGB colour model. The correct declaration for a semi‑transparent yellow background is:

background-color: rgba(255, 255, 0, 0.6);

Parameters:

  • Red: 255
  • Green: 255
  • Blue: 0
  • Alpha: 0.6 (60 % opacity)

Using opacity: 0.6 on a container would affect all child elements, while RGBA targets only the background colour, preserving the opacity of nested content.

8. Positioning Elements: Absolute vs Relative

When an element is declared position: absolute;, it is removed from the normal document flow and positioned relative to its nearest ancestor that has a positioning context (i.e., position: relative;, absolute, fixed, or sticky).

Example:

<div class="wrapper" style="position: relative;">
  <span class="badge" style="position: absolute; top: 10px; right: 5px;">New</span>
</div>

Here the .badge will be placed 10 px from the top and 5 px from the right edge of the .wrapper div, not from the viewport or the <body> element.

9. Recap and Best Practices

To solidify your knowledge, remember these key take‑aways:

  • Use external stylesheets for scalability and caching benefits.
  • Master the margin/padding shorthand to write concise code.
  • Inline styles outrank external rules; avoid them unless absolutely necessary.
  • Choose selectors that are both specific enough to target the element and simple enough to maintain.
  • Flexbox excels for one‑dimensional layouts; combine flex-direction and justify-content to control spacing.
  • Pseudo‑classes like :hover apply during user interaction, overriding static states.
  • RGBA provides colour transparency without affecting child elements.
  • Absolute positioning is always relative to the nearest positioned ancestor.

By applying these principles, you will write cleaner, more efficient CSS that scales with your projects.

10. Further Learning Resources

Continue expanding your CSS expertise with these curated resources:

  • MDN Web Docs – CSS Reference
  • CSS‑Tricks – Practical Guides and Snippets
  • Flexbox Froggy – Interactive Flexbox Game
  • W3Schools – CSS Tutorial

Happy styling!