The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Here we have three <div> elements that points to the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
div.info {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="info">
<h2>Leonardo Da Vinci</h2>
<p>His keen eye and quick mind led him to make important scientific discoveries, yet he never published his ideas. He was a vegetarian who loved animals and despised war, yet he worked as a military engineer to invent advanced and deadly weapons.</p>
</div>
<div class="info">
<h2>Nikola Tesla</h2>
<p>Inventor Nikola Tesla contributed to the development of the alternating-current electrical system that's widely used today and discovered the rotating magnetic field.</p>
</div>
<div class="info">
<h2>Thomas Edison</h2>
<p>Inventor Thomas Edison created such great innovations as the practical incandescent electric light bulb and the phonograph. A savvy businessman, he held more than 1,000 patents for his inventions.</p>
</div>
</body>
</html>
Using The class Attribute on Inline Elements
The HTML class attribute can also be used for inline elements:
Example
<!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>
Read More...
Here we have three <div> elements that points to the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
div.info {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="info">
<h2>Leonardo Da Vinci</h2>
<p>His keen eye and quick mind led him to make important scientific discoveries, yet he never published his ideas. He was a vegetarian who loved animals and despised war, yet he worked as a military engineer to invent advanced and deadly weapons.</p>
</div>
<div class="info">
<h2>Nikola Tesla</h2>
<p>Inventor Nikola Tesla contributed to the development of the alternating-current electrical system that's widely used today and discovered the rotating magnetic field.</p>
</div>
<div class="info">
<h2>Thomas Edison</h2>
<p>Inventor Thomas Edison created such great innovations as the practical incandescent electric light bulb and the phonograph. A savvy businessman, he held more than 1,000 patents for his inventions.</p>
</div>
</body>
</html>
Using The class Attribute on Inline Elements
The HTML class attribute can also be used for inline elements:
Example
<!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>
Read More...
No comments:
Post a Comment
Leave a Reply!