Class Attribute in HTML
Class attribute is used to define style of an element. CSS(styles) is used to declaring styles of an element.
We are using styles in 3 ways. Inline CSS, internal CSS, External CSS.
<div style="background-color:green;color:white>
in the above example i mentioned that div element's background color as green and text color as white.
Inline CSS:
Define style in a line where we put an element. In inline CSS we are not going to use Class attribute.
Example for inline CSS
<!DOCTYPE html>
<html>
<body>
<div style="background-color:green;color:white;">
<h1>Example for Inline CSS</h1>
<p>This is the example for Inline CSS. You can define styles in same
line which you put your element.</p>
</div>
</body>
</html>
Output of above inline CSS:
Internal CSS:
Internal CSS will use class attribute to define style.
Here is the example for Internal CSS
<!DOCTYPE html>
<head>
<title>Example of Internal CSS</title>
<style>
.banner{
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="banner">
<h1>Example for Internal CSS</h1>
<p>This is the example for Internal CSS. You can define styles in style area which is in head tags.</p>
</div>
</body>
</html>
Output of Internal CSS example like:
External CSS:
Here we declared a class for element and styles in different file. We will then include that CSS file inside main HTML file.
example for external CSS
main HTML (I have given a name first.html)
<!DOCTYPE html>
<head>
<title>Example of External CSS</title>
<link rel="stylesheet" type="text/css" href="stylexample.css">
</head>
<body>
<div class="banner">
<h1>Example for External CSS</h1>
<p>This is the example for External CSS. You can define styles in another file and include in main HTML file.</p>
</div>
</body>
</html>
external CSS file (stylexample.css) Look like below:
It will include only styles of classes
.banner{
background-color:orange;
color:white;
}
(Note: Save this file in same location because in <link rel="stylesheet" type="text/css" href="stylexample.css"> this command I will not use path of the file name.)
If you run the main HTML (first.html) file the output will look like below:
Please practice the above codes in your computer to learn CSS and Class attribute.
Thank you! for Reading. Will continue HTML in next pages.
No comments:
Post a Comment