What's the use of class attribute on HTML?

(https://www.codecademy.com/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-html-tables/projects/html-wine-festival-schedule)
Actually, I’m now on the HTML table and doing the Wine Festival project. Here has a task to include [class =“left”] in [td] elements under a [tr] element.I haven’t done with CSS. So, I can’t figure out this.

The class attribute indicates a selector rule in the style sheet. It can be applied to multiple elements which receive the same styling.

class="left"
class="right"

We might want a left border on the left class, and a right border on the right class.

css

.left {
    border-left: 2px solid red;
}
.right {
    border-right: 2px solid green;
}

You’ll get into the style sheet any time, now. The above are called selector rules. A selector rule consists of,

  • a selector; the dot prefix indicates a class;
  • an opening curly brace;
  • property declaration(s)
  • closing curly brace

A property declaration consists of,

  • property-name
  • colon
  • property value
  • semi-colon

You will learn about the different types of selectors, but in brief,

  • type selector => any HTML element tagname
  • class selector => any name prefixed with a dot
  • id selector => any name prefixed with a hash (#)

I’ve got a question though. In which lesson I’ll find about selectors?

I think, in case of linking into the internal page or the same page we use id selector.
Am I right?

Please help me to be ensured of it.

Hello @code0891641422. In the CSS lessons, you learn about selectors, and how they work.

Yes, that is correct; the path looks like this:

<a href="#id">Go to the ID</a>

I hope this helps!

CSS will be coming up real soon, and may even be snuck into some of the HTML lessons. It’s more to get us comfortable with the code environment than anything else. Visuals are a big part of pattern recognition, even if we don’t have the wherewithal to put together what we see. I’m speaking code visuals, not colors, styles or pictures.

One almost needs a boilerplate segment to insert here because I’ve said it so many times already… Study HTML to the nines, BEFORE looking at CSS. Style sheets are not the DOM. The HTML document is. That is the skeleton of the DOM.

Forgive that I digress.

We are able to do this because of the special status of id. It is a global variable, and a property of the window object. We can access it in script, as such. You’ll learn about this in due course of time.

Note also that we refer to an id using the # (hash) character. The browser recognizes this character in the location bar. Open any web page. Scroll down well below the fold. In the location bar tack on # to the URL and press Enter. Chances are you’ll scroll to the top of the page.

Read up on page fragments in every detail you can find. It’s foundational material.

2 Likes