Classes and IDs are used to target specific elements in a page.
Using classes
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<section>
<h1 class="myH1header">This is my heading h1 text</h1>
<p>This is come text under my h1 tag.</p>
</section>
</body>
</html>
style.css
/* Begin of my style sheet */
.myH1header {
color: blue;
}
When using the class attribute, we can set several class names. This is useful if we want to set for example the colour and size separately, i.e. they’re both not within the same class definition.
For example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<section>
<h1 class="myH1headerColor myH1headerSize">This is my heading h1 text</h1>
<h1 class="myH1headerColor myH1headerSize">This is my other heading h1 text</h1>
<p>This is come text under my h1 tag.</p>
</section>
</body>
</html>
style.css
/* Begin of my style sheet */
.myH1headerColor {
color: blue;
}
.myH1headerSize {
font-size: 40px;
}
Within a container
The container could be <div> and </div> tags, but here we will use the <section> </section> container tags to demonstrate targetting specific text.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<section class="section-class">
<h1 class="myH1headerStyle">This is my heading h1 text</h1>
<p>This is come text under my h1 tag.</p>
</section>
</body>
</html>
style.css
/* Begin of my style sheet */
.myH1headerStyle {
color: blue;
font-size: 60px;
}
.section-class p {
color: red;
font-size: 40px;
}
In the above example, we can see how the code in the style.css is targetting the paragraph (p) tag that is within the <section> container that we’ve labelled with a class ‘section-class’.
Using IDs
ID’s can be used to style a page as follows
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<section>
<h1 class="myH1headerStyle" id="H1styling">This is my heading h1 text</h1>
<p>This is come text under my h1 tag.</p>
</section>
</body>
</html>
style.css
/* Begin of my style sheet */
/*.myH1headerStyle {
color: blue;
font-size: 60px;
}*/
#H1styling {
color: green;
font-size: 80px;
}
We can see that to refer to an ID, we use the # tag in our css file. However, generally speaking, we don’t use IDs in this way.
ID’s are very useful in HTML to give a location of the area of a page. For example, if we had a list of information, we could give each part of that list an ID. This then allows us to create links to jump to areas of the page with the relevant information. This is a particular strength of using IDs.
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<section>
<a href="#Section1">My link to the 1 section</a>
<a href="#Section2">My link to the 2 section</a>
<a href="#Section3">My link to the 3 section</a>
<p id="Section1">Quisque ut nisi. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Curabitur at lacus ac velit ornare lobortis. Vivamus aliquet elit ac nisl. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nam commodo suscipit quam. Mauris sollicitudin fermentum libero. Nullam vel sem. Quisque malesuada placerat nisl. mus in erat ut urna cursus vestibulum. Aliquam eu nunc. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Donec mollis hendrerit risus. Praesent egestas tristique nibh.
In consectetuer turpis ut velit. Nulla consequat massa quis enim. Donec sodales sagittis magna. Donec posuere vulputate arcu.
Fusce neque. Sed fringilla mauris sit amet nibh. Praesent turpis. Etiam iaculis nunc ac metus. Vestibulum volutpat pretium libero.</p>
<p>This is come text under my h1 tag.</p>
<p id="Section2">Quisque ut nisi. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Curabitur at lacus ac velit ornare lobortis. Vivamus aliquet elit ac nisl. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nam commodo suscipit quam. Mauris sollicitudin fermentum libero. Nullam vel sem. Quisque malesuada placerat nisl. mus in erat ut urna cursus vestibulum. Aliquam eu nunc. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Donec mollis hendrerit risus. Praesent egestas tristique nibh.
In consectetuer turpis ut velit. Nulla consequat massa quis enim. Donec sodales sagittis magna. Donec posuere vulputate arcu.
Fusce neque. Sed fringilla mauris sit amet nibh. Praesent turpis. Etiam iaculis nunc ac metus. Vestibulum volutpat pretium libero.</p>
<p>This is come text under my h1 tag.</p>
<p id="Section3">Quisque ut nisi. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Curabitur at lacus ac velit ornare lobortis. Vivamus aliquet elit ac nisl. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nam commodo suscipit quam. Mauris sollicitudin fermentum libero. Nullam vel sem. Quisque malesuada placerat nisl. mus in erat ut urna cursus vestibulum. Aliquam eu nunc. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Donec mollis hendrerit risus. Praesent egestas tristique nibh.
In consectetuer turpis ut velit. Nulla consequat massa quis enim. Donec sodales sagittis magna. Donec posuere vulputate arcu.
Fusce neque. Sed fringilla mauris sit amet nibh. Praesent turpis. Etiam iaculis nunc ac metus. Vestibulum volutpat pretium libero.</p>
<p>This is come text under my h1 tag.</p>
</section>
</body>
</html>