Hi,
In my previous article, I have written about Introduction of CSS and its basics. In continuation of CSS Tutorial series, this post will help you learning about SELECTOR. We will discuss here for beginners so that they can get maximum and understand the basic difference of their types.
In my previous article, I have written about Introduction of CSS and its basics. In continuation of CSS Tutorial series, this post will help you learning about SELECTOR. We will discuss here for beginners so that they can get maximum and understand the basic difference of their types.
Introduction:
In a embedded or External style sheet, the target element is not fix. Basically we write CSS in embedded or External mode so that we can re-use it when required and can modify whole look of page or website by modifying CSS file only. For using multiple CSS values and properties, we need Identifiers which are called Selector in CSS. Just as In case of C we write a function and use it anywhere, the SELECTOR are same. You will understand more by its example. As per CSS Rule, Selector are divided in three types.HTML Selector:
HTML Selector are part of HTML Tags. They need not to be used at HTML/XHTML syntax. In short we can define style sheet for any of the markup tags which is used in document but we can not create our own selector of this kind.
Example:
/* HTML Selectors */
h1
{
font-family: Verdana, Calibry, Tahoma;
color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:21px;
text-decoration: bold;
}
h2
{
font-family: Verdana, Calibry, Tahoma;
color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:18px;
text-decoration: underline;
text-align:center;
}
p
{
font-family: Verdana, Calibry, Tahoma;
text-align:justify;
padding: 4px 4px 4px 4px;
}
Class Selector:
Class selector are selectors which need to be used with class tag in HTML or similar tag in various language. These start with period/dot (.) symbol. These can be used unlimited times in documents and need to be defined each time for markup syntax. You are free to choose name of selector.
Example:
/* Class Selectors */
.textBox
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-right: 10px;
padding-left: 6px;
padding-top: 2px;
padding-bottom: 2px;
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
border: solid 1px black;
font-size: 13px;
text-decoration: none;
margin-left: 0px;
}
.button
{
font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
border-top: 1px solid #dec227;
background: #ffd800;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
background: -moz-linear-gradient(top, #ffd800, #65a9d7);
background: -ms-linear-gradient(top, #ffd800, #65a9d7);
background: #ffd800;
padding: 1px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
-webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 13px;
text-decoration: none;
vertical-align: middle;
height: 27px;
}
ID Selector:
ID Selector are based upon ID of element. These are initialized with Pound or Hash (#) sign. These can be used only once in a document as the ID of attribute must be unique as per document markup standard. These need not be assigned with attribute but remember, the ID of document element should be same as ID defined in selector. They typography case (lowercase/uppercase) is sensitive here.
Example:
/* ID Selectors */
#footer {
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
font-size: 15px;
color: red;
background-color: #ffd800;
text-align:center;
}
For you, here is the complete code of HTML Page which is as shown in above screenshot.
<html>
<head>
<title>CSS Stylesheets & Selectors </title>
<style>
/* HTML Selectors */
h1
{
font-family: Verdana, Calibry, Tahoma;
color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:21px;
text-decoration: bold;
}
h2
{
font-family: Verdana, Calibry, Tahoma;
color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:18px;
text-decoration: underline;
text-align:center;
}
p
{
font-family: Verdana, Calibry, Tahoma;
text-align:justify;
padding: 4px 4px 4px 4px;
}
/* Class Selectors */
.textBox
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-right: 10px;
padding-left: 6px;
padding-top: 2px;
padding-bottom: 2px;
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
border: solid 1px black;
font-size: 13px;
text-decoration: none;
margin-left: 0px;
}
.button
{
font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
border-top: 1px solid #dec227;
background: #ffd800;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
background: -moz-linear-gradient(top, #ffd800, #65a9d7);
background: -ms-linear-gradient(top, #ffd800, #65a9d7);
background: #ffd800;
padding: 1px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
-webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 13px;
text-decoration: none;
vertical-align: middle;
height: 27px;
}
/* ID Selectors */
#footer {
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
font-size: 15px;
color: red;
background-color: #ffd800;
text-align:center;
}
</style>
</head>
<body>
<H1>Types of Selectors in CSS</H1>
<p>In this topic we will be discussing about different types of Selectors in CSS (Cascaded Style Sheets). You will learn about all kind of selectors with examples at the last of this post.</p>
<h2>1. HTML Selector</h2>
<p>As on this line, we did not applied any of stylesheet tags (class or ID). But you will see the changes in style of H1 , H2 and P tag. These are HTML Tags and automatically used by HTTP Web server as they are present in stylesheet.<p>
<h2>2. Class Selectors</h2>
<input type="text" class="textBox" name="FirstName" value="Enter your first Name." />
<input type="button" class="button" name="Submit" value="Click to Submit" />
<p>In above two lines we used class="textbox" and class="button". As in above stylesheet we have created them with period (.) and used with class attribute of HTML element, so these are called Class selectors.</p>
<h2>3. ID Selector</h2>
<p>We will be applying these settings in last of this webpage where we will write footer.</p>
<div id="footer">All Rights are reserved.</div>
</body>
</html>
Thanks for reading. I will be back with another article in CSS series. Your suggestions or feedback are expected and play great role in our development. Keep reading, writing & sharing.
John Bhatt
John Bhatt
0 comments:
Post a Comment
Leave your Feedback or Suggestion. We will be Happy to read and reply.