CSS Target Selection

CSS Target types

In CSS parlance a target is the object whose appearance you are seeking to control. Your target may be a single object by ID, a particular image for example, or may be multiple objects by CLASS such as fifteen of fifty links or all objects such as every single link in the document by TAG.

CSS Inheritance

To complicate things, but make coding somewhat easier you can do both at the same time. Because objects always inherit unmodified styling from any previous rule it is possible for example:

to make all the text in a document green, sans-serif, and 12 pixels high
to make all text within any paragraph blue (it stays as 12 pixels high and sans-serif)
to make all text within a div 21 pixels high (it stays green and sans-serif)
to make all bold text a serif font (it stays green and 12 pixels high)
to make one particular paragraph purple text 23 pixels high (stays sans-serif)

This allows a certain economy of code and it is customary to nest the definitions in the order TAG,CLASS,ID so that you can see more easily which attributes are inherited.

CSS Target types and how to use them

Tag or Element CSS target type

The tag or element target type is the target which formats every example of this html element in the document. To refer to a tag in your stylesheet simply put what is inside the basic tag, p for paragraph, b for bold, a for links, img for images and so on. There is also a special wildcard (*) which means literally everything. You can also refer to multiple tag items which are to have the same properties, by seperating them with commas. For example:
* {color:blue; text-align:center;font-style:italic;} = anything not defined will be red, text center aligned and italic
p {color:red;} = all paragraphs are red.
h1,h2 {color:green; font-size:24px;) = h1 and h2 headings are all green and 24pixels high.

Class CSS target type

A class can be defined as applying to anything, or only applying to a specific tag type. A class is referred to in the stylesheet by putting a dot (period) in front of its name. In html the element to be addressed has its class attribute set to the name of the class it is to be linked to. For example in html:

<p class=highlight >
<b class=highlight >
<div class=highlight >
In the associated CSS stylesheet we might have:

.highlight {background:yellow;}
.highlight b {background:green;}

So in this case the paragraph and the div would both have a background of yellow, but any bold text inside them (which because it is contained by them automatically becomes of the class highlight) would have a green background. Any bold text outside these divs or paragraphs if that text were labelled as being class highlight would have a yellow background. Here is an example for you to play with!

<html>
<head>
<title>Eggseptshunal CSS coding</title>
<style>
.highlight {background:yellow;}
.highlight b {background:green;}
</style>
</head>
<body>
<p>This is a normal everyday paragraph but has a span of <span class=highlight>highlighted text</span> in it. We can of course also have <b class=highlight>bold highlighted text</b> and <b>normal bold text</b> in the paragraph.</p>
<p class=highlight>This is a whole paragraph of class highlight. <b>bold text in it is always green</b> unless we apply <b style="background:white;">an inline style.</b> which will override our CSS stylesheet.</p>
<div class=highlight><p>this paragraph has inherited the highlight class from the div it is in and all <b>bold text</b> has too. Even <ul><li>lists</li><li>are</li><li>affected</li></ul>
</p>
Text outside any paragraph is similarly highlighted and of course <b>bold text</b>.</div>
Text outside the div is as normal. So is <b>bold</b> until we define a bold <b class=highlight>element that is of class highlight</b> again.

</body>
</html>

Are you human?

736 + 189 =

Have a play with this code then hit the show my page button again.

ID CSS target type

An ID is a unique identifier name that applies to a single instance of an HTML Element. An ID is referred to in the stylesheet by putting a hash (number sign) in front of its name. In html the element to be addressed has its ID attribute set to the desired identity. For example in html:

<p id=highlight1 >
<b id=highlight2 >
<div id=highlight3 >
In the associated CSS stylesheet we might have:

#highlight1 {background:yellow;}
#highlight2 {background:green;}
#highlight3 {background:pink; font-size:12px; text-decoration:underline; width:400px;}

So in this case the paragraph would have a background of yellow, the bold text would have a green background and the whole div would have a pink background with all text 12 pixels high and underlined. Here is an example for you to play with!

<html>
<head>
<title>Eggstream CSS coding</title>
<style>
#highlight1 {background:yellow;}
#highlight2 {background:green;}
#highlight3 {background:pink; font-size:10px; text-decoration:underline; width:400px;}
</style>
</head>
<body>
<p id=highlight1>this is our highlight1 paragraph and nested inside we have some<b id=highlight2>bold highlight2 text</b> and <b>normal bold text</b> as well.</p>
<div id=highlight3>
<h3>This is our highlight3 div</h3>
<P>Promoting yourself and your web site is a big part of ensuring the creation of affiliate
income. This will mean doing everything you can to raise your search engine ranking
positions on Google, Yahoo, and MSN.</p>
<P>Marketing is bigger than just SEO. A strong and comprehensive
marketing effort includes getting out there and using every legitimate means of
promoting your site, from leaving business cards on restaurant tables to posting a
printed ad in the local supermarket to listing your site at online business and
informational sites. Choosing to consider this sort of activity a waste of time is more or less deciding you
want the program to fail.</p>
</div>
</body>
</html>

Are you human?

736 + 189 =

Have a play with this code then hit the show my page button again.

Attribute CSS target types

It is possible to target all elements with a certain attribute- for example all links with titles, all images with alt texts, and so on and so on. It is also possible to target particular attribute settings, for example all images with a width of 200 or all image whose alt text is eddie. This is done by specifying the settings within square brackets after the tag or wildcard selector. There are two more useful techniques. The first allows CSS to target based on matching any word in a space seperated list of words, for example you could have classes called "two horse race" and "three horse race" and match on the word horse to specify styles that both classes share. The syntax for this is to place a tilde(~) before the equals sign. The second technique matches any word in a dash (-) delimited value, this is useful for file names and is used by pacing a pipe charaxcter (|) in front of the equals sign. Here are some examples for you to play with!

Have a play with this code then hit the show my page button again.

These last codes are really useful because they mean you do not have to create the style statements for the classes. imagine if everything called red is red, everything called bold is bold, everything called hilite has a yellow backround, so if you have text you want to be red bold and hilite you just call it class="red bold hilite" Done!

Next: CSS Text Content Layout

Tutorial Contents

CSS Tutorial Referrers

bookmark hit - internal hit - www.google.co.in - www.google.com - www.google.se - www.google.gr - www.google.co.uk - www.google.ca - www.google.ie - duckduckgo.com - www.google.com.au - www.google.com.br - www.google.com.ph - www.google.co.nz - www.google.com.sg - meongdddd.me - momomo.me - www.google.com.cy - www.google.nl - www.google.co.id - www.google.de - www.google.com.ar - www.google.lv - search.yahoo.com - www.google.dk - www.google.hr - ... - ... - search.aol.com - www.google.hu - msmmsmsmsmsmsm.com - www.google.fr -

This list of people who link to this Tutorial page is automagically maintained. Link to us, send traffic, and get listed. Simple.