Working with Colors

Intro to CSS Color Styling

Build a Blog Site: This is the third part of the Build a Blog Site tutorial series.
The focus of this tutorial is on CSS color styling.

Simulate Bootstrap: For the rest of this tutorial series we will be mimicking Bootstrap classes, using the same Bootstrap class names, and applying the same or similar style but with less complex style rules.
This serves the dual purpose of learning Bootstrap, and at the same time, learning how to create CSS style rules.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.

Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v3-color"
Right click in the html page and select "Open with Live Server".

Written and Video tutorial: There are both a video and written version of each tutorial. For the HTML-CSS tutorial series the video and written versions have a different focus. The video tutorials are focused on the blog site project. The written tutorial is focused on the all the subtopics within the CheatSheet major topic.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference going forward. As such, it is recommended that you review the CheatSheet category that aligns with this tutorial.

Color Properties

[0:00 and 1:10 Video timestamps]

Color can be applied to text, background, and borders. Below is an example for a class named box.

.box { 
  color: white; /* text color */
  background-color: blue;
  border-color: black;
}

To set color to the entire site, apply it to the body element.

body { 
  color: MidnightBlue; /* text color */
  background-color: GhostWhite;
}

Color Notation: named color, hexadecimal, RGB

You can set the color property values as color names, hexadecimal string notation, or RGB functional notation.

Named colors:

[2:18 Video timestamp]

A useful list of color names can be found at w3schools.com/colors/colors_names.asp
The names are case insensitive. The names are user friendly, but there are only a limited set of named colors.
Example:

.text-danger {
  color: red;
}

Hexadecimal string notation:

[2:26 Video timestamp]

These are 6 hexadecimal character strings that start with the pound sign: #000000
There are 16 hexadecimal character values: 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F.
The letter values are case insensitive.
The string notation uses the Red-Green-Blue spectrum, where the first two characters represent Red, the second two represent Green, and the third two represent Blue.
00 is the darkest value, FF is the brightest, so #000000 is black, #ff0000 is bright red, #00ff00 is bright green, #0000ff is bright blue, and #ffffff is white.

Common color examples:
black: #000000
white: #ffffff
gray: #808080
red: #ff0000
green: #008000
blue: #0000ff
yellow: #ffff00
purple: #800080
brown: #a52a2a
maroon: #800000
olive: #808000
navy: #000080
teal: #008080
silver: #c0c0c0
fuchsia: #ff00ff
lime: #00ff00
aqua: #00ffff

The below style rule example sets the text-danger class color property to bright red.

.text-danger {
  color: #ff0000;
}

A useful tool for picking colors can be found at w3schools.com/colors/colors_picker.asp

RGB functional notation:

You can use RGB functional notation using this format: rgb(r,g,b)
Red, green, and blue are combined to create colors.
Each color on the spectrum can be a value from 0 to 255, with 0 being darkest and 255 being the brightest for that color.
So rgb(0,0,0) is black, rgb(255,0,0) is bright red, rgb(0,255,0) is bright green, rgb(0,0,255) is bright blue, and rgb(255,255,255) is white.

The below style rule example sets the text-danger class color property to bright red.

.text-danger {
  color: rgb(255,0,0);
}

Opacity:

You can add an alpha value at the end of the rgb function to set a value for opacity.
The higher the value, the more opaque the color is, the lower the value, the more transparent the color is. The default is the maximum value making it fully opaque.

Using rgb(255,0,0) which is bright red, as an example, we can make it lighter by adding an alpha value at the end. It can range from 0.0 which is completely clear, to 1.0 which is fully opaque. 1.0 is the default.
When you put opacity below 1.0 (i.e., below 100%) then the color becomes partially transparent and the color behind it will partially come through.

rgb(255,0,0,0.25) is red at 25% opacity.
rgb(255,0,0,0.5) is red at 50% opacity.
rgb(255,0,0,0.75) is red at 75% opacity.

The below style rule example sets the text-danger class color property to red at 75% opacity.

.text-danger {
  background-color: rgb(255,0,0,0.75);
}

You can also add an alpha value to the end of a hexadecimal color value. However, like the R-G-B values, the alpha value uses two hexadecimal characters, so it is not intuitive to use.
For instance #ff0000 sets color to bright red. #ff000080 sets the color to bright red, at 50% opacity.

Bootstrap colors

[3:34 Video timestamp]

Bootstrap has classes to set colors.
For the Bootstrap documentation, go to getbootstrap.com/docs and in the sidebar Utilities section, click the colors link.

Bootstrap color names:

primary is blue, hex value #0d6efd.
secondary is grey, hex value #6c757d.
success is green, hex value #198754.
danger is red, hex value #dc3545.
warning is yellow, hex value #ffc107.
info is light blue, hex value #0dcaf0.
light is light grey, hex value #f8f9fa.
dark is blackish, hex value #212529.
white is white, hex value #ffffff.
muted is grey, hex value #6c757d.

Prepend text- to the Bootstrap color name to apply it to text (e.g., text-primary)
Prepend bg- to the Bootstrap color name to apply it to background (e.g., bg-light).

The below example h1 element uses Bootstrap color classes to style the background color blue, and the text color white.
<h1 class="bg-primary text-white">What color am I?</h1>

Add Bootstrap Classes and the Bootstrap CDN to the Blog Site project

Open the Blog Site example project in your text editor.
We'll add the above Bootstrap classes to the index.html page.

In the index file head element, add a link to the Bootstrap CDN.

Get the latest link from getbootstrap.com home page. Scroll to "Include via CDN" and copy the CSS link, then paste it the index file.
Comment out the link to our own stylesheet.

In the nav element, add classes text-white and bg-dark.
Also add classes text-white and bg-dark to the first article element.
Add the text-muted class to the paragraphs that list the author and date.
In the aside element where we'll put our About information, add class bg-light.
In the footer element add class bg-light.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="INSERT SITE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">

  <title>Blog Site</title>
  PASTE BOOTSTRAP CDN LINK HERE
  <!-- <link href="/stylesheets/styles.css" rel="stylesheet"> -->

</head>
<body>
  <nav class="text-white bg-dark">Navigation Bar Here</nav>

  <main>
    <article class="text-white bg-dark">
      <h1>Highlighted Article title 1</h1>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Highlighted Article title 2</h3>
      <p class="text-muted">Author and date</p>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Highlighted Article title 3</h3>
      <p class="text-muted">Author and date</p>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Article title N</h3>
      <p class="text-muted">Author and date</p>
      <p>Summary and link.</p> 
    </article>
    <aside class="bg-light">
      <h4>About</h4>
      <p>About you, your business, and/or your blog content focus.</p>
      <p>Lorem ipsum...</p>
      <address>email: me@example.com</address>
    </aside>
  </main>

  <footer class="bg-light">Footer Here</footer>
</body>
</html>

Save the changes.
To see the result, if you are using VS Code with Live Server, right click in the editor and select "Open with Live Server".
Then in the browser at http://127.0.0.1:5500 you should see the colors we applied.

Mimic the Bootstrap classes in our own Stylesheet

Create a new CSS file in the stylesheets folder called mimic-bootstrap.css

Comment out the link to the Bootstrap CDN and add a link to the mimic-bootstrap stylesheet.

<!-- BOOTSTRAP CDN LINK -->
<link href="/stylesheets/mimic-bootstrap.css" rel="stylesheet">

Save the change.
If you look at the Web page again, the colors should be gone.

Add Style rules to the stylesheet

We will set our own style rules to the Bootstrap class names that mimic the Bootstrap styles.

In the stylesheet/mimic-bootstrap.css file, add the below classes and style rules to set text color including:

text-white,
text-muted which grey's out the text,
and text-dark which applies a charcoal color to the text.

And add classes to set background color, including:

bg-dark which set the background color to charcoal
and bg-light which set the background color to off white.
In the background-color declarations, append !important to make sure it has precedence.

stylesheets/mimic-bootstrap.css

/* -- COLOR -- */
.text-white {
  color: white; 
}
.text-muted {
  color: #6c757d;
}
.text-dark {
  color: #212529;
}
.bg-dark {
  background-color: #212529 !important;
}
.bg-light {
  background-color: #f8f9fa !important;
}

Save the changes.
Refresh the web page and you should see the colors are back.

Add classes to the article-template.html file

We will also add color classes to the article-template.html file.

Make sure there is a link to the stylesheet.
In the nav element, add classes text-white and bg-dark.
In the header element add class bg-light.
In the nav element that holds the Table of Contents, add class bg-light.
In the footer element add class bg-light.

articles/article-template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="INSERT ARTICLE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>ARTICLE TITLE HERE</title>
  <link href="/stylesheets/mimic-bootstrap.css" rel="stylesheet"> 
</head>
<body>
  <nav class="text-white bg-dark">Navigation Bar Here</nav>
  <article>
    <header class="bg-light">
      <h1>Article Title</h1>
      <p>Author, date, article introduction.</p> 
    </header>
    <main>
      <h2 id="topic-1">Article Topic 1</h2>
      <p>Put your topic summary here.</p>
      <h3 id="subtopic-1a">Subtopic 1A</h3>
      <p>Put your subtopic text here.</p>
      <h3 id="subtopic-1b">Subtopic 1B</h3>
      <p>Put your next subtopic text here.</p>
      <hr>
      <h2 id="elements">HTML Element Examples</h2>
      <p>Below are common HTML elements to use in articles.</p>
      
      <h3 id="elements-image">Images</h3>
      <figure>
        <img src="/images/placeholder-x.png" alt="placeholder">
        <figcaption>Image Caption</figcaption>
      </figure>    
    </main>
    <nav class="bg-light">
      <h5>Table of Contents (sidebar)</h4>
      <ul>
        <li>Link to heading id "topic-1"</li>
        <li>Link to heading id "subtopic-1a"</li>
        <li>Link to heading id "subtopic-1b"</li>
      </ul>
    </nav>
  </article>
  <footer class="bg-light">Footer Here</footer>
</body>
</html>

To see the result:

Save the changes,
Go to the browser and add the article-template path:

http://127.0.0.1:5500/articles/article-template.html

Now we have some color on our site, but it's still far from presentable.

Working with Colors (Video Tutorial)