CodeBlanks Logo Icon CodeBlanks
Login Register

Project: My first stylesheet

CSS course · Beginner · Lesson 15/82

Overview of the 5-lesson project: you will style an HTML page from scratch.

Project: My first stylesheet

In this 5-lesson project you'll style a personal site page from scratch. Each lesson adds one piece to the stylesheet, and by the final lesson you'll have a fully styled page.

You'll use:

  • An external stylesheet and the link element
  • Type selectors (body, h1, h2, p)
  • Color and font settings
  • Spacing and alignment
  • Documentation with comments

Ready? Let's start.

Project roadmap

Here's how we'll build the project step by step:

  1. Linking and skeleton: review linking an external stylesheet to HTML, set up the base skeleton with a body type selector.
  2. Color and font: add color, font family, and font size to h1.
  3. Spacing and alignment: add margin, padding, and text alignment to p.
  4. Project final: add an h2 rule and separate sections with comments.

Each lesson's starting code contains the previous lesson's solution; you only add the new piece.

Target stylesheet

At the end of the project you'll have this structure:

  • File header: an explanatory comment
  • General settings: margin reset for body
  • Heading: color, font family, and font size for h1
  • Subheading: color and font family for h2
  • Paragraphs: margin, padding, and alignment for p

You'll build this step by step across 5 lessons.

Exercise Add a header comment to the stylesheet

To start the project, add a comment at the top of the stylesheet. The comment should include the words Personal Site. CSS comments use the /* ... */ syntax and are not shown by the browser; they're only visible to anyone reading the source. We'll fill this file in the next lessons.

Test yourself

  1. How does starting code work in a project group?

    • Each lesson's starting code contains the previous lesson's solution
    • Each lesson starts with an empty file
    • There is no starting code; everything is written from scratch
    • Starting code only appears in the final lesson
    Show answer

    Each lesson's starting code contains the previous lesson's solution — Correct. In a project, starting code accumulates; you only add the new piece.

  2. Match each lesson to the piece it adds

    Linking and skeleton
    body rule
    Color and font
    color, font-family
    Spacing and alignment
    margin, padding
    Project final
    comments + h2 rule

All lessons in Beginner

1 Document basics

  1. What is CSS?
  2. Linking CSS to HTML
  3. CSS rule structure
  4. Comments and whitespace
  5. Cascade and inheritance
  6. Summary - My first stylesheet

2 Basic selectors

  1. Type selectors
  2. Class and ID selectors
  3. Universal selector
  4. Grouping and comma
  5. Attribute selectors
  6. Child combinator (>)
  7. Descendant combinator (space)
  8. Summary - Theme skeleton

3 Project: My first stylesheet

  1. Project: My first stylesheet
  2. Linking and skeleton
  3. Color and font
  4. Spacing and alignment
  5. Project final - My first page

4 Text styling

  1. Font family
  2. Font size and weight
  3. Line height and spacing
  4. Text align and transform
  5. Text decoration and shadow
  6. Summary - Article typography

5 Box model

  1. What is the box model?
  2. Width and height
  3. Padding
  4. Margin
  5. Box-sizing
  6. Summary - Card component

6 Project: Personal blog

  1. Project: Personal blog
  2. Heading and typography
  3. Content box
  4. Color and background
  5. Project final - Blog page

7 Colors and backgrounds

  1. Color formats
  2. Opacity and alpha
  3. Background color
  4. Background image
  5. Background shorthand
  6. Summary - Hero section

8 Borders and shadows

  1. Border basics
  2. Border shorthand
  3. Border radius
  4. Box shadow
  5. Outline
  6. Summary - Button styles

9 Project: Portfolio card

  1. Project: Portfolio card
  2. Card skeleton
  3. Image and heading
  4. Shadow and border
  5. Project final - Portfolio card

10 List and link styles

  1. List style type
  2. List style position
  3. List style image
  4. Link states
  5. Removing text decoration
  6. Summary - Menu bar

11 Units and values

  1. Pixel and percentage
  2. em and rem
  3. vw and vh
  4. calc() function
  5. Color functions
  6. Summary - Responsive typography

12 Display and position

  1. Display property
  2. Display none and visibility
  3. Position static and relative
  4. Position absolute
  5. Position fixed and sticky
  6. Summary - Header layout

13 Overflow and z-index

  1. Overflow visible and hidden
  2. Overflow scroll and auto
  3. Z-index
  4. Float
  5. Clear and clearfix
  6. Summary - Modal skeleton

14 Beginner final

  1. Challenge - Typography
  2. Challenge - Box model
  3. Challenge - Color and background
  4. Challenge - Layout basics
  5. Challenge - Beginner capstone