Html class in english

HTML Class Attribute

The HTML class attribute is used to specify one or more class names for an element. Commonly, the class attribute points to a class in a style sheet. The class name is case sensitive.

This attribute can also be used by JavaScript via the HTML DOM to make certain changes to HTML elements with a specified class name.

In HTML5, you can use the class attribute for any HTML element.

In HTML 4.01, the class attribute cannot be used with the following elements: , , , , , , , , and .

Although there aren’t specific requirements for the name of classes, it’s better to use names describing the semantic purpose of the element, and not its presentation. The name should begin with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores («_»), and hyphens («-«).

Syntax

html> html> head> title>Title of the document title> style> .red < color: red; > .orange < color: orange; > style> head> body> h1>Example of the HTML class attribute h1> p class="red">It is a some red paragraph. p> p>This is a some text. p> p class="orange">It is a some yellow paragraph. p> body> html>

In CSS, if you want to select elements with a specific class, use a period (.) character followed by the class name.

Example of the HTML class attribute used with CSS:

html> html> head> title>Title of the document title> style> .title < background-color: #1c87c9; color: #ffffff; padding: 20px; > style> head> body> h1>Example of the class attribute h1> h2 class="title">Heading h2> p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h2 class="title">Heading h2> p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> body> html>

HTML elements can also have more than one class name. Each of them must be separated by a space.

Example of the HTML class attribute with multiple class names:

html> html> head> title>Title of the document title> style> .title < background-color: #202131; color: #dddddd; padding: 15px 25px; > .text-right < text-align: right; > style> body> h1>Example of multiple classes h1> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h2 class="title">London h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h2 class="title text-right">Paris h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h2 class="title">Tokyo h2> body> html>

Example of the HTML class attribute with the and

elements:

html> html> head> title>Title of the document title> style> .grey-text < color: #808080; > style> body> h1>Example of the class attribute h1> h2 class="grey-text">Heading h2> p class="grey-text"> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> body> html>

Источник

Classes

CSS classes are commonly used to define a set of CSS styles and then apply them on an HTML element using selectors. To define a class within a CSS stylesheet, use the dot selector, as follows:

Each HTML element can have a set of classes, ordered in a specific order. Each class will potentially add a set of CSS definitions according to the styles that were defined in the page. In this piece of code we have defined a CSS rule that will be applied to every element that contains the «nice» class. This means that once this piece of code has been defined inside the HTML page, the following HTML paragraph will have the style applied to it:

 .nice 
This is a short sentence.
 

HTML5 classList API

HTML5 introduced a new way to edit the class list of an element using the classList collection. Each HTML element returns the collection by accessing the element.classList member. The class list allows to add, remove, toggle and to check if an element contains a specific class.

    .nice 
My text
 var el = document.getElementById("mytext"); el.classList.add("nice"); // adds the nice class to the paragraph el.classList.remove("nice"); // removes the nice class from the paragraph el.classList.toggle("nice"); // adds the nice class to the paragraph again, since it does not currently // contain the nice class. if (el.classList.contains("nice"))  

Since HTML5 is a relatively new standard, it is not supported on all browsers. It is safe enough to use today though. Here is the compatibility table for the feature: http://caniuse.com/#search=classlist

Exercise

This page does not have an exercise yet. You are welcome to contribute one by sending me a pull request:

Источник

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three elements with a class attribute with the value of «city». All of the three elements will be styled equally according to the .city style definition in the head section:

Example

In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section:

Example

My Important Heading

This is some important text.

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces <>:

Example

Create a class named «city»:

London is the capital of England.

Paris is the capital of France.

Tokyo is the capital of Japan.

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified.

In the following example, the first element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

Example

London

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both and

point to the «city» class and will share the same style:

Example

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

Click on a button to hide all elements with the class name «city»:

Don’t worry if you don’t understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

Chapter Summary

• The HTML class attribute specifies one or more class names for an element
• Classes are used by CSS and JavaScript to select and access specific elements
• The class attribute can be used on any HTML element
• The class name is case sensitive
• Different HTML elements can point to the same class name
• JavaScript can access elements with a specific class name with the getElementsByClassName() method

Источник

Id’s & Classes

Now that we have started to semantically divide our content, it is time to introduce yet another set of attributes/values. Up until now, we haven’t been working with the look of your page, but later on you will want to be able to change the look of your webpage and this is where the id’s and classes attributes comes in handy.

Id

This attribute assigns a name to your element. The name must be unique and cannot be used anywhere else in your document. The id is an abbreviation of identifier – so you use the id-attribute when you want to be able to identify this specific element.

You could use the id-element to e.g. define columns in your webpage and the HTML markup would look like this:

Content of the right column
 
Content of the left column
 

I said that id-elements would have to be unique and this means you cannot have two with the same value in you markup – the following example would not render correctly in the browser:

This would be your menu
 
Your first blog-entry
 
Your second blog-entry

Classes

Classes are used to assign some general properties to your element. This means, that you can have several elements in your document with the same class-name. You do this, because you want them to behave and look the same way. Normally this is used for e.g. links or images – when you want a lot of elements to look the same. Below is an example where we assign different classes to the entire blog-entry and to a specific part of the blog-entry.

 
 
Just Another Day 
Written by Christina 
On January 11th
 
This is my second blog entry, and I just wanted to check in on you
 
 
 
My First Blog Entry 
Written by Christina 
On January 10th
 
I’m so happy to write my first blog entry – yay!
 

You can use this in combination with Cascading Style Sheets (CSS). CSS tells the browser how to display a HTML-element, this means that all formatting is (or should be) removed from the HTML-document and stored in a separate file – also referred to as the style sheet. I will not go further into CSS in this tutorial, but it is important that you know there is a thing called style sheets and the design of your webpage is defined in these documents.

What you have learned

• Id’s and classes are attributes
• Id’s are unique to the specific element
• Classes can be used across several elements
• They are normally used in combination with CSS

Is your preferred language not on the list? Click here to help us translate this article into your language!

Источник

Html class in english

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник