For use of css is of three types.
1) External CSS
2) Internal CSS
3) Inline CSS
Example of external CSS
.mainArea{
border: 1px solid black;
background: lightgrey;
padding: 5px;
}
.heading5{
font-size: 26px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
color: blue;
}
.para1{
font-size: 15px;
color: black;
padding: 5px;
text-align: justify;
}
HTML file linked with css file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="mainArea">
<h5 class="heading5">webtags.com.pk</h5>
<p class="para1">
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.</p>
</div>
</body>
</html>
Output of above code
webtags.com.pk
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.
Explanation of above code
As there is a css file with code at the top and second file is of html5 also with source code.Here HTML5 file is linked with css by using link element in between head element.Here "href" attribte is used to locate the give address of the file. learn more about here visit here
Example of internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
.mainArea{
border: 1px solid black;
background: white;
padding: 5px;
}
#heading5{
font-size: 26px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
color: blue;
}
.para1{
font-size: 15px;
color: black;
padding: 5px;
text-align: justify;
}
</style>
</head>
<body>
<div class="mainArea">
<h5 id="heading5">webtags.com.pk</h5>
<p class="para1">
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.</p>
</div>
</body>
</html>
Output of above code
webtags.com.pk
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.
Explanation of above code
In the above given example this is called internal styling. In between the head element there is style element and the css coding is there.
Example of inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline css</title>
</head>
<body>
<div style="color: blue; font-size: 26px;">
<h5 id="heading5" style="border: 1px solid black;">webtags.com.pk</h5>
<p class="para1">
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.</p>
</div>
</body>
</html>
Output of above code
webtags.com.pk
webtags is free course provider website. Here are complete webdevelopment and web designing courses for free to learn.There is no any condition for registration or login for the user.
Explanation of above code
In the inline styling example styling is done by using style attribute with the html elements.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
