CSS Fundamentals

Topic Overview

The Anatomy of Style

Select and Declare Elements and Rules Property and Value The Anatomy of Style TODO

Style Guide

Where to Style The Style Attribute The Style Element The Style Document TODO

CSS Documents

Directory Placement The <link> Tag Relationship Type Href The <link> Element TODO

CSS Applied

Comments in CSS Understanding Styling Applying Style TODO

Selector Types

Universal Selectors Element Selectors Class Selectors ID Selectors TODO

Cascading

Cascading in CSS Rules Order Specificity Setting Importance TODO

Exploring Color

Specifying Color Color Names RGB Values Hex Codes Saturated Color Desaturated Color (Grayscale) Combining Colors TODO

Using Color

Background Color Text Color Opacity Basic Positioning Learn More TODO

Desaturated Color (Grayscale)

We know from color theory, that white is the presence of all colors and black is the absence of all colors. Knowing this, we can deduce that black would be all 0’s and white would be all full value.

Name: black;
RGB: rgb(0, 0, 0);
Hex: #000000;

Name: white;
RGB: rgb(255, 255, 255);
Hex: #ffffff;

Following from this principle, to get any color within the grey scale, we simply need to provide the same value for each color.

#000000 - rgb(0, 0, 0);

#101010 - rgb(16, 16, 16);

#202020 - rgb(32, 32, 32);

#303030 - rgb(48, 48, 48);

#404040 - rgb(64, 64, 64);

#505050 - rgb(80, 80, 80);

#606060 - rgb(96, 96, 96);

#707070 - rgb(112, 112, 112);

#808080 - rgb(128, 128, 128);

#909090 - rgb(144, 144, 144);

#a0a0a0 - rgb(160, 160, 160);

#b0b0b0 - rgb(176, 176, 176);

#c0c0c0 - rgb(192, 192, 192);

#d0d0d0 - rgb(208, 208, 208);

#e0e0e0 - rgb(224, 224, 224);

#f0f0f0 - rgb(240, 240, 240);

#ffffff - rgb(255, 255, 255);