Newbie to CSS?

Me too. One of the most fundamental CSS properties that continues to be the crux of my designs are colors.

Utilizing the CSS color and background-color properties is an easy and precise way to set the tone of a website; ultimately they curate the overall experience for users. One of my personal favorite online communities resides within the collective of thefutur.com. Their website design incorporates large black text, formatted by using the color property, and large color-blocks using the background-color property, this combination creates a modern, expansive, and bold esthetic.

 

TIP* Access any CSS property by using the ‘inspect element‘ button, as shown above.

When building websites, color can be used to customize the color of text, backgrounds, borders and even clicks to create an effective user experience. Color is utilized not only for ‘setting the tone’ so to speak, but it’s also critical for brand recognition. This is important to consider when choosing your colors. Look no farther than Google’s saturated color scheme; it’s used throughout their website, product packing, the company headquarters, and events. This strategic move helps to create an association to the consistency and experience their clients can count on.

So how do you use the color property in CSS?

It’s simple. Color is assigned to a property within the brackets {} of that property. Using the code below as an example, look at how the color “steelblue” is assigned only to h1- i.e. heading one. That means anytime ‘h1’ is used, that specific color will be applied throughout the entire page. Note that if you do not assign a color to text the default is black, as shown below. So whether it’s footer text, paragraph text, and even link text each can be customized by simply adding the color property into the CSS code.

When designing a website, user experience (UX) should always be at the forefront of the designer’s mind. People like consistency and feedback. A simple way to enhance the user’s experience on a website is by changing the color of a link if it is being hovered over, or has been clicked. This color change allows the user to navigate the website more intuitively. Like so…

Changing the color of text is pretty straight forward in CSS, making the color property one of the most basic and nifty properties to utilize. But what about background colors? Changing the background of a textbox or a <div> is applied in the same way, though we must specify background-color, rather than just color. When designing, background colors are commonly used to differentiate grid sections. For example, the side columns, headers, and footers may all have a specific color. This not only creates an interesting layout, but it enhance the user’s interface (UI) experience. The below code shows text-blocks that have the background color set to black.

Notably, it also shows three different ways of assigning the text color to Red. The first example is the most straight forward – just naming the color “Red”. The next two examples are much more precise. They are RGB values and #hexcode, both of which deserve a blog post unto themselves to accurately describe their differences. I wanted to give you a little preview of how color can be extremely customizable. In the mean time, CSS offers a plethora of fun color names to help us customize our creativity. Rest be assured that understanding the versatility and easy applicability of CSS color properties are some of the fastest ways to creating dynamic websites

To edit the CopePen code above, click here to play with the background and text colors.