|
|
|
|
|
The class Attribute |
|
The HTML class attribute makes it possible to define equal
styles for elements with the same class name. |
|
<!DOCTYPE html> |
|
|
<html> |
|
|
|
<head> |
|
|
<style> |
|
|
div.cities { |
|
|
background-color: black; |
|
|
color: white; |
|
|
margin: 20px 0 20px 0; |
|
|
padding: 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="cities"> |
|
|
<h2>London</h2> |
|
|
<p>London is the capital of England. It is the most populous city
in the United Kingdom.</p> |
|
|
</div> |
|
|
|
|
|
<div class="cities"> |
|
|
<h2>Paris</h2> |
|
|
<p>Paris is the capital and most populous city of France.</p> |
|
|
</div> |
|
|
|
|
|
<div class="cities"> |
|
|
<h2>Tokyo</h2> |
|
|
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area, |
|
|
and the most populous metropolitan area in the world.</p> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
Using The class Attribute on Inline Elements |
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<style> |
|
|
span.note { |
|
|
font-size: 120%; |
|
|
color: red; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h1>My <span class="note">Important</span> Heading</h1> |
|
|
<p>This is some <span class="note">important</span> text.</p> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
HTML id Attribute |
|
The id attribute specifies a unique id for an HTML element
(the value must be unique within the HTML document). |
|
|
The id attribute is most used
to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to
manipulate the element with the specific id. |
|
<body> |
|
|
<h1 id="myHeader">Hello
World!</h1> |
Use the id attribute to manipulate text with JavaScript |
|
<button onclick="displayResult()">Change
text</button> |
|
|
<script> |
|
|
function displayResult() { |
|
|
document.getElementById("myHeader").innerHTML = "Have a
nice day!"; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
|
<head> |
|
|
<style> |
|
|
#myHeader { |
Use the id attribute to style text with CSS |
|
color: red; |
|
|
text-align: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1 id="myHeader">W3Schools
is the best!</h1> |
|
|
</body> |
|
|
|
|
|