Page 132 - DCAP408_WEB_PROGRAMMING
P. 132
Web Programming
Notes a:link {color:pink}
a:hover {color:blue}
If you had a few links you wanted to be a bit different, you’d add this:
a.menu:active {color:blue}
a.menu:visited {color:blue}
a.menu:link {color:blue}
a.menu:hover {color:pink}
Then add class=”menu” to the links you’d like different, like this:
<a href=”page.html” class=”menu”>link</a>
Using classes is simple. You just need to add an extension to the typical CSS code and make sure
you specify this extension in your HTML. Let’s try this with an example of making two paragraphs
that behave differently. First, we begin with the CSS code, note the red text.
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class=”first”>This is a paragraph that uses the p.first CSS code!</p>
<p class=”second”>This is a paragraph that uses the p.second CSS code!</p>
...
Display:
This is a normal paragraph.
This is a paragraph that uses the p.first CSS code!
This is a paragraph that uses the p.second CSS code!
You can use CSS classes with any HTML element! However, what happens if we had already
defined a value for the default <p> tag, would this cause any problems for classes of the paragraph
tag?
Well, when this happens the CSS class for any <p> tag will override the default <p> CSS. If the
CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by
the class will be the value that is used.
It may be easier to imagine that the CSS for a generic HTML element is the starting point and the
only way to change that look is to overwrite the attributes using CSS classes. Please see the
example below for a visual of this tricky topic.
Example:
CSS Code:
p{ color: red; font-size: 20px; }
126 LOVELY PROFESSIONAL UNIVERSITY
