HTML The class Attribute
Using The class Attribute
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 point to the same class name:
Example
<!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>Germany</h2>
<p>arious Germanic tribes have inhabited the northern parts of modern Germany since classical antiquity. A region named Germania was documented before 100 AD. During the Migration Period, the Germanic tribes expanded southward. Beginning in the 10th century, German territories formed a central part of the Holy Roman Empire.[11] During the 16th century, northern German regions became the centre of the Protestant Reformation. After the collapse of the Holy Roman Empire, the German Confederation was formed in 1815. The German revolutions of 1848–49 resulted in the Frankfurt Parliament establishing major democratic rights.</p>
<p>In 1871, Germany became a nation state when most of the German states unified into the Prussian-dominated German Empire. After World War I and the German Revolution of 1918–1919, the Empire was replaced by the parliamentary Weimar Republic. In 1933 the Nazi seizure of power quickly led to the establishment of Nazi Germany which was built upon a dictatorship and consequently led to World War II and the Holocaust. After the end of World War II in Europe and a period of Allied occupation, two German states were founded: the democratic West Germany and the socialist East Germany. On 3 October 1990, the country was reunified.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>
<div class="cities">
<h2>France</h2>
<p>Europe and several overseas regions and territories.[XIII] The European, or metropolitan, area of France extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean. The republic also includes French Guiana on the South American continent and several islands in the Atlantic, Pacific and Indian oceans.</p>
<p>The country's 18 integral regions (5 of which are situated overseas) span a combined area of 643,801 square kilometres (248,573 sq mi) which, as of January 2017, has a total population of almost 67 million people.[3] France is a unitary semi-presidential republic with its capital in Paris, the country's largest city and main cultural and commercial centre. Other major urban centres include Marseille, Lyon, Lille, Nice, Toulouse and Bordeaux.</p>
</div>
</body>
</html>
Results
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: Blue;
}
</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>
Results
Comments
Post a Comment