Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Customizing Colors and Fonts Use Classes in CSS

crystalh
seal-mask
.a{fill-rule:evenodd;}techdegree
crystalh
Front End Web Development Techdegree Student 3,104 Points

When I put my cursor over the color that I typed, the workspace doesn't show what color it is going to be.

I noticed it before. It is annoying to not know what color I've created unless I refresh and check the web page.

3 Answers

Elijah Gartin
Elijah Gartin
13,182 Points

Hey Qiao, can you be a little more descriptive of what you're trying to do here? I'll take a stab at it anyway...

The workspace, like other code editors generally don't tell you what color something is going to be when you put in a hexidecimal value or rgb value. You can infer what the color is if you have studied how the hexidecimal valules and the red green blue spectrum work, but the editor itself will generally be void of notifying you what color it will be. This is due to the editor's nature. This is also why you have to refresh the browser to see the result because the browser is what is actually interpreting the code and drawing it to the screen. If you want to be explicit, you can say

.classname{ 
/*Explicit White*/
color:white;
}

I created a little CSS Test workspace to show how colors can work in different classes utilizing the hex,rgb, and color name. Here's a nice little resource to help you gain more understanding around hexidecimal and rgb color values. (It'll also help you get the code you want for the color you want)

The CSS file "styles.css" is your main focus in the workspace. I've added comments so that when I'm reading the code I know what the colors of each value so I don't have to refresh the page everytime to check it out.

.color1{
  /*Orange-ish*/
 color:#FF5500;
}
.color2{
  /*Red + blue = ...? */
 color:rgb(255,0,255); 
}
.color3{
  /*If I had to guess, it's going to be blue*/
  color: blue;
}
crystalh
seal-mask
.a{fill-rule:evenodd;}techdegree
crystalh
Front End Web Development Techdegree Student 3,104 Points

I'm learning How to Make a Website, and on the video (Write Hexadecimal Colors), it tells me if i hover over the color i typed, it will show me a tiny preview of the color. in your example, if i hover over #FF5500, it should show me the preview of the color. i hope that's clear enough.

Allison Davis
Allison Davis
12,698 Points

How are you formatting the colors? As hex values, rgb, or typing the name?

Also, maybe it's a browser-compatibility thing...are you using Chrome?

crystalh
seal-mask
.a{fill-rule:evenodd;}techdegree
crystalh
Front End Web Development Techdegree Student 3,104 Points

/* selected nav link*/ nav a.selected, nav a:hover { color: #32673f; } I have window 8.1. I've tried using Window Explorer, Google Chrome and Firefox.

Allison Davis
Allison Davis
12,698 Points

Strange! Not really sure what would cause that then. But I wouldn't worry about it too much, even though it's a minor hassle - when I started building projects in text editors instead of workspaces, I had to get used to a lack of color preview anyways.

Coolers is another useful site to use when picking and referring back to color palettes for sites. I'll bookmark a particular palette and just refer back to it while working on a project.