01 / THE BIG IDEA

Structure versus appearance

Imagine two websites with exactly the same words and images. One uses a white background, black text, and lots of open space. The other uses a dark background, bright colors, and bold typography. They might communicate very different moods even though their content is identical.

HTML organizes the content. CSS controls much of its appearance. Together, they give us the foundation for designing websites.

02 / HOW CSS WORKS

Meet the CSS rule

A CSS rule tells the browser which elements to style and what changes to make. It has three basic parts: a selector, one or more declarations, and values for the properties you want to change.

h1 {
  color: blue;
}

• Selector: h1 tells the browser which elements to target.
• Property: color specifies what you want to change.
• Value: blue specifies the color to apply.
• Braces and semicolon: The braces contain the declaration, and the semicolon ends it.

CSS rules can contain several declarations:

h1 {
  color: blue;
  font-size: 40px;
}

03 / YOUR CSS WORKSPACE

Use the CSS panel in CodePen

In previous weeks, we focused mainly on the HTML panel. Now we will use CodePen’s CSS panel to style the HTML we have already written.

04 / COLOR

Choose a color palette

Color can establish a mood, create contrast, connect elements, and help a website feel consistent. Rather than choosing every color independently, designers often develop a small palette that works together.

Three ways to write a color

CSS supports several color formats. For now, we will focus on named colors and hexadecimal values.

h1 {
  color: tomato;
}

h1 {
  color: #2855d9;
}

h1 {
  color: rgb(40, 85, 217);
}

All three examples set the text color. Hexadecimal and RGB let you specify colors precisely, which is useful when building a consistent palette.

05 / YOUR FIRST VISUAL IDENTITY

Style the whole page

Let’s start with a few rules that establish the overall look of a page. These selectors target the body, headings, paragraphs, and links.

body {
  background-color: #f2f4f8;
  color: #182033;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2855d9;
}

h2 {
  color: #182033;
}

a {
  color: #2855d9;
}

Try the code before changing anything. Then experiment with the colors and font family. Notice how a few rules can change the personality of the entire page.

What do these properties do?

• background-color sets an element’s background color.
• color sets the text color.
• font-family specifies the typeface or font stack.

06 / SELECTORS

Style specific elements

So far, we have used element selectors such as h1 and p. CSS also lets us target elements by class. Classes are useful when you want to apply the same design to selected elements without changing every heading or paragraph.

<h2 class="highlight">Featured Project</h2>

<p class="highlight">
  This project is especially important to me.
</p>

.highlight {
  color: #2855d9;
  background-color: #e8edff;
}

The period before highlight tells CSS that you are targeting a class. Any HTML element with class="highlight" receives these styles.

07 / DESIGN WITH CONTRAST

Make important information stand out

Color is not just decoration. Contrast helps visitors distinguish text from backgrounds and identify important information. Text that looks attractive but is difficult to read is not effective design.

As you experiment with color, make sure that important text remains readable. Color should not be the only way you communicate meaning; labels and clear structure matter too.

08 / SYNCHRONOUS CLASS ACTIVITY

Give the same page three different moods

During our live session, we will use one simple HTML page and explore how CSS changes its personality. You will experiment with three visual directions.

Guided exercise

1. Open your Week 4 project in CodePen.
2. Find the CSS panel and add the starter rules from Section 5.
3. Change the body background and text colors.
4. Change the main heading color.
5. Change the link color to complement the palette.
6. Try a different font family, such as Arial or Georgia.
7. Compare your results with the class and explain which mood you prefer.

09 / INDEPENDENT PROJECT

Develop a visual identity

Continue working with your personal-interest website. This week, use CSS to create a basic visual identity that supports the subject and audience of your page.

Project requirements

• Continue using your existing HTML project.
• Add CSS in CodePen’s separate CSS panel.
• Set a background color and a readable default text color.
• Style the main heading and at least one other heading level.
• Choose a font family for the page.
• Style hyperlinks so they are identifiable and readable.
• Use at least one class selector to style a specific element or group.
• Choose a consistent palette and maintain adequate text contrast.
• Submit your working CodePen link through D2L.

10 / SUBMISSION & REFLECTION

Explain your design decisions

Submit your CodePen link through the Week 5 assignment area in D2L. Make sure your CSS is visible in the CSS panel and your page still contains the content and navigation from previous weeks.

Reflection questions

1. What mood or personality were you trying to create with your color choices?
2. Which CSS property was easiest to understand, and which one needs more practice?
3. How did your page change when you separated the content in HTML from its appearance in CSS?

11 / QUICK REFERENCE

CSS terms from this week

12 / LOOKING AHEAD

Next week: Typography & readability

We have started using CSS to establish a visual identity. Next week, we will look more closely at typography, text size, line spacing, and readability.

As you browse websites this week, notice how color and typography work together. Ask yourself whether the visual style supports the content and whether the text remains comfortable to read.