Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele ID and Class Attribute | Advanced Concepts
Introduction to HTML

book
ID and Class Attribute

The id and class attributes in HTML are used to identify specific elements on a web page and apply styles to them using CSS.

html

index.html

copy
<div id="my-element">This element has an ID</div>

Let's apply styles to this element using CSS.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="my-element">This element has an ID</div>
</body>
</html>

The class attribute is used to identify multiple elements that share the same class name. An element can have multiple classes, and a class can be used on multiple elements. You can use the class attribute to apply styles to a group of elements with the same class name.

html

index.html

copy
<div class="my-class">This element has a class</div>

Let's add some CSS style.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="my-class">This element has a class</div>
</body>
</html>

You can also combine the id and class attributes to apply styles to specific elements or groups of elements.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="my-class" id="my-element">
This element has a class and an id
</div>
</body>
</html>

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 2

Kysy tekoälyä

expand
ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

We use cookies to make your experience better!
some-alt