Learning CSS
- Part 1: Introducing Selectors
- Part 2: Nesting Selectors
- Part 3: Backgrounds and Colors
- Part 4: Margins, Borders, and Padding
- Part 5: Positioning
- Part 6: Working with Fonts
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
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
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
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
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
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
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
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).
Color Rule
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.
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:
Digital Ephemera 