In this assignment, you'll learn how to add color and style to your HTML pages! You'll make text change colors, add background colors, and adjust font sizes—all using the style attribute.
Your page must include:
Need a reminder on the basics? Click any section below to expand it.
Every HTML page needs this basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title Here</title>
</head>
<body>
Your content goes here!
</body>
</html>
To save: File > Save As > Change "Save as type" to "All Files" > Name your file ending in .html
To view: Double-click your .html file to open it in a browser.
To see changes: Save in Notepad (Ctrl + S), then click the refresh button in your browser.
The style attribute lets you add visual styling directly to any HTML element. You add it inside the opening tag:
<p style="color: red;">This text is red!</p>
This displays as:
This text is red!
The basic format is:
Warning: Don't forget the colon after the property name and the semicolon at the end! color: red; (correct) vs color red (wrong)
The simplest way to add color is using color names. HTML recognizes about 140 color names that you can just type in!
Use color: to change the color of text:
<p style="color: blue;">This text is blue.</p>
<p style="color: green;">This text is green.</p>
<p style="color: orange;">This text is orange.</p>
This displays as:
This text is blue.
This text is green.
This text is orange.
Use background-color: to add a background color behind an element:
<p style="background-color: yellow;">This has a yellow background.</p>
This displays as:
This has a yellow background.
You can add multiple styles by separating them with semicolons:
<p style="color: white; background-color: black;">White text on black!</p>
This displays as:
White text on black!
Here are some color names you can use:
Choose a holiday theme for your first section:
Great for: spooky facts, Halloween costume ideas, scary stories
Great for: holiday traditions, gift wish lists, favorite holiday movies
Great for: favorite things you love, friendship facts, candy rankings
Choose a holiday theme and create a section using those color names:
<h2 style="color: orange; background-color: black;">Halloween Facts</h2>
<p style="color: purple;">Halloween is celebrated on October 31st.</p>
<p style="background-color: orange;">Pumpkins are a symbol of Halloween.</p>
Save and refresh your browser to see your colors!
Add an <hr> after your holiday section to separate it from the next part:
<hr>
Color names are easy, but there are only about 140 of them. Hex codes let you use any of over 16 million colors!
A hex code starts with a # followed by 6 characters (numbers 0-9 and letters A-F):
<p style="color: #9e0001;">This is a specific shade of red.</p>
This displays as:
This is a specific shade of red.
Hex codes let you match exact brand colors—like your school's official colors or a sports team's specific shades.
Tip: You don't need to memorize hex codes! Just copy and paste them from the theme options below.
Choose a sports team or school theme. Copy and paste the hex codes!
Great for: Boilermaker facts, favorite Purdue traditions, sports stats
Great for: favorite players, game stats, basketball facts
Great for: favorite players, football facts, game day traditions
Great for: school spirit page, club info, favorite things about school
Choose a sports team or school theme and create a section using hex codes:
<h2 style="color: #cfb991; background-color: #000000;">Boiler Up!</h2>
<p style="color: #8e6f3e;">Purdue was founded in 1869.</p>
<p style="background-color: #cfb991;">The mascot is Purdue Pete.</p>
Remember: Copy and paste the hex codes exactly, including the # symbol!
Use font-size: to make text bigger or smaller. You specify the size in pixels (px):
<p style="font-size: 12px;">Small text (12 pixels)</p>
<p style="font-size: 16px;">Normal text (16 pixels)</p>
<p style="font-size: 24px;">Large text (24 pixels)</p>
This displays as:
Small text (12 pixels)
Normal text (16 pixels)
Large text (24 pixels)
You can combine font-size with colors:
<p style="font-size: 24px; color: red;">Big and red!</p>
Go back to your page and add font-size: to at least one element in either section. You can make a heading bigger or make some text stand out.
Having issues? Check these common problems:
Cause: Missing colon, semicolon, or quotes
Fix: Check your format: style="color: red;" — you need the colon after color, the semicolon at the end, and quotes around everything.
Cause: Missing # symbol or typo in the code
Fix: Hex codes must start with # and have exactly 6 characters. Copy and paste from the theme options to avoid typos!
Cause: Low contrast between text and background
Fix: Use light text on dark backgrounds, or dark text on light backgrounds. For example, white text on black, or black text on gold.
Cause: Missing semicolon between styles
Fix: When using multiple styles, separate them with semicolons: style="color: red; background-color: black;"
Cause: Common typos in the property name
Fix: It's background-color with a hyphen, not backgroundcolor or background color
Cause: You didn't save, or the browser is showing an old copy
Fix: Press Ctrl + S in Notepad to save, then click the refresh button in your browser.
If that still doesn't work: Try a "hard refresh" by pressing Fn + Ctrl + F5 at the same time.
Still stuck? Raise your hand and ask for help. Have your Notepad file open so we can look at your code together.