Styles

Combining Stuff:

Combining Style Stuff 1:

You can combine the class and id selectors alone or together with other selector criteria and in some cases will need to, such as making a few custom link states for different parts of your page.

ex.

STYLE:
.funny {color: red;}
(will effect the funny class)
h3.funny {color: orange}
(will effect h3 tags in the funny class)

html:

boo

STYLE:
a.emaillink2:link { font-family: Verdana; font-size: 12px; color: #000000; text-decoration: underline; font-weight: bold}
a.emaillink2:hover { font-family: Verdana; font-size: 12px; color: #FF0000; text-decoration: underline; font-weight: bold}
a.emaillink2:active { font-family: Verdana; font-size: 12px; color: #FF0000; text-decoration: underline; font-weight: bold}
a.emaillink2:visited { font-family: Verdana; font-size: 12px; color: #FF6600; text-decoration: underline; font-weight: bold}

a.reglinks:link { font-family: Verdana; font-size: 12px; color: #CC0000; text-decoration: underline;font-weight: normal}
a.reglinks:hover { font-family: Verdana; font-size: 12px; color: #FF0000; text-decoration: underline;font-weight: normal}
a.reglinks:active { font-family: Verdana; font-size: 12px; color: #FF0000; text-decoration: underline;font-weight: normal}
a.reglinks:visited { font-family: Verdana; font-size: 12px; color: #FF6600; text-decoration: underline;font-weight: normal}

html:
<a href="mailto:larissabank@hotmail.com" class="reglinks">myURL</a>

note:
a:link (is the style for normal state of links)
a:hover (is the style for the over state when your mouse is over the link)
a:active (is the style for a currently selected link)
a:visited (is the style for a visited link)
a:focus (if the link is selected via the keyboard and is ready to be activated)

Combining Style Stuff 3:
You can also effect elements within a div tag. A class may apply to all div items and then lets say you want within that section another class to apply to certain tags used only in that div area.

ex.
STYLE:
div#allfancy {color: orange}
div#allfancy p{color: red}

html:
<div id="allfancy">
<p>I am all fancy and have special paragraph stuff going on as well</p>
I am all fancy and I don't have special paragraph stuff going on.
</div>

RESULT:

or

STYLE:
#notfancy{color:blue}
p#notfancy {color: green}
(will effect the p element with an ID equal to "notfancy")

html:
<p id="notfancy">
I am not fancy and have special paragraph stuff going on as well</p>
<span id="notfancy">I am not fancy and I don't have special paragraph stuff going on.
</span>

RESULT:

I am all fancy and have special paragraph stuff going on as well

Selecting Just a Part of an Element:
You can also apply a style to just one line of an element or the first letter.

ex.

STYLE:
p:first-line {color:red;}
p:first-letter {color:black;}

html:
<p>here I am</p>

RESULT:
here I am