Selectors of CSS3

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.

Here is an example of selector with source code.


h1 {
  color: green;
   }
p {
  font-size: small;
  font-family: sans-serif;
   }


Explaination

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 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 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 you saw the above example with source, here 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 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

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 is given

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

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


ads