Using IDs to Reference HTML Elements
We can apply CSS styles to a particular HTML element by referencing it with some ID. We give IDs to HTML elements using attribute id. Let’s give h1 element some id.
<h1 id = “foo”>This is heading 1</h1>We can use this ID to give style to this particular element. Here is what our code will look like.
<html>
<head>
<style>
#foo {
Color:blue;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<h1 id = “foo”> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
Notice that in the <style> element, we have used # before the ID name to reference the element and add properties to it.
Using CSS Classes
Apart from IDs, we also have CSS classes to add properties to particular elements. We give a class name to elements by adding it class attribute.
<html>
<head>
<style>
.foo {
Color:blue;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<h1 class = “foo”> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
Notice that we have used the dot (.) before the class name in <style> element to add properties to this class. Now if you add this class name to any other element, the same style will be applied to that also. Classes allow us to write CSS code once and add to any number of elements by adding class attribute to them just like above.
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply