Course Content
HTML for Beginners
HTML for Beginners
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.
index
index
index
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.
index
index
index
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.
index
index
index
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.
index
index
index
Styles
A style
attribute is used to write inline CSS for an HTML element. The format for style
attribute is:
index
index
index
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.
Thanks for your feedback!