CSS Compound Rules
We can stylize these different tags to appear different depending on which box they sit in. This is done by making compound CSS rules. For example, instead of making a generic rule for all h1 text we can make different rules for h1 in different boxes. These could include header, main, aside, footer, etc.
The compound rule would look like this…
header h1
font-family: your choice here;
font-size: your choice here;
font-weight: your choice here;
color: your choice here;
main h1
font-family: a different choice here;
font-size: a different choice here;
font-weight: a different choice here;
color: a different choice here;
aside h1
font-family: a third choice here;
font-size: a third choice here;
font-weight: a third choice here;
color: a third choice here;
footer h1
font-family: a forth choice here;
font-size: a forth choice here;
font-weight: a forth choice here;
color: a forth choice here;
Inline CSS Style
Next we can also change the appearance of the text by using inline CSS coding. This would allow us to make many general rules, but occasionally change some specific text with some inline CSS style code.
An example of that would be… p style="color: blue; font-weight: 800;"Paragraph text goes here p/
The Use of the Span Tag
Lastly, to change the appearance of text we could use the span tag. An example being…
p This is a span paragraph /span /p the CSS code would be used in the attached style sheet would look like this…
p span font-family: a forth choice here; font-size: a forth choice here; font-weight: a forth choice here; color: a forth choice here;
tags h1 - h6 p b visually similar to strong i visually similar to em pre mark code
Common font-size: font-weight: font-family: color: (Note: only applies to typeface color, not background!) text-align: text-decoration: text-transformation: line-height:
Stylizing Links
The most obvious elements of interactivity is the ability of links to change when you hover over them. Links can be made to show changes in color, underline, weight, and even typeface or background color. These are important clues for the site user that suggest the image or text is a link and the changes that will happen to the page if clicked.
Use this code to establish these type of links
a font-size: 0.9em; color : #FFFFFF; margin-top: 5px; text-align: center; text-decoration: none; font-weight: 300; margin-right: 4px;
a:visited color : #FFFFFF; font-weight : bold;
a:hover color: #EAEAEA; text-decoration: underline; cursor: pointer;
a:active color: #3d9997; cursor: pointer;
And remember it MUST be done in this order…
a
a:visited
a:hover
a:active