Skip to main content
April 1, 2026Dan Rodney/3 min read

Challenge: Designing Your Own Styles

Master CSS Styling Through Hands-On Practice

Prerequisites

This tutorial assumes you have completed the previous exercise on semantic HTML elements and have basic knowledge of CSS fundamentals.

Topics Covered in This HTML & CSS Tutorial:

Advanced CSS Styling Techniques, Semantic HTML Enhancement, and Modern Layout Strategies

Core Learning Objectives

CSS Implementation

Apply CSS styling techniques to enhance the visual presentation of semantic HTML elements. Transform a basic webpage structure into an engaging user interface.

Design Best Practices

Explore professional styling approaches including typography, color schemes, and layout optimization for better user experience.

Exercise Preview

fluid layout preview

Exercise Progression

Current State

Starting Point

Semantically structured HTML with minimal styling

Development Phase

Apply Enhancements

Implement CSS improvements for visual appeal

Completion

Final Result

Polished webpage with professional styling

Exercise Overview

In a previous exercise, you successfully implemented semantic section tags for Fish and Fowl: The Amazing Animal Blog, establishing a solid structural foundation. However, semantic markup without thoughtful styling is like a well-architected building without interior design—functional but lacking the visual polish that engages users and communicates professionalism. This exercise challenges you to transform basic semantic HTML into a compelling, styled web experience using modern CSS techniques.

You'll work with a partially styled template that demonstrates fundamental CSS concepts while leaving ample room for creative enhancement. This approach mirrors real-world development scenarios where you often inherit existing codebases and must improve upon previous work.

Exercise Workflow

1

File Review

Open and examine the semantic-elements-partially-styled.html file to understand the current structure and identify areas for improvement

2

Code Analysis

Review the existing HTML code and take note of the different semantic sections that will serve as styling targets

3

Style Implementation

Apply CSS enhancements to transform the basic webpage into a visually appealing and professional-looking site

Getting Started

  1. Open and preview semantic-elements-partially-styled.html from the Structural Semantics folder in your preferred web browser.

    Examine the current styling implementation carefully. You'll notice the page includes basic CSS rules that establish readable typography and simple layout structures, but the design lacks visual hierarchy, brand personality, and modern web aesthetics. This baseline gives you a functional starting point while highlighting areas for significant improvement.

  2. Launch your code editor and open semantic-elements-partially-styled.html from the Structural Semantics folder.

    Conduct a thorough code review, paying special attention to the semantic HTML5 elements (header, nav, main, section, aside, footer) and how they're currently structured. Understanding this markup hierarchy is crucial for writing effective CSS selectors and maintaining clean, maintainable code. Note any existing class names, IDs, and the overall document structure—this analysis will inform your styling strategy.

  3. Apply your CSS knowledge to transform this webpage into a visually compelling, user-friendly experience. The following section provides specific enhancement strategies to guide your development process.

File Location

Both the preview and working files are located in the Structural Semantics folder. Make sure to open the correct file in your code editor before beginning.

Pre-Development Checklist

0/4

Tips & Ideas

Consider implementing these professional-grade enhancements to elevate your webpage's design and functionality:

  • Color Scheme Development: Create a cohesive color palette that reflects the content's personality. Consider using modern color tools like Adobe Color or Coolors.co to develop harmonious combinations that ensure accessibility compliance.
  • Typography Hierarchy: Establish clear visual hierarchy through strategic font sizing, weight variations, and color contrast for section headers. Consider implementing a modular scale for consistent proportions across all text elements.
  • Custom List Styling: Replace default bullet points with custom markers, icons, or numbered styling that aligns with your overall design aesthetic. This small detail significantly impacts perceived professionalism.
  • Responsive Navigation Design: Transform the vertical navigation into a horizontal layout for desktop views, incorporating hover effects and ensuring mobile-friendly behavior. Consider implementing a hamburger menu for smaller screens.
  • Interactive Link States: Develop sophisticated pseudo-class styling (:hover, :focus, :active) that provides clear user feedback while maintaining accessibility standards. Subtle animations can enhance the user experience without being distracting.
  • Web Font Integration: Leverage Google Fonts or other web font services to implement typography that supports your brand identity. Ensure you're selecting fonts optimized for web performance and readability across devices.
  • External Stylesheet Architecture: Organize your CSS in external stylesheets with logical structure (base styles, layout, components, utilities). This practice improves maintainability and performance while following industry best practices.
  • Modern Border Styling: Apply border-radius properties to create contemporary rounded corners, subtle shadows, and other visual enhancements that give your design a polished, current appearance.
  • Mobile-First Responsive Testing: Utilize Chrome DevTools' device emulation features to test and optimize your responsive design across various screen sizes. Implement CSS Grid or Flexbox for robust, flexible layouts that adapt gracefully to different viewports.

Visual Enhancement Categories

Typography & Layout

Modify font sizes, font families, and colors for section headers. Transform navigation from vertical to horizontal layout for better usability.

Interactive Elements

Implement pseudo-classes for link interactions. Remove default bullet styles and create engaging hover effects for better user engagement.

Advanced Styling

Integrate Google Web Fonts, create external stylesheets, apply border-radius for rounded edges, and optimize for mobile responsiveness.

External vs Internal Stylesheets

Pros
Better organization and maintainability
Reusable across multiple pages
Cleaner HTML structure
Better performance through caching
Cons
Additional HTTP request
Requires proper file linking
More complex file management
Mobile Testing

Use Chrome's Developer Tools to test mobile responsiveness. The Inspector allows you to simulate different device sizes and ensure your styling works across all screen sizes.

Key Takeaways

1CSS transforms semantic HTML structure into visually appealing and professional web pages
2Typography modifications including font size, family, and color significantly impact header prominence and readability
3Navigation layout can be enhanced by converting vertical lists to horizontal arrangements for improved usability
4Pseudo-classes provide interactive styling capabilities that enhance user engagement with links and buttons
5External stylesheets offer better organization, maintainability, and reusability compared to inline styles
6Google Web Fonts integration expands typography options beyond system default fonts
7Border-radius property enables modern rounded edge designs for visual appeal
8Mobile responsiveness testing through Chrome Inspector ensures cross-device compatibility and optimal user experience

RELATED ARTICLES