In continuation of CSS Tutorial series, this post will help you learning about SELECTORS in CSS. In my previous article, I have written about Introduction of CSS and its basics.
We will discuss here for beginners so that they can get maximum and understand the basic difference of their types.
Introduction: What are Selectors in CSS? Why do we use selectors in CSS?
In an embedded or External style sheet, the target element is not fix.
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 Selectors in CSS. Just like in C Language, we write a function and use it anywhere, the SELECTORS in CSS are same.
You will understand more by its example. As per CSS Rules & their declaration method, Selector are divided in three types.
How to declare/write Selector?
As we have learnt, Selectors are group of CSS properties. Skeleton of CSS Selector is like below. Writing method is almost similar to function definition in C Except Parameter part.
We start with name of Tag based on its type, then write CSS tags in between of curly brackets.
h1 // Name of Selector
{ // Opening of Selector content
text-size:20px; // Selector Content, separated by Semicolon.
} // Closing of Selector content.HTML Selectors: Also, Element Selectors
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 cannot create our own selector of this kind.
How to Declare HTML Selector?
In the name of Selector, we can choose one of the HTML tags. Once we have written and linked CSS File with HTML, we do not need to make any changes in HTML page. It will automatically apply specified style to all HTML elements available in this page.
Example of Element Selectors: In this example, every-time there is H1 tag in Webpage, its color is going to be Green and Font Size 21px and Font Family Verdana, Calibri, or Tahoma. Similarly, H2 will have different color and text decoration.
You do not need to assign any Style related attribute to HTML tags for ELEMENT Selectors.
/* HTML Selectors */
h1
{
font-family: Verdana, Calibri, 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.
- 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.
- Class Names are Case Sensitive, (Lowercase and Uppercase are different)
How to Declare Class Selector?
These start with period/dot (.) symbol. Then any name desired for selector and CSS content in between brackets as we learnt above.
Example: In this example, we have defined two CSS classes as textBox and button. Each time, we want to use these in HTML page, we have to assign this style to tags using style attribute.
/* 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;
}In this example, we have assigned Class Selector using class="classname" attribute.
<table class="contentTable">
<tr>
<th>Action</th>
<th>Remarks</th>
<tr>
<tr>
<td>Exams</td>
<td><input type="text" class="textBox" name="ExamRemarks" value="Write your remarks></td>
<tr/>
<tr>
<td>Results</td>
<td><input type="button" class="button" value="Submit"></td>
<tr/>
</table>ID Selector and How to Declare ID Selector in CSS?
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;
}Revision: All CSS Selector Types in One Example
For you, here is the complete code of HTML Page which is as shown in above screenshot. CSS Stylesheets & Selectors.
/* 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;
}
<body>
<h1>Types of Selectors in CSS</h1>
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.
<h2>1. HTML Selector</h2>
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.
<h2>2. Class Selectors</h2>
<input class="textbox" type="text" value="Enter your first name..." />
<input class="button" type="submit" value="Click to Save" />
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.
<h2>3. ID Selector</h2>
We will be applying these settings in last of this webpage where we will write footer.
<div id="footer">All Rights are reserved.</div>
</body>
Thanks for reading. We will be back with another article in CSS series. Your suggestions or feedback are expected and play significant role in our development. Keep reading, writing & sharing and subscribe to us on YouTube.
