Posts
Styles don’t do us much good until they are associated with an HTML
element in a web page. To enable us to target the exact elements on the page
for the maximum amount of display control, the CSS 1 and CSS 2 specifications
provide a vast number of selectors.
General selectors
The possibilities for applying selectors seem almost endless, but you have to
know the right way to do so. Once you know the rules for creating selectors
and understand the patterns, writing well-constructed CSS will be a snap.
As a bonus, you’ll able to troubleshoot really well and discern the root of any
issues that may come up later.
Universal
The universal selector is the asterisk (*). This selector lets you select every
element on the page and apply the style rules to them.
*{font-family: Arial, sans-serif;}
Element/type
The element or type selector targets an HTML element, and thus uses a tag
name. This enables you to select any of this kind of element in the document.
p {font-size: 1em;}
Class
In HTML, every single tag can have the class attribute. A class selector targe
the value of a class attribute of a tag. A class attribute can be used multiple
times in a document and applied to different elements.
For example, both <p> and the <li> tag have the class attribute with the value
of "highlight" assigned to them, so they both get the style applied to them:
<p class="highlight">Someone has been murdered!</p>
<p>What was the possible weapon?</p>
<ul>
<li>A candlestick </li>
<li class="highlight">A lead pipe</li>
<li>A rope</li>
</ul>
.highlight {color: #ffcc00;}
Because you can use a class selector many times in a document with multiple
elements, it is very flexible and portable.
You can increase the specificity of a class selector by attaching it to
an element selector, which would cause the style to be applied only to
an element with a class attribute with that value.
So, from the example above, if you wanted only an <li> with the class="highlight"
to have the color declared, you would change the selector to this:
li.highlight {color: #ffcc00;}
ID
Id selectors target an element with a particular id attribute. Ids help you zero
in on a particular element, because you can only use an id once in any document.
Ids have a very high specificity weight.
<div id="maincontent">
<p>Would Nancy Drew ever write a tell-all? <em>Yes, she would.</em>
➥ In <a href="nancydrewconfessions.html">”Confessions of Nancy Drew”</a>
➥ you’ll find out that being a teen sleuth is not all the glitz and
➥ glamour that you may think.</p>
<p>Still want to be a detective? Then keep reading. <img
src="fingerprint.jpg" alt="fingerprint"></p>
</div>
#maincontent {background-color: #eee;}
IDs and Element Selectors
You could use the element that the id is associated with in the selector
like so:
div#maincontent {background-color: #eee;}
In this case, I added div. However, because the id that you are using is
unique to the page, the addition of the element name is unnecessary.
The results would be the same.
0 comments:
Post a Comment