Set Border Colors in CSS

Introduction

In this lab, you will learn how to set and manipulate border colors using CSS, exploring various techniques to style HTML elements. The lab guides you through creating an HTML file, applying inline border styles, setting individual border colors, and experimenting with different color variations across multiple elements. By following the step-by-step instructions, you'll gain practical skills in using CSS to enhance the visual appearance of web page components through border styling.

The lab provides a hands-on approach to understanding border color properties, starting with a basic HTML structure and progressively adding more complex styling techniques. You'll discover how to apply border colors directly to elements, customize individual border sides, and create visually interesting designs using different color approaches.

Create HTML File and Basic Structure

In this step, you'll learn how to create a basic HTML file that will serve as the foundation for exploring CSS border colors. We'll use the WebIDE to create and set up our initial HTML structure.

First, navigate to the ~/project directory in the WebIDE. Create a new file called index.html by right-clicking in the file explorer and selecting "New File".

Here's the basic HTML structure you'll create:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border Colors Exploration</h1>
      <p>This is our first HTML element to style with borders.</p>
    </div>
  </body>
</html>

Let's break down the key components of this HTML structure:

<!DOCTYPE html> declares this as an HTML5 document
The <html> tag is the root element of the HTML page
<head> contains meta information about the document
<body> contains the visible page content
We've added a container <div> with a heading and paragraph to provide elements we'll style in later steps

After creating the file, save it by pressing Ctrl+S or using the save icon in the WebIDE.

Example output when viewing the file contents:

$ cat ~/project/index.html
<!DOCTYPE html>
html lang="en">
...

This simple HTML structure provides the foundation for our CSS border color exploration in the upcoming steps.

Add Inline Border Style

In this step, you'll learn how to add inline border styles directly to HTML elements using the style attribute. Inline styles are a quick way to apply CSS properties directly to individual elements.

Open the index.html file in the WebIDE that you created in the previous step. Modify the HTML to include inline border styles for different elements:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
  </head>
  <body>
    <div class="container">
      <h1 style="border: 2px solid black;">CSS Border Colors Exploration</h1>
      <p style="border: 3px dotted blue;">
        This is our first HTML element with an inline border style.
      </p>
      <div style="border: 4px dashed red; padding: 10px;">
        This div has a different border style and width.
      </div>
    </div>
  </body>
</html>

Let's break down the inline border styles:

border: 2px solid black; creates a 2-pixel wide, solid black border
border: 3px dotted blue; creates a 3-pixel wide, dotted blue border
border: 4px dashed red; creates a 4-pixel wide, dashed red border

The border property is a shorthand that combines:

Border width (in pixels)
Border style (solid, dotted, dashed, etc.)
Border color

Example output when viewing the file contents:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1 style="border: 2px solid black;">...

Save the file by pressing Ctrl+S or using the save icon in the WebIDE.

Set Individual Border Colors

In this step, you'll learn how to set individual border colors for different sides of an HTML element using CSS. This technique allows for more precise and creative border styling.

Open the index.html file in the WebIDE and update it with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
    <style>
      .individual-borders {
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: purple;
        border-style: solid;
        border-width: 4px;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Individual Border Colors</h1>
      <div class="individual-borders">
        This div has different colors for each border side.
      </div>
      <p>Notice how each border side has a unique color!</p>
    </div>
  </body>
</html>

Key CSS properties for individual border colors:

border-top-color: Sets the color of the top border
border-right-color: Sets the color of the right border
border-bottom-color: Sets the color of the bottom border
border-left-color: Sets the color of the left border

We've also added:

border-style: solid; to ensure the borders are visible
border-width: 4px; to make the borders more prominent

Example output when viewing the file contents:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="individual-borders">...

Save the file by pressing Ctrl+S or using the save icon in the WebIDE.

Experiment with Border Color Variations

In this step, you'll explore different ways to specify border colors using various CSS color formats and techniques. Open the index.html file in the WebIDE and update it with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border Color Variations</title>
    <style>
      .color-demo {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
      }

      .named-color {
        border: 5px solid tomato;
      }

      .hex-color {
        border: 5px solid #4caf50;
      }

      .rgb-color {
        border: 5px solid rgb(33, 150, 243);
      }

      .rgba-color {
        border: 5px solid rgba(255, 152, 0, 0.7);
      }

      .hsl-color {
        border: 5px solid hsl(120, 100%, 25%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Border Color Variations</h1>

      <div class="color-demo named-color">Named Color (Tomato)</div>

      <div class="color-demo hex-color">Hex Color (#4CAF50)</div>

      <div class="color-demo rgb-color">RGB Color (Blue)</div>

      <div class="color-demo rgba-color">RGBA Color (Transparent Orange)</div>

      <div class="color-demo hsl-color">HSL Color (Dark Green)</div>
    </div>
  </body>
</html>

Color Specification Methods:

Named Colors: Use predefined color names like tomato
Hex Colors: Use 6-digit hexadecimal codes (e.g., #4CAF50)
RGB Colors: Use rgb(red, green, blue) format
RGBA Colors: Add alpha transparency with rgba()
HSL Colors: Use hsl(hue, saturation, lightness) format

Example output when viewing the file contents:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...

Save the file by pressing Ctrl+S or using the save icon in the WebIDE.

Apply Border Color to Different Elements

In this step, you'll learn how to apply border colors to different HTML elements, demonstrating how CSS can style various elements uniquely. Open the index.html file in the WebIDE and update it with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border Colors on Different Elements</title>
    <style>
      /* Heading styles */
      h1 {
        border: 3px solid #2196f3;
        padding: 10px;
        text-align: center;
      }

      /* Paragraph styles */
      p {
        border: 2px dashed green;
        padding: 15px;
        margin: 10px 0;
      }

      /* Button styles */
      .custom-button {
        border: 4px dotted purple;
        background-color: #f0f0f0;
        padding: 10px 20px;
        display: inline-block;
        margin: 10px;
      }

      /* Image styles */
      .bordered-image {
        border: 5px solid orange;
        max-width: 300px;
      }

      /* List styles */
      ul {
        border: 3px solid red;
        padding: 20px;
      }

      li {
        border-bottom: 1px solid #ccc;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Styling Different Elements</h1>

      <p>This paragraph has a green dashed border.</p>

      <button class="custom-button">Bordered Button</button>

      <img
        class="bordered-image"
        src="https://via.placeholder.com/300"
        alt="Placeholder Image"
      />

      <ul>
        <li>List item with bottom border</li>
        <li>Another list item</li>
        <li>Last list item</li>
      </ul>
    </div>
  </body>
</html>

Key Points:

Different elements can have unique border styles
Use CSS selectors to target specific element types
Combine border properties like color, style, and width
Placeholder image used for demonstration

Example output when viewing the file contents:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1>Styling Different Elements</h1>
...

Save the file by pressing Ctrl+S or using the save icon in the WebIDE.

Summary

In this lab, participants learn the fundamentals of setting border colors in CSS through a step-by-step approach. Starting with creating a basic HTML file structure, learners establish a foundation for exploring CSS border styling techniques. The initial steps focus on understanding how to apply inline border styles directly to HTML elements using the style attribute, demonstrating a quick method for adding visual borders to web page components.

The lab progresses by teaching how to set individual border colors, experiment with different color variations, and apply border colors to various HTML elements. By working through practical examples, participants gain hands-on experience in manipulating border styles, understanding how CSS can be used to enhance the visual presentation of web pages through precise border color control.