WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted CSS Selectors on Wed Jun 23, 2010 11:29 am

ankillien

avatar
Administrator
Administrator
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...

  • Element selector
  • Class selector
  • ID selector
  • Group selector
  • Child selector
  • Sibling selector
  • Universal selector
  • Attribute selector
  • ...and so on...


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 :
Code:
p {
color : green;
background-color : yellow;
}

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...

Code:
h1, h2, h3 {
color : red;
text-decoration : underline;
}

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)...

Code:
h1 {
color : red;
text-decoration : underline;
}
h2 {
color : red;
text-decoration : underline;
}
h2 {
color : red;
text-decoration : underline;
}
}

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...

Code:
<p class="webartz">
Some important info can be put in this paragraph.
</p>

<p>
Just another "p" tag which doen't have any class name attached to it.
</p>

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...

Code:
p.webartz {
background : lightgreen;
border : 5px solid darkgreen;
}

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...

Code:
<p id="somename">
some conten
</p>

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...

Code:
form input {
width : 200px;
padding : 10px;
}

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 Razz 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 Very Happy
Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

2Accespted Re: CSS Selectors on Wed Jun 23, 2010 12:58 pm

50Cent


Registered Member
Registered Member
Nice tutorial.

3Accespted Re: CSS Selectors on Wed Jun 23, 2010 3:06 pm

Fred100

avatar
Registered Member
Registered Member
Loved reading it , but it would've been better with a preview of how each of them looks , but yeah , still a great tutorial lol

http://www.art-castle.biz/forum.htm

4Accespted Re: CSS Selectors on Wed Jun 23, 2010 4:36 pm

ankillien

avatar
Administrator
Administrator
Glad you liked it guys.

Fred, there are so many selector types so it was difficult to add a demo for all though I have given simple examples in the tutorial. Better if you try them on your PC so that you can better understand how they work Very Happy

5Accespted Re: CSS Selectors on Thu Oct 18, 2012 9:00 am

allc1865


Registered Member
Registered Member
Hi
I was trying to do a partial attribute value selector but my code isn't working for some reason.
Here's my code:
<html>
<head>
<style type="text/css">

p[class~="silly"] {color: blue;}

</style>

<body>
<div class="silly">
<p>Simple Sentence</p>
</div>
</body>
</html>

Upset ks![/b]

6Accespted Re: CSS Selectors on Thu Oct 18, 2012 3:40 pm

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Ummm, what kind of CSS you use. You should type:
Code:
<html>
<head>
<style type="text/css">

p.silly {color: blue;}

</style>

<body>
<p class="silly">Simple Sentence</p>
</body>
</html>

 ks![/b]

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum