Learn how to use CSS Selectors:

Learn how to use CSS Selectors

As explained earlier. you can use selectors to select certain HTML elements and manipulate them as well. The elements can be selected or found on the basis of their classes, id, types, attributes and their values etc. Following are example of few selectors:

Element Selector: This selector is used to chose the elements based on their name. You can select all <P> elements (as described in HTML Paragraphs,  HTML Paragraphs 2 this is a paragraph element) on one page and can align the text to right and set the color green by using following example:

p

{

text-align: right;

color: green;

 }

Id Selector: This selector is used to find or select any element by its id attribute of HTML tag. Since the id tag is unique on the page therefore you can use it to find the unique element on any page. You must remember that to select or find a unique id element, you must put a hash character followed by the element’s id. For example, you want to apply a style to the paragraph element whose id is “Paragraph3”.

#Paragraph3

{

text-align: left;

font-family: Comic Sans M

}

In the above example, the color of paragraph will be green and the alignment will be set to left and the font will be set Comic Sans M.

Class Selector: This selector is used to find the elements with a particular tags.  This selector uses HTML class attributes. You must remember that to write a period character, you must put a period character before the class name. In the following example, all the elements with class = car will be aligned to left and font will be Comic Sans M.

.car

{

text-align: left;

font-family: Comic Sans M

}

You have the ability to select a particular element of one class as well. For example, The paragraph element p will have the left alignment and Comic Sans M font.

p.car

{

text-align: left;

font-family: Comic Sans M

}

Grouping Selectors:

But what if you want to give various elements same style, you cannot write a code for each element separately as:

h1

{

text-align: left;

color: green

font-family: Comic Sans M

}

h2

{

text-align: left;

color: green

font-family: Comic Sans M

}

p

{

text-align: left;

color: green

font-family: Comic Sans M

}

h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

 

To solve this issue you can group various elements as follows and assign them the same style.

h1,h2,p,h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

In the above example, h1,h2,h3 and p will be left aligned, and green colored and with the font Comic Sans M.

 

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!

email

4 Responses to Learn how to use CSS Selectors:

  1. Luigi Fulk says:

    I simply want to say I’m newbie to blogging and site-building and definitely liked you’re blog. Likely I’m planning to bookmark your blog post . You absolutely have excellent well written articles. Thanks a lot for sharing your web site.

  2. Just Browsing

    While I was browsing today I saw a excellent article concerning

  3. This is the perfect webpage for anybody who really wants to understand this topic. You know so much its almost hard to argue with you (not that I really will need to…HaHa). You certainly put a fresh spin on a subject that has been written about for years. Wonderful stuff, just great!

  4. Great post. I used to be checking constantly this weblog and I’m impressed! Extremely useful information specially the final phase :) I care for such information a lot. I was looking for this particular information for a long time. Thank you and best of luck.

Leave a Reply