Reputation: 23

What is class in HTML?

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.

Upvotes: 2

Answers (7)

Ahmed Mansour

Reputation: 590

i know it is a very old question but i hope my answer helps any newbie who comes here searching for a simplified answer.

in brief, you may consider the class as a set of names for the element. those names you may use any of them to call the element anytime on the same page.

it can be used to select the element to style it, change it, add some behavior for it, and/or remove it.

example:

<div class="sara"></div>

this sara element can be selected in css like the following ex:

<style>
.sara{color:red}
</style>

or in javascript like the following ex:

<script>
document.querySelector('.sara').remove()
</script>

I hope this simplified answer helps

Upvotes: 0

user151323

Reputation:

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.

Upvotes: 11

Dexter

Reputation: 5726

A class is best thought of as a 'category' or 'type'. This is best demonstrated with an example.

Let's say you have an HTML page that will have a table of products. In that table, you will have the products name, description, etc. Now, suppose you wanted ALL the products name to be styled a specific way.

<p class='product-standard'>This is a product name</p>

Then with your CSS you can do something like this:

p.product-standard { color:gray; }

So now, all

tags with the class 'product-standard' will be gray.

Now, if you want certain sale items to be red, you can do this:

<p class='product-sale'>Sale item</p>

and

p.product-sale {color:red}

Classes allow you have consistent styling across many html tags.

Upvotes: 3

Stephan Muller

Reputation: 27600

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

Upvotes: 0

Chuck

Reputation: 237010

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.

Upvotes: 1