Learning Curve…

CSS Selectors

Posted on: December 20, 2010

The Universal Selector

The Universal selector, indicated by an asterisk (*), applies to all elements in your page. The

Universal selector can be used to set global settings like a font family. The following rule set changes the font for all elements in your page to Arial:

*

{

font-family: Arial;

}

The Type Selector

The Type selector enables you to point to an HTML element of a specific type. With a Type selector, all HTML elements of that type will be styled accordingly.

h1

{

color: Green;

}

This Type selector now applies to all <h1> elements in your code and gives them a green color. Type selectors are not case sensitive, so you can use both h1 and H1 to refer to the same heading.

The ID Selector

The ID selector is always prefixed by a hash symbol (#) and enables you to refer to a single element in the page. Within an HTML or ASPX page, you can give an element a unique ID using the id attribute. With the ID selector, you can change the behavior for that single element, like this:

#IntroText

{

font-style: italic;

}

Because you can reuse this ID across multiple pages in your site (it only has to be unique within a single page), you can use this rule to quickly change the appearance of an element that you use once per page, but more than once in your site, for example with the following HTML code:

<p id=”IntroText”>I am italic because I have the right ID.</p>

<p id=”BodyText”>I am NOT italic because I have a different ID.</p>

In this example, the #IntroText selector changes the font of the first paragraph — which has the

Matching id attribute — but leaves the other paragraph unmodified. ID selectors are case sensitive,so make sure that the id attribute and the selector always use the same casing.

The Class Selector

The Class selector enables you to style multiple HTML elements through the class attribute. This

is handy when you want to give the same type of formatting to a number of unrelated HTML

Designing Your Web Pages elements. The following rule changes the text to red and bold for all HTML elements that have their class attributes set to Highlight:

.Highlight

{

font-weight: bold;

color: Red;

}

The following code snippet uses the Highlight class to make the contents of a <span> element and a link (<a>) appear with a bold typeface:

This is normal text but <span class=”Highlight”>this is Red and Bold.</span>

This is also normal text but <a href=”CssDemo.aspx” class=”Highlight”>this link is Red and Bold as well. </a>

Notice that the selector uses a period in its name, but you don’t use this period when referring to the selector in the class attribute. The class attribute is very useful because it enables you to reuse a piece of CSS for many different purposes, regardless of the HTML element that uses the class.

Grouping and Combining Selectors

CSS also enables you to group multiple selectors by separating them with a comma. This is handy if you want to apply the same styles to different elements. The following rule turns all headings in the page to red:

h1, h2, h3, h4, h5, h6

{

color: Red;

}

Moreover, with CSS you can also combine selectors, enabling you to hierarchically point to a specific element in a page. You can do this by separating the selectors with a space. The following example targets all <p> elements that fall within an element with an id of MainContent, leaving all other paragraphs unmodified.

#MainContent p

{

font-size: 18px;

}

Note that combining is very different from grouping. Grouping is just a shortcut to avoid typing the same declarations over and over again, whereas combining enables you to target specific elements in your document.

With combining, you’re not limited to ID and Type selectors; you can also use it with the other

selectors, as is demonstrated with the following example:

#MainContent p.Attention

{

font-weight: bold;

}

This rule changes all paragraphs with the class Attention within the element with its id set to

MainContent and leaves all others untouched. The following HTML snippet uses this rule to show the effect:

<div id=”MainContent”>

<p class=”Attention”>My class is Attention, so my text is bold.</p>

<p>My text is not bold, as it lacks the Attention class.</p>

</div>

<p class=”Attention”>I am NOT bold because I don’t fall within MainContent.</p>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Learning days (Calendar)

December 2010
M T W T F S S
    Jan »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Knowledge Bank (Archives)

I am on Twitter

Blog Stats

  • 498,756 hits

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 43 other followers

%d bloggers like this: