Home
1
CSS Selectors Wed Jun 23, 2010 11:29 am
ankillien
Administrator
Posts : 5070
Points : 1013
Age : 34
Location : India
Browser :
CSS Selectors Basics : Working with CSS selectors |
Hello Everyone! In our previous tutorials we learned what is CSS and how to write CSS codes. With CSS we can apply styles to any HTML element. But for that, we need to select a specific element which we are going to manipulate using CSS! We have to select an element to which we can apply styles. So, we are going to learn about CSS selectors (i.e. how to select desired HTML elements and apply styles to them). There aremany types of selectors in CSS, like...
In this tutorial we'll have a llok at the most basic and most commonly used selectors. Element Selector : As the name suggests, it is used to select the HTML element by its name and hence it is also called name selector. Example :
The above code will make all the <p> tags with green text color and yellow background color. Important : Element selector is applied to all the element of same name in the page. The above code will be applied to all the <p> tags in the HTML page. This selector is not helpful when you want to apply different style to specific <p> tags only and not all the <p> tags found in the page. Group Selector : Group selector is useful when the coder wants to apply similar style to different kind of elements. Example : Suppose, you want to apply underline and red color to the <h1>, <h2> and <h3> tags. So, your CSS would look like this...
You might have noticed that it is similar to the element selector. Yes, it is. It just has additional feature that allows coders to group different elements that should have same style. If you don't use group selector, your code would look like this (which has same effect as above code)...
Important : The grouped elements must be separated by a coma! You can group as many elements as you want. Class Selector : Here, a coder, first, applies a unique class name to the element(s) he wants to manipulate using the "class" attribute. The "class" attribute can be applied to any HTML element, like this...
Notice the we have two paragraphs one of which has a class named "webartz". Now,we want to highlight the paragraph which belongs to "webartz" class using border and backgrounds. The CSS would look like this...
The above code simply applies a border and green background to the <p> tags which has a class name clalled "webartz". When you'll try this code, you'll see that different border and background is applied to the <p> tag that has class name "webartz" while the other <p> tags got no style! Important : While using the class selector, don't forget to put a dot(.) followed by the class name. Its not necessary to put the element name before it. ID Selector : The ID selector works same as the class selector. There are only two differences. 1) In the HTML tag we use "id" attribute instead of "class" attribute, like this...
2) In the CSS code we put hash(#) to select the ID instead of the dot(.) Child Selector : It is used to select a child element of a specific element in the HTML document. Suppose, we want to add style to the text input box which is found inside the <form> tag, our code will look like this...
Here, we put the parent element first and then the child element after leaving a space. The style will be applied to the <input> tag which is found inside <form> tag. It will not consider the <input> tags which are not put inside <form> tags. So, these are the most basic and most often used CSS selectors. CSS selectors are easy to understand but not so easy to explain  I know that this tutorial is neither perfect nor it includes all the points regarding selectors hence, it is advised to make search on google about CSS selectors and try to learn more about them.Hope this tutorial was helpful to you. Thank You  |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
ks![/b]
