In the previous three tutorials we have explained some examples and we have already used some selectors like h1 and p. These were the elements used as selectors. We have also applied some properties and value in previous examples. In this tutorial we will discuss about more examples of selectors with there particular syntax.
Example of CSS Selectors
h1{color:green;}p{font-size:small;font-family:sans-serif;}
Explanation
Here h1 and p are selectors.
These are html tags and in css they are
used to apply the css affects.
Selector for class attribute
<!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 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
In this example class attribute is targeted in css to make the document more attractive.(You will learn more about style in css tutorials).Three classes were used in the above document, "mainArea","heading5" and "para1".And separately all classes are targeted in above styling (internal type of styling). When we target the class attribute in css than we use "." (dot) sign before the class attribute.
Selector for id attribute
<!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
As you saw the above example with source, here id attribute is targeted in css to make the document more attractive.(You will learn more about style in css tutorials).Here are also Two classes were used in the above document, "mainArea" and "para1" but we will discuss about id attribute.And same to class attribute here id attribute is targeted in above styling (internal type of styling). When we target the id attribute in css than we use "#" (hash) sign before the id attribute.An important note: "two id's with same name can't be used in the same file."
Selector for element
<!DOCTYPE html>
<html>
<head>
<style>
div{
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>
<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
As you saw the above example with source, here div element is targeted in css to make the document more attractive. When we target the element in css than we use the name of element.
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.
