Ashton Taelman | Electronics & IT Student

Lab 2 - Basics Of CSS

Goals Of The Exercise

  • CSS Selectors & Structure: Learn to work confidently with tag, class, ID, and pseudo-selectors. Understand the difference between reusable and unique styles, and apply advanced selectors like combinators and :nth-child.
  • Stylesheet & Fonts: Correctly link an external stylesheet (styles.css), add normalize.css, and include a Google Font (Montserrat) with a fallback. Pay attention to the correct order of stylesheets in the <head>.
  • Base Styling & Layout: Use the box model properly with box-sizing. Set global styles using :root and body, including background color (in OKLCH), font family, line-height, and smooth scroll behavior.
  • Container & Responsive Layout: Create a .container class with max width and auto margins for centered content. Apply containers around content in the header, main, and footer, and test responsiveness at different screen sizes.
  • Navigation & Interactivity: Style the navigation bar with custom padding, color, and hover/focus effects. Remove default list styles in nav ul and use nav a selectors to create accessible, user-friendly links.
  • Reusable Classes & Utility Styling: Create utility and modifier classes like .highlight, .container--narrow, .m-1, .p-2 for consistent and reusable styling. Use inheritance and specific selectors to adjust styles based on context.
Official CSS logo

Description

As part of the next step in learning front-end development, this project focused on applying CSS to build a responsive and accessible layout based on semantic HTML. The goal was to explore core styling concepts such as selectors, the box model, utility classes, and layout containers.

The exercise also introduced normalize.css, custom fonts via Google Fonts, and best practices for organizing and reusing CSS. Key attention was given to navigation styling, interactive states, and writing clean, maintainable code.

This project helped bridge the gap between static HTML pages and styled, user-friendly web interfaces.

Related Links

To check the validity of my code, I used tools such as axe DevTools and the W3C Markup Validation Service. These tools help identify accessibility and syntax issues early in the development process.

During the CSS phase, they support ensuring that styling choices maintain good contrast, proper structure, and overall code quality. Integrating these validation tools into my workflow helps me write cleaner, more accessible, and standards-compliant code as I build out the design.

Reflection

Working with CSS proved to be more challenging than I initially expected. Understanding how selectors, the box model, and layout properties interact took time and practice to grasp fully. I found it difficult at first to predict how changes in the stylesheet would affect the overall page structure and appearance, especially when dealing with specificity and cascading rules.

Despite these challenges, using tools helped me debug and experiment with styles in real time, which gradually improved my confidence. I realize now that mastering CSS requires patience and continuous practice. Moving forward, I'm motivated to deepen my understanding by building on these foundational skills and seeking feedback to refine my code.