Featured

    Featured Posts

CSS Tutorial 4:CSS Selector

CSS Selector

§    In This tutorial we will discuss CSS Selector and also we will learn types of CSS Selector.

  §  A CSS selector is nothing it is a pattern to match an HTML element on a web page.

  §  The style rules associated with that selector will be applied to the elements that match the selector pattern.

§  CSS selectors are used to "find" (or select) the HTML elements you want to style. 

Element Type Selectors

  §  It is used to select all instance of the element in the document with the corresponding element type name.

element_type_name
{
property_name1:value1;
property_name2:value2;
}

When we Should go for Element Selectors:-

  §  Whenever you want to simply targets an existing HTML element then we should go  for element selector.

  §  For example suppose we wants to just changed the text color of all paragraphs to red - the element selector is very strong!

  §  you can target all paragraph elements (<p>) simply by writing the name of it in your style sheet:

p {
color: Red;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
}
</style>>
</head>
<body>
<p>This is the paragraph-1</p>
<p>This is the paragraph-2</p>
<p>This is the paragraph-3</p>
<p>This is the paragraph-4</p>
<p>This is the paragraph-5</p>
</body>
</html>
Output:
The CSS id Selector
§  It is used to select a particular or specific element in the document.
§  The id selector uses the id attribute of an HTML element to select a specific element.
§  CSS ID selector matches an element based on the value of the element's id attribute.
§  The id of each element should be unique within a page, so the id selector is used to select one unique element at a time.
§  To select an element with a specific id, ID selector is a name preceded by a hash character (“#”).

Syntax:-
#element's id attribute
{
property_name1:value1;
property_name2:value2;
....................
......................
}

When we Should go for ID Selectors:-

§  You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element.

§  For example suppose we wants to just change the text color of that paragraphs whose id is first to red not all paragraph - the id selector is very strong!

§  you can target particular paragraph elements (<p>) simply by writing the id of it in your style sheet:

#first{
color: red;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#first{
color: red;
}
</style>>
</head>
<body>
<p id="first">This is the paragraph-1</p>
<p id="second">This is the paragraph-2</p>
<p id="third">This is the paragraph-3</p>
<p id="fourth">This is the paragraph-4</p>
<p id="fifth">This is the paragraph-5</p>
</body>
</html>

Output:

The CSS class Selector

§  The CSS class selector selects elements based on the contents of their class attribute.

§  TO select element with a specific class, write a period (.) character, followed by the name of the class.

syntax:-
.className
{
property_name1:value1;
property_name2:value2;
....................
......................
}

When we Should go for class Selectors:-
§  You should use class if you should use classes when your style needs to be applied multiple times on the same page.
§  For example, you might have many <p> elements that need the same style applied. - The class selector is very strong!
§  you can target many paragraph elements (<p>) simply by writing the class of it in your style sheet:

.red-text{
color: red;
}
§  In given example we want to change the color of first ,third, fifth paragraph you can target  first ,third, fifth paragraph elements (<p>) simply by applying class selector  in your style sheet:
Example:-

<!DOCTYPE html>
<html>
<head>
<style>
.color{
color: red;
}
</style>>
</head>
<body>
<p class="red-text">This is the paragraph-1</p>
<p>This is the paragraph-2</p>
<p class="red-text">This is the paragraph-3</p>
<p>This is the paragraph-4</p>
<p class="red-text">This is the paragraph-5</p>
</body>
</html>

Output:

CSS Class Selector for specific element

§  Using class selector you can specify that only specific html elements should be affected by a class.

p.center{
color:green;
text-align:center;
}

§  Now only paragraph elements should be affected by this class.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
p.center{
color: red;
text-align: center;
}
</style>>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is red and center-aligned.</p>
</body>
</html>

Output:


Applying more than one CSS Class Selector to html element

§  In class selector Html element can also refer to more than one class.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}

.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<p class="red">This paragraph has green text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
</body>
</html>
Output:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
/* All elements with class="intro" */
.intro {
color: red;
font-weight: bold;
}
/* All <li> elements with class="yellow-bg" */
li.yellow-bg {
background: #ffa;
}

/* All <li> elements with a class list that includes both "yellow-bg" and "fancy" */
li.yellow-bg.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
</style>>
</head>
<body>
<h1 class="intro">Programming Lang:</h1>
<ul>
<li class="yellow-bg">Java</li>
<li >Python</li>
<li>NodeJS</li>
<li>SQL</li>
<li class="yellow-bg fancy">NoSQL</li>
</ul>
</body>
</html>

Output:



The CSS Group Selector

§  Whenever you want to apply same style of number of Html elements then we should go for Group Selector.

Example:
h1, h2, h3, h4, h5, h6 { color: greenyellow; }

  §  Each element is separated by a comma (except for the last element before the start of the declaration).

When we Should go for CSS Group Selectors:-

§  Suppose you want to apply the same style on every heading (h1, h2, h3, h4, h5, h6) tag just we want to change the color: greenyellow; and text-align: center for all heading tag, and then you have needed to define style separately for everyone. That maximizes the lines of code. Than defining same style for every heading tag is not better then we moves group selector.

§  For example, you might have all heading (h1, h2, h3, h4, h5, h6) tag elements that need the same style applied. - The group selector is very strong!

§  you can target all heading elements (<h1-h6>) simply by writing the group selector of it in your style sheet:



§  In given example we want to change the color and text-align of all heading tag (<h1>…<h6>) you can target all heading elements (<h1>...</h6>) simply by applying group selector  in your style sheet:

Example:

<html>
<head>
<style>
h1, h2, h3, h4, h5, h6 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading-1</h1>
<h2>This is a heading-2</h2>
<h3>This is a heading-3</h3>
<h4>This is a heading-4</h4>
<h5>This is a heading-5</h5>
<h6>This is a heading-6</h6>
</body>
</html>

Output:



 CSS Universal Selector (Star)

§  The universal selector can be used to represent any element at all, and is specified using an asterisk (*).

§  Thus, use this declaration to make sure all elements are purple:

* {color: green;}
§  Assume for a moment that you have a document containing the following HTML elements: an H1, some paragraphs, a table, some preformatted text, and an unordered list.
§  Now we want to change color for of all the elements of a html page.
§  For the purposes of this specific document, we are using universal selector.
§  writing * {color: green;} is exactly the same as writing:

BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI {color: green;}

§  Let’s try to understands some scenario .watch the given below output here suppose we want to apply border to all paragraph elements.




<html>
<head>
<style>
p{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>

§  Similarly I want to Apply the border for this div element also I can use the help of group selected so I say here div also should have the border 2px solid red;
§  go to file and with-in style tag use p,div{border: 2px solid red;}and save the file go to the browser and refresh we can see that the div element has the border red border similarly what I want is I want to apply the border to the body also then I can use p,div,body{border: 2px solid red;} here file save go to browser and refresh can see that the body also has the red border I also want to apply to the HTML element so I say here p,div,body,html{border: 2px solid red;} file save go to browser and refresh you can see that even the HTML document has the red border around it I am using so many tags here you can see if I have 100 HTML element then I have to write here all those HTML elements and then I say border 2px solid that instead of writing like this we can  simply write here star. star indicates Universal selector.

§  It selects every HTML element on the page or it selects any HTML elements on the page and applies to 2PX solid red border.

*{border: 2px solid red;}

§  I am telling to the browser locate any HTML element apply the border 2px solid save file go to browser and refresh we can see that all of them have that border.
§  Universal selector is used to target every HTML element on the page and apply styles on all HTML elements on the page.

§  Now suppose I want to apply styles to only first two paragraphs so I have to you take help of class attribute.


<html>
<head>
<style>
.firsttwo{
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<p class="firsttwo">This is Paragraph-1</p>
<p class="firsttwo">This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>

§  I am telling to the browser locate any HTML element if it has a class attribute value set to firsttwo apply the border 2px solid green save file  go to browser and refresh we can see that only first two paragraphs are having the green border .even if I write  here *.firsttwo{border: 2px solid red;} it works what is the meaning of star any HTML element right Universal selector it is I am telling to the browser locate any HTML element on this page if it has the class attribute value set to firsttwo then apply the border 2px solid green file save go to browser and refresh let me show it is working properly  you can see that first two paragraphs are having the red border applied without writing this star also the same meaning star is something like of the optional thing like that here I am telling star means any HTML element remember that .

*.firsttwo{border: 2px solid red;}
§  It selects any html element which has class attribute value set firsttwo.

§  Now we are discussing one more example here use the ID I say container. I am using the ID attribute to the div and I said ID value is container what if I want to apply the border to this div element simply I can use locate any HTML element on this page if it has the ID called as container then apply the border 2px solid.


<html>
<head>
<style>
*#container {
border: 2px solid red;
}

</style>
</head>
<body>
<div id="container">
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>





Syntax:-
*#container{
border: 2px solid red;
}

It selects any HTML element which has the ID attribute value set to container



§  Now let's we proceed and see something more what if I want to apply style to every paragraph in this page which is the direct child of the div element.

<html>
<head>
<style>
div>p{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p>This is Paragraph-1</p>
<p>This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>


§  So simply we can write simply like this div>p{border: 2px solid red; }  save file go to browser and refresh we can see that all paragraph which are the direct children of div are having the red border instead of  that simply  I say here *>p{border: 2px solid red; }  what I am telling to the browser locate any HTML element on this page if it has the direct child P then apply the border 2px solid red. File save go to browser and refresh I can see that is working properly.

§  Let's proceed now I want to apply style to only first two paragraphs which are direct child of div element .I can simply say here any HTML element if it has the direct child called as P if it has the class attribute value set to firsttwo.  save file  go to browser and refresh we can see that only first two paragraphs which are direct children of the div  having the green border.

<html>
<head>
<style>
*>p.firsttwo{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<p class="firsttwo">This is Paragraph-1</p>
<p class="firsttwo">This is Paragraph-2</p>
<p>This is Paragraph-3</p>
<p>This is Paragraph-4</p>
<p>This is Paragraph-5</p>
</div>
</body>
</html>




Note:-

§  > Sign indicate direct children.


*>p{
border: 2px solid red;
}
§  It selects any paragraph element which is the direct child of any html element.


*>p.firsttwo{
border: 2px solid red;
}

§  It selects any paragraph element which is the direct child of any html element and if it has the class attributes value set to firsttwo.



author

Author Name

Author Description!

Get Free Email Updates to your Inbox!

Post a Comment

www.CodeNirvana.in

Powered by Blogger.

About

Site Links

Popular Posts

Translate

Total Pageviews