Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Attributes, Classes, Ids, and Styles | Understanding Basic Elements
HTML for Beginners
course content

Зміст курсу

HTML for Beginners

HTML for Beginners

1. Understanding Basic Elements
2. Working with Semantic Elements, Multimedia Elements and Graphics
3. Working with Advanced Elements

Attributes, Classes, Ids, and Styles

In our last lesson, we learned that the <a> tag uses an attribute called href. Attributes are used to provide additional instructions to a specific tag. We can assign values to most of the attributes. So they often behave like variables.

Attributes are permanently attached to a particular element. The purpose of an attribute is different from one to another. There are mainly two types of attributes: global attributes and element-based attributes. The most popular global attributes are id, class, and style.

Id attribute

It is used to recognize an element uniquely. This is helpful when writing CSS or Javascript codes targeting that specific element later.

html

index

css

index

js

index

copy

They don't change anything in the presentation of the code. However, if you want to change the color of this specific paragraph, you can write CSS code using the id element, as shown below.

html

index

css

index

js

index

copy

Class attribute

The class attribute is used to categorize a set of elements. You can give the same class for several elements. So you can write CSS and Javascript codes targeting that set of elements.

html

index

css

index

js

index

copy

Here first, second and fourth paragraphs belong to the "welcome" class. You can write CSS code to change those three sentences leaving the third one unchanged.

html

index

css

index

js

index

copy

Styles

A style attribute is used to write inline CSS for an HTML element. The format for style attribute is:

html

index

css

index

js

index

copy

You can use hundreds of CSS properties with the style attribute.

There are other global attributes. But they are not commonly used. Apart from global attributes, there are a lot of attributes that can be used only with certain elements. You will learn a lot about them in future chapters.

1. Which attribute is used to uniquely recognize an element?
2. How to change the color of a heading?

Which attribute is used to uniquely recognize an element?

Виберіть правильну відповідь

How to change the color of a heading?

Виберіть правильну відповідь

Все було зрозуміло?

Секція 1. Розділ 3
We're sorry to hear that something went wrong. What happened?
some-alt