CSS Selectors
Stylesheets comprise of rules, which are composed of selectors, which define how styles should be applied. Here you can learn applying multiple CSS class selectors. This will also help you in understanding advanced CSS selectors. A Selector represents a structure, which generally is a condition set to define which elements a selector matches in the document tree. You can also change body background image using CSS selector. Further, this tutorial will touch upon topics such as CSS pseduo element selectors first, css selector tables, first child pseudo css selector and much more.
Table of Contents
Type Selectors
A CSS type selector(tag name) names the HTML Tag to style. To use a type selector, simply write the HTML Tag name that you want you to be styled. Similarly, the p selector selects every paragraph that is every element marked up as <p>...</p>. These are the most straightforward of all the CSS selectors, and we've already dealt with them quite a bit in the introduction, so we're not going to labour the point here to style all paragraph (P) tags, you would write: The most common and easy to understand selectors are type selectors.
Type selector has a very simple form; it is just the tag that you can use to mark up an element on an HTML page. Any HTML element can be used in this way.
"body selects the <body> element", "li selects any elements marked up as <li>...</li>" etc.
- h1
- {
- Property:Value;
- }
Class Selectors
A CSS class selector(.) applies to many elements at once, or a sub-set of specific HTML elements. To use them, you need to edit your HTML to define the classes on the HTML elements you want to be styled. Then you define the style in your style sheet.
A class attribute value is not required to be unique; the same class name within an XHTML document may be used multiple times. If we only need tag specific CSS syntax then our first example is not necessary, but when we want a general classification that can be used for multiple elements.
View Plain - Print Usage:
- .ClassName
- {
- Property:Value;
- }
HTML Example: "<div class="ClassName">......</div>"
ID Selectors
A CSS ID selector(#) applies to the one element in the HTMLdocument with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page. Theoretically, if you use the ID selector more than once on a page, the subsequent ones should be ignored by the web browser. However, this is not always the case. It is very difficult to rely on the predictability of web browsers. Therefore, when you choose to use the ID selector, be careful to use it only once.
View Plain - Print Usage:
- #ClassName
- {
- Property:Value;
- }
HTML Example: "<div id="ClassName">......</div>"
Be with us till our next chapter. We promise to cater you some really useful CSS tutorials.
Continue >> << Back
- Learn CSS
CSS Basics
- An Introduction
- Advantages of CSS
- CSS Selectors
- CSS Internal
- CSS External
- CSS Inline
- CSS Background
- CSS Font
- CSS Text
- CSS Padding
- CSS Margin
- CSS Border
- CSS List
- Learn HTML
- Learn JavaScript
- Learn Ajax
- Learn jQuery
