/* Default styling for paragraphs */
p {
color:#F00;
font-size:12px;
}
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
All paragraphs will still be red by default, but this can still be overridden when necessary
by identifying an element with the bleached class, as in this (X)HTML:
<p>This paragraph has red text.</p>
<p class="bleached">This paragraph has light gray text.</p>
The second paragraph will now be light gray, as the color declaration in bleached overrides
the red. Note that the paragraph is still rendered 12 pixels high, as bleached does not redefine
font-size. Add a font-size declaration in bleached, and that value will override the original
size for all paragraphs identified with class="bleached".
Css Source Codes, Css Practical examples ,Css tutorial ,Your best resource for Learning Css
Showing posts with label overriding. Show all posts
Showing posts with label overriding. Show all posts
Monday, October 4, 2010
Overriding Base Styling with Classes
Friday, October 1, 2010
Alt text overriding title text
Problem: If you have an image with alt text nested inside a link that has a title element,
the title element will be overridden. This is largely due to Internet Explorer wrongly displaying
the content of the alt attribute as a tooltip.
Solution: The only way around this problem is to duplicate the title attribute and place a
copy of it within the img element. This is superfluous markup, but it fixes the issue in
Internet Explorer and does not adversely affect other web browsers.
<a href="sunset.html" title="Click to view a larger image"><img
å title="Sunset in Reykjavík" src="sunset.jpg" alt="Sunset in
å Reykjavík" width="400" height="300" /></a>
the title element will be overridden. This is largely due to Internet Explorer wrongly displaying
the content of the alt attribute as a tooltip.
Solution: The only way around this problem is to duplicate the title attribute and place a
copy of it within the img element. This is superfluous markup, but it fixes the issue in
Internet Explorer and does not adversely affect other web browsers.
<a href="sunset.html" title="Click to view a larger image"><img
å title="Sunset in Reykjavík" src="sunset.jpg" alt="Sunset in
å Reykjavík" width="400" height="300" /></a>
Subscribe to:
Posts (Atom)