Classes & IDs (HTML/CSS/JS)
Target Content with Classes and Id
By assigning a class or id to an HTML element you can apply specific styles in a targeted way.
Try it out
Copy the HTML and CSS above and paste it in a new CodePen.
Take a look at the browser preview and try to decipher what is going on.
Notice how assigning
id="jill-card"
in the HTML allows the element to be "targeted" with the CSS selector#jill-card
.Notice how assigning
class="card"
in the HTML allows several elements to be "targeted" with the CSS selector.card
.Go ahead and give Patrick's text a class of "card" and then add a unique id to his HTML element and some CSS to make his card stand out from all the others.
id - An HTML id is selected in CSS with a #
prefix and should be used to target a single element on a page.
class - An HTML class is selected in CSS with a .
prefix and can be used to select several elements that will share a common style.
Last updated