Learning CSS: Part 3: Backgrounds and Colors

Learning CSS

Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.


Backgrounds and Colors

Two of the most common actions when using CSS is to change the color of some elements. As shown in the previous part on Nesting Selectors, one way to change the color of one or more elements is to use the rule color and then a named color. While there are over a hundred named colors, CSS also understands other ways of representing and showing colors.

CSS Representation of Colors

Borrowing heavily from the history of design, colors in CSS can be represented in a wide array of different ways.

Named Colors

Screenshot 2018-09-11 11.33.49

Named colors are simply that: colors which have pre-set names. They can be used in most browsers and are a quick way to use a color based on knowing its name.

RGB

Screenshot 2018-09-11 11.35.33

RGB stands for Red, Green, and Blue. Through a mixture of these three colors, all others can be created. Values for each color must be expressed in the range of 0 (least) to 255 (maximum) of that color. Taken in combination, they represent a full spectrum of colors.

Hexadecimal

Screenshot 2018-09-11 17.19.22

Hexadecimal is a type of numerical representation where multiples of 16 are used to calculate larger numbers. In this system, number go up to 9 and values form 10-15 are replaced with letters a – f. Starting with the decimal representation of rgb(255, 192, 203), it can be represented as FFC0CB in hexadecimal.

HSL

Screenshot 2018-09-11 17.24.43

HSL stands for Hue, Saturation, and Lightness. The first value, hue, is from 0 to 360 on the color wheel. The second and third values, Saturation and Lightness, are percentages of full color and shades of grey.

RGBA

Screenshot 2018-09-11 17.29.20

RGBA stands for Red, Green, Blue, and Alpha. It works like RGB, but with an additional value for how transparent the color should be. Values can range from 0.0 (fully transparent) to 1.0 (fully opaque).

HSLA

Screenshot 2018-09-11 17.32.15

Similar to HSL and RGBA, HSLA is HSL with a alpha (transparent) value from 0.0 (fully transparent) to 1.0 (fully opaque).

Background Rule

Screenshot 2018-09-11 17.36.43

The background rule in CSS is one of the most complicated rules in CSS simply because it serves a short-hand to many other background-related rules such as clip, color, image, origin, position, repeat, size, and attachment.

However, and in general, it does as it name implies: it sets the background. When used with one of the various ways to represent colors in CSS, for example, it sets the color of the background for that element (and all of its children).

Screenshot 2018-09-11 17.38.17

Color Rule

Screenshot 2018-09-11 17.40.02

The color rule sets the color of the default content of a document. Since nearly all HTML document use text, this sets the color of text.

When used with the background rule, it can create a color contrast between the background and the color of the text itself.

Screenshot 2018-09-11 17.42.17

The color rule, like all other CSS rules, cascade down from a parent element to its children. Unless overridden by another, it becomes the new rule.

Codepen Example:

See the Pen Learning CSS: Part 3: Backgrounds and Colors by Dan Cox (@videlais) on CodePen.

Mozilla Thimble Example:

Remix on Mozilla Thimble!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s