Using IDs & CSS Classes – CSS

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.

Leave a Reply

Your email address will not be published.

8 + 6 =