While setting up your HTML document, you use basic elements like <h1>, <p>, <header>, and <footer> to organize your content.
In that sea of countless elements, you need a way to target specific elements to manipulate how they look and function especially when working with large amounts of code.
In the following example, I created a list of my favorite shows to watch during the summer. Now looking at it doesn’t seem like much but at least it gives me time to free up my DVR so I can’t be mad. I have the option to only highlight all the elements like h1 but why be so #basic with my list.
Using id
Now there are some pretty basic rules when using the id attribute within the HTML document. First and foremost, specify a unique id for an HTML element, but there can’t be more than one element sharing that id attribute. The syntax for id is a hash character (#) followed by the id name. Just remember that the id name is case-sensitive, cannot start with a number, and must not contain whitespaces.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>test</title><!-- <link href="style.css" rel="stylesheet" type="text/css" /> --><style>#intro {background-color: teal;color: white;border: 2px solid gray;margin: 20px;padding: 20px;}</style></head><body><h1 id="intro">List of Favorite Summer TV Shows</h1><div><h2>Sunday</h2><h4>Rick and Morty</h4><h2>Monday</h2><h4>America's Ninja Warrior</h4><h2>Tuesday</h2><h4">America's Next Top Dog</h4><h2>Wednesday</h2><h4>Crank Yankers</h4><h2>Thursday</h2><h2>Friday</h2><h2>Saturday</h2></div><script src="script.js"></script></body></html>
In the example above, I used the id attribute #intro for the h1 element to highlight the title. After running the code snippet, you’ll see the formatted title as you can see below.
Using class
Using the class attribute is a little more forgiving, I guess you would say. Unlike the id attribute, classcan be used on multiple elements with no consequence. You also have the added option to add multiple more than one class attribute to a single element. The syntax for class is a period character (.) followed by the class name. Also just like id name, the class name is case-sensitive.
<!DOCTYPE html><html><head><style>.intro {background-color: teal;color: white;border: 2px solid gray;margin: 20px;padding: 20px;}.day {background-color: lightcoral;color: white;border: 2px solid gray;}.center {text-align: center;}</style></head><body>
<h1 class="intro center">List of Favorite Summer TV Shows</h1><div><h2 class="day center">Sunday</h2><h4 class="show center">Rick and Morty</h4><h2 class="day center">Monday</h2><h4 class="show center">America's Ninja Warrior</h4><h2 class="day center">Tuesday</h2><h4 class="show center">America's Next Top Dog</h4><h2 class="day center">Wednesday</h2><h4 class="show center">Crank Yankers</h4><h2 class="day center">Thursday</h2><h2 class="day center">Friday</h2><h2 class="day center">Saturday</h2></div></body></html>
In the example above, I used the class attribute .dayfor each of the h2 elements with the day of the week and added an additional class attribute .center . Once the code has run, you’ll see the colorful yet organized display as you can see below.
Feel free and comment, share and check out some of the resources posted below. Thanks for reading!
