Apply Basic CSS Selectors in Web Development

Introduction

In this lab, students will explore the fundamental CSS selectors used in web development, focusing on practical techniques for styling web page elements. The lab provides a hands-on approach to understanding how different CSS selectors work, starting with basic tag selectors and progressively advancing to more specific selection methods like class and ID selectors.

Participants will learn to create an HTML file, apply tag selectors to style elements uniformly, implement class selectors for targeted styling, and use ID selectors to uniquely modify individual elements. The lab also covers important concepts such as CSS selector priorities and the use of the !important rule, enabling students to develop a comprehensive understanding of how to effectively control and customize web page design through CSS styling techniques.

Create HTML File and Apply Tag Selector

In this step, you'll learn how to create an HTML file and apply basic tag selectors in CSS. Tag selectors are a fundamental way to style HTML elements by targeting their tag names.

First, let's create an HTML file in the project directory. Open the WebIDE and navigate to the ~/project directory. Create a new file called index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Tag Selector Example</title>
    <style>
      /* We'll add CSS here */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Selectors</h1>
    <p>This is a paragraph about CSS tag selectors.</p>
    <div>This is a div element.</div>
  </body>
</html>

Now, let's apply a tag selector to style our HTML elements. Add the following CSS inside the <style> tag:

/* Tag selector for h1 */
h1 {
  color: blue;
  text-align: center;
}

/* Tag selector for p */
p {
  font-size: 16px;
  color: green;
}

/* Tag selector for div */
div {
  background-color: lightgray;
  padding: 10px;
}

When you save and open this file in a browser, you'll see:

The <h1> element will be blue and centered
The <p> element will be green with a 16px font size
The <div> element will have a light gray background with padding

Example output in the browser:

Blue, centered "Welcome to CSS Selectors" heading
Green paragraph text
Light gray div with padding

Implement Class Selector for Styling Elements

In this step, you'll learn how to use class selectors in CSS to style multiple elements with a shared class attribute. Class selectors provide more flexibility compared to tag selectors by allowing you to apply styles to specific groups of elements.

Open the index.html file from the previous step in the WebIDE. Modify the HTML to include class attributes:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Class Selector Example</title>
    <style>
      /* We'll add class selectors here */
    </style>
  </head>
  <body>
    <h1 class="main-title">Welcome to CSS Class Selectors</h1>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p>This is a normal paragraph.</p>
    <div class="highlight">This is a highlighted div.</div>
  </body>
</html>

Now, add class selectors to your CSS to style elements with specific classes:

/* Class selector for .highlight */
.highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
  padding: 5px;
}

/* Class selector for .main-title */
.main-title {
  color: blue;
  text-align: center;
  font-size: 24px;
}

When you save and open this file in a browser, you'll see:

Elements with the highlight class will have a yellow background
The main title will be blue and centered
Only elements with the highlight class will have special styling

Example output in the browser:

Blue, centered main title
Yellow highlighted paragraph and div
Normal paragraph remains unstyled

Use ID Selector to Target Unique Elements

In this step, you'll learn about ID selectors, which are used to style a unique, single element on a web page. Unlike class selectors that can be applied to multiple elements, an ID selector targets a specific, individual element.

Open the index.html file from the previous step in the WebIDE. Modify the HTML to include an ID attribute:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS ID Selector Example</title>
    <style>
      /* We'll add ID selectors here */
    </style>
  </head>
  <body>
    <h1 class="main-title">Welcome to CSS ID Selectors</h1>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p id="special-paragraph">This is a unique paragraph with an ID.</p>
    <div class="highlight" id="main-content">
      This is a highlighted div with an ID.
    </div>
  </body>
</html>

Now, add ID selectors to your CSS to style specific elements:

/* ID selector for #special-paragraph */
#special-paragraph {
  color: purple;
  font-style: italic;
  border-bottom: 2px solid green;
}

/* ID selector for #main-content */
#main-content {
  background-color: lightblue;
  padding: 10px;
  font-weight: bold;
}

When you save and open this file in a browser, you'll see:

The paragraph with ID special-paragraph will be purple, italic, with a green bottom border
The div with ID main-content will have a light blue background and bold text

Example output in the browser:

Unique styling for the paragraph with an ID
Distinct styling for the div with an ID
Other elements retain their previous styling

Understand CSS Selector Priorities

In this step, you'll learn about CSS selector specificity and how different types of selectors are prioritized when styling elements. Understanding selector priorities helps you control which styles are applied when multiple selectors target the same element.

Open the index.html file from the previous step in the WebIDE. Update the HTML and CSS to demonstrate selector priorities:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Selector Priorities</title>
    <style>
      /* We'll demonstrate selector priorities here */
    </style>
  </head>
  <body>
    <div id="priority-demo" class="highlight">
      <p>Understanding CSS Selector Priorities</p>
    </div>
  </body>
</html>

Now, add CSS to show how different selectors are prioritized:

/* Tag selector (lowest priority) */
p {
  color: green;
  font-size: 16px;
}

/* Class selector (medium priority) */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* ID selector (highest priority) */
#priority-demo {
  color: red;
  font-weight: bold;
}

/* Inline styles would have the highest priority (not shown in this example) */

Selector Priority Hierarchy (from lowest to highest):

Tag Selectors
Class Selectors
ID Selectors
Inline Styles (not demonstrated in this example)

When you save and open this file in a browser, you'll see:

The paragraph text will be red (from ID selector)
The div will have a gray border (from class selector)
The font will be bold (from ID selector)

Example output in the browser:

Red, bold text for the paragraph
Gray border around the div
Demonstrates how more specific selectors override less specific ones

Explore !important Rule in CSS Styling

In this step, you'll learn about the !important rule in CSS, which is a powerful way to override all other styling rules. While it should be used sparingly, it can be helpful in specific situations.

Open the index.html file from the previous step in the WebIDE. Update the HTML to demonstrate the !important rule:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS !important Rule</title>
    <style>
      /* We'll demonstrate the !important rule here */
    </style>
  </head>
  <body>
    <div id="important-demo" class="highlight">
      <p>Understanding the !important CSS Rule</p>
    </div>
  </body>
</html>

Now, add CSS to show how the !important rule overrides other selectors:

/* Normal tag selector */
p {
  color: green;
  font-size: 16px;
}

/* Class selector */
.highlight {
  color: blue;
  border: 2px solid gray;
}

/* ID selector */
#important-demo {
  color: red;
}

/* !important rule (highest priority) */
p {
  color: purple !important;
  font-weight: bold !important;
}

Key points about the !important rule:

It overrides all other selector priorities
Use it very sparingly and only when absolutely necessary
Can make CSS harder to maintain if overused

When you save and open this file in a browser, you'll see:

The paragraph text will be purple and bold
The !important rule takes precedence over other selectors

Example output in the browser:

Purple, bold text for the paragraph
Demonstrates how !important overrides other styling rules

Summary

In this lab, participants explored fundamental CSS selector techniques for web development, starting with basic tag selectors to style HTML elements like headings, paragraphs, and div containers. By applying color, alignment, font size, and background properties, learners gained practical experience in targeting specific HTML elements using their tag names.

The lab progressively introduced more advanced selector methods, demonstrating how class selectors can provide greater styling flexibility by allowing targeted styling across multiple elements. Through hands-on exercises, participants learned to create and apply CSS styles dynamically, understanding the core principles of selector hierarchy and the importance of precise element targeting in web design.

Apply Basic CSS Selectors in Web Development

Introduction

Create HTML File and Apply Tag Selector

Implement Class Selector for Styling Elements

Use ID Selector to Target Unique Elements

Understand CSS Selector Priorities

Explore !important Rule in CSS Styling

Summary

Other CSS Tutorials you may like