ddsingh@infomatics.info +91 9760014754

SELECTOR

A selector is used to select or point to a specific element within your page. Commonly used selectors are as follows.

1)Universal selector:-

 it is indicated by an (*) sign ,it applies to all element in our page

*

{

  Color:green;

}

    

 2)Type selector:-

  It allow us to point a specific HTML tag

Ex:-

 

h1

{

color: green;

}
Multiple Style Sheets:-

If some properties have been set for the same selector in different style sheets(External/Internal/Inline), the values will be inherited from the more specific style sheet.

Cascading Order: (Lowest to Highest)

1. Browser default

2. External style sheet

3. Internal style sheet (in the head section)

4. Inline style (inside an HTML element)

Note: If the link to the external style sheet is placed after the internal style sheet in HTML< head>, the external style sheet will override the internal style sheet!

Ex:-

Assume that an external style sheet has the following properties for the h1 selector

h1

{

 color: red;

text-align: left;

font-size: 8pt;

}

Assume that an internal style sheet also has the following properties for the h1 selector

h1

 {

 text-align: right;

 font-size: 20pt;

}

Effective Style Sheet

 

color: red;

text-align: right;

font-size: 20pt;  

 

 

MultiStyle.html

<html>
   <head>
      <title>Multi Style Sheet</title>

<style type="text/css" rel="stylesheet">
 

h1
 {
 text-align: right;
 font-size: 20pt; 
 color:yellow;
} 
 </style>
<link rel="stylesheet" style="text/css" href="MyCss.css"/>   
</head>
  <body>
  <h1>This is Heading One</h1>
    </body>
   

</html>

Mycss.css

h1 
{
color: red;
text-align: left;
font-size: 8pt; 
} 

 

3) ID selector:-

 It is always prefixed by a hash symbol(#)

 and allow us to refer a single element with id in the page

Ex:-

 

#black

 {

  color: #000000;

 }

 #firstname

 

  Selects the element with id="firstname"

IdDemo.html 

 

<html>
<head>
    <title>Id Selector Demo</title>
<style type="text/css">
#top 
{
	background-color:yellow;
	font-size:20px;
	font-family:"Tahoma";
}
</style>
</head>
<body>

<div id="top">
With Id Selector
<h1>HTML</h1>
<p>PHP</p>
<p>CSS</p>
</div>

<div>
Without Id Selector
<h1>HTML</h1>
<p>PHP</p>
<p>CSS</p>
</div>

</body>
</html>

 

4)Class selector:-

it enables us to style multiple html elements through the class attribute.It is preceded by . symbol

General Selector

.black

 {

  color: #000000;

}

It is available for all elements where u are using this selector

E1.class  

 

p.intro

 Selects all elements with class="intro“ which is for

       Paragraph tag only

ClassSelector.html

<html>
<head>
 <title>Class Selector Demo</title>
<style type="text/css">

.fateh
{
	font-size:36px;
	color:red;
}
b.dd
{
	font-size:70px;
	color:magenta;
}
</style>
</head>
<body>
<i class="fateh">CSS Tutorial</i><br/>
<b class="dd"> PHP Tutorials</b><br/>
<b>I am not using yr effect</b>
<u class="fateh">HTML Tutorial With Effect</u><br/>
<u class="dd">HTML Tutorial Without Effect</u>
</body>
</html>

 

5)Grouping Selectors:-

Syntax:- E1, E2

Ex:- 

div,p  

{

   color:red;

}

Selects all <div> elements and all <p> elements  

7)The Descendant Selectors:-

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <b> tag only when it lies inside <p> tag.

p b

{

  color: green;

}

 

8)The Child Selectors

You have seen descendant selectors.

There is one more type of selectors which is very similar to descendants but have different functionality.

Ex:-

body > p

 {

  color: #000000;

}

This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this rule.

E1 E2 (Descendant Selectors)

Ex:-

div p

Selects all <p> elements inside <div> elements at any level  

E1>E2 (Child Selectors)

   div>p   Selects all <p> elements where the immediate parent is a <div>  

E1+E2

Ex:-

 div+p   Selects all <p> elements that are placed immediately after/below <div>  

7)The Attribute Selectors:

You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that has a type attribute with a value of text:

E[attribute]  

E[foo]

Selects all elements E with an attribute foo    

input[type="text"]

{

  color: #000000;

}

[attribute=value]

[target=_blank]   Selects all elements with target="_blank"  

[attribute~=value]   [title~=flower]   Selects all elements with a title attribute containing the word "flower"  

Border.html

<HTML>
 <HEAD>
  <TITLE> Styling Border </TITLE>
  <style>
   p
   {
            border:4px solid red;
			border-radius:100px;
			width:400px;

   }
   h1
   {
         border:5px dotted green;
   }
   div
   {
      width:300px;
	  height:300px;
	  box-shadow:30px 20px 10px 20px green;
	  font-size:33px;
	  text-shadow:5px 5px 5px red;

      border:5px dashed gray;

	}





 </style>
 </HEAD>
 <BODY>

<p>Hi I am Dd Singh</p>
<h1>Hello This is Heading One</h1>
<div>Hello this is the div Tag</div>
</BODY>
</HTML>

Image.html

<HTML>
 <HEAD>
  <TITLE>Styling Image</TITLE>
   <style type="text/css">
      img
	  {
	      width:300px;
		  height:300px;
		  border:5px solid pink;
		  border-radius:100px;
	 }
	 img:hover
	 {
		  width:200px;
		  height:200px;
		  border:5px solid green;
	}
	  
   </style>

 <BODY>
 <img src="Tulips.jpg" />
    
 </BODY>
</HTML>

Table.html

<html>
<head>
    <title>Styling Tables</title>
    <style type="text/css">
        table
		{
		    text-align:center;
			border:4px groove orange;
			width:100%;
			background:pink;
			font-size:22px;
			font-family:Comic Sans MS;
		}
		td
		{
		    border-bottom:3px solid green;

		}
		th
		{
		    heigh:60px;
			color:white;
			background:green;
			border-bottom:8px groove black;

		}





    </style>

</head>
<body>
     <table>
	 <tr><th>EmpId</th><th>EmpName</th><th>Salary</th></tr>
	 <tr><td>E001</td><td>DD</th><td>4000</td></tr>
	 <tr><td>E002</td><td>Dev</td><td>5000</td></tr>



	 </table>



</body>

</html>

TextDemo.html

<html>
<head>
   <title>Text Properties</title>
   <style>
      p
	  {
	        color:red;
			text-decoration:underline;
			font-size:3em;
			text-transform:uppercase;
			text-shadow:5px 5px 5px green;
		}


	      


   </style>

</head>
<body>
<p>Hello My Name is DD Singh</p>
<p>Hello My Name is DD Singh</p>
<p>Hello My Name is DD Singh</p>

</body>
</html>

 


Prev Next