What is class in HTML?

Question

I was at w3schools.com learning html and their code examples included the word "class" such as <div class="page"> . They didn't explain it so i needed you guys to. So please define what class in <div class="page"> means.

Answer 1

MSDN is the best place to look for -

CLASS Attribute - Basically its a string or attribute that specifies or receives the class or css style rule.

Answer 2

A class is a non-unique identifier for HTML elements. It can be used in a variety of ways:

---

1. For styling of those elements with CSS.

To apply a group of CSS properties as a pack to all elements of the class.

.page
{
  border: solid 1px #009900;
  padding: 5px;
  color: #000077;
}

You can apply it like this:

<div class="page">

<ul class="page">

Ans so on.

You can also restrict it to only be valid for a specific element type, for example, only for divs:

div.page
{
  /* ... */
}

2. For accessing these elements with JavaScript.

To perform some manipulations with all elements of the class. Like this:

$('.advancedOption').attr("disabled", true);

3. For some internal operations in browser. Beyond the scope of this question.

Answer 3

The attribute class refers to a CSS class.

For example, in HTML:

<div class="page">

will refer to the CSS code:

div.page {
    some css properties
}

Answer 4

It's just a space-separated list of words you associate with the element that can be used to select it for styling or with a script. A class by itself doesn't do anything — it's like a tag on a blog post.

If you're familiar with the idea of a class in programming, it has nothing to do with that.

Answer 5

A class in html is an attribute you can add to any html element (like paragraphs, links). You can make up the name yourself (has to start with a letter though), and then stylesheets or javascript can do something with that specific element.

For instance:

<p>This is a paragraph with no class</p>
<p class="foo">This paragraph has a class named "foo"</p>
<span class="foo">This span has a class as well

Now if you apply CSS to style your html, you can use:

p { color: blue }
p.foo { color: red }
span.foo { color: green }
.foo { font-size: big }

This way all paragraphs have blue text, except the paragraph with the class 'foo'. The rule p.foo effects only paragraphs with the class foo. The rule span.foo applies only to span elements with the class foo, so that part will have green text. Then finally, the .foo rule applies to all elements with the 'foo' class, so the last two elements will have big-sized text.

You can also have multiple classes. <div class="foo bar"> has the classes foo and bar. You can access those separately in the CSS by using .foo or .bar