More on HTML Tags and CSS Selectors
Since we know basic HTML and CSS, let's start by considering an example. The following HTML/CSS code creates a web page with blue-colored headings, styled using CSS.
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1> First Heading </h1>
9 <p> Hello World! </p>
10 <h1> Second Heading</h1>
11</body>
12</html>1h1{
2 color: blue;
3}
However, as we have selected the entire h1 heading as a CSS selector, it colored both the headings blue.
To color individual h1 headings with a different color, we can assign IDs or classes as attributes to respective h1 HTML tags. In CSS, we can refer to these tags by using ID selectors (# symbol) and class selectors (. symbol)for styling. This is a common technique for the styling of HTML elements. Let's look at an example.
1<!DOCTYPE html>
2<html>
3<head>
4 <title> My First Webpage </title>
5 <link rel="stylesheet" href="style.css">
6</head>
7<body>
8 <h1 id="first"> First Heading </h1>
9 <p> Hello World! </p>
10 <h1 class="headings"> Second Heading </h1>
11</body>
12</html>1#first{
2 color: blue;
3}
4.headings{
5 color: green;
6}
The difference between an ID and a class attribute is that an ID is unique to a specific HTML attribute, and can be specified to only one element. Unlike an ID, a class can be used for multiple HTML elements. This makes classes a more generalized method of styling HTML elements.