Speaks fluent binary
CSS Tutorials
Chapter 3: CSS Selectors
We now move into the first advanced topic in CSS, the Selectors. A CSS Selector is basically what its name implies. It is used to "select" the elements on a HTML page so as to apply styles. The different types of CSS selectors are...1. Type Selectors
- Type Selectors
- Class Selectors
- ID Selectors
Type selectors is the most common selector used in CSS. A type selector simply applies the style to the corresponding matching HTML element in the page. Let us go through an example for this. Note that for examples in this tutorial, i would be using internal CSS. You are however free to use this in an external CSS and try it out
The output looks like this:HTML Code:<html> <head> <style> h1 { color:pink; } h2 { color:violet; } </style> <body> <h1>This is a pink rose</h1> <h2>This is a violet sunflower</h2> </body> </html>
So basically the CSS engine built into the web browsers matches the corresponding tag between the < > brackets and applies the corresponding style attributes on them. Isn't this cool? Another important thing is that Type selector is so common that almost all modern browsers support them. So you can use them without any thoughts on browser compatibilities.
2. Class Selectors
To understand the need for class selectors, consider the following scenario. What if you wanted to apply a particular class of style to be applied to multiple elements in a HTML page? Lets say you want heading 3 as well as paragraph tags to be of a particular style say of a violet font color. It would be rather redundant if you use type selectors here. For such cases, introducing Class Selectors.
Consider the following code Code:
The output looks like this...HTML Code:<html> <head> <style> .violetBig { color:violet; font-weight: bold; } </style> <body> <p class="violetBig">How do i appear on screen</p> <h3 class="violetBig">This is Hi from H3... i am popular among HTML community</h3> <br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body> </html>
A class selector must start with a period followed by the name of the class. like the tag, .violetBig described above. Both the paragraph as well as h3 tag have specified the class name through the class attribute.
If we need class based specialization for a particular HTML tag, we can do so as given below.
The output looks like this...HTML Code:<html> <head> <style> div.violetBig { color:violet; font-weight: bold; } div.blueBig { color:blue; font-weight: bold; } </style> <body> <div class="violetBig">I am a violet rose</div> <div class="blueBig">I am a blue rose</div> <br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body> </html>
3. ID Selectors
Certain HTML elements in a document has an ID attribute. Using ID makes it easy to write and debug Javascript code. IDs are used to uniquely identify a particular HTML element in a page. An ID selector can be used to apply style attributes to a particular ID in a web page.
The disadvantage of ID based selector is that it can be used only once in a given HTML page while class based selectors can be used as many times as we want.HTML Code:div#menuBar { font-color:green; } <div id="menuBar"> Home<br /> Products<br /> Services<br /> Contact Us<br /> </div>
Techically an ID can be used as many times as you like.. but that fails validation, of course.
Another nice one! +rep
Posted via CodeCall Mobile
Newbie
There can be multiple CSS classes and inline style applied to a single html element. By the default CSS rule, if same style attribute is set with different values on top of a single element, the closest attribute value will dominate in the out put at the browser end. !important is a special attribute that can break the rule, and can force a particular style irrespective of the hierarchy of all the styles applied.
Eliza
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Reply With Quote
Originally Posted by Jordan
Bookmarks