How to use CSS3

For use of css is of three types.
1) External CSS
2) Internal CSS
3) Inline CSS

An example for external css is given

This is external css file with coding.

.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;
}


This is 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.

Explaination 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

An example for internal css is given

<!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.

Explaination 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.

An example for inline css is given

<!DOCTYPE html>
<html>
<head>
</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.

Explaination of above code

In the inline styling example styling is done by using style attribute.







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.


ads