Codemoji | Lesson 1: Color

Student

Learn the basics of coding while building your own website

Parent

Track your student's progress and assign them challanges

Teacher

Create a classroom and assign lessons to your students

Already have an account?

Student

Learn the basics of coding while building your own website

Parent

Track your student's progress and assign them challanges

Teacher

Create a classroom and assign lessons to your students

Don't have a Google account?

Lesson 1: Color

Adding color to a website is fun. Every website you go to has color. Today you will learn how to add that amazing color to your webpage using CSS.

Adding CSS on codemoji is fun and easy. Simply click on an emoji in the editor to see the styling options.

Make the heading red by clicking on the firstand then clicking the and select the red circle .

Sorry, that's not correct! Make sure that you clicked on the firstand then clicked the and select the red circle .

Congratulations! You've just added CSS to a header, making the font color red.

Lesson 1: Color

index.html

style.css

This is the title

This is the heading, apply styling to it by clicking the opening h1 tag!

2. 3. 4. 5. 6. 7. 8. 9. 10.

.color-1{ color: red; }

.color-2{ color: blue; }

.color-3{ color: green; }

.color-4{ color: orange; }

.color-5{ color: purple; }

.size-1{ font-size: 12px; }

.size-2{ font-size: 22px; }

.size-3{ font-size: 32px; }

.size-4{ font-size: 42px; }

.size-5{ font-size: 52px; }

2. 3. 4. 5. 6. 7. 8. 9. 10.

Play around in the playground.

Run Code

View Code

Please rate this lesson:

Not Fun

Super Fun!