CSS Tips

Three types of styles:

External (Best solution)

Embedded (Done for the one page only- Specified in the head)

Element (Done for a single element- specified as an attribute of the element)

Cascading

Cascading means that the page will inherit the styles from the External stylesheet, then add any formatting from the Embedded style, then add any styles from the Element.

Ex.External specifies that H1 is blue

Embedded specifies that H1 is italic

Element style specifies that THIS H1 is 12 pts

Result: The H1 at that spot on that page will be Blue, Italic and 12 pts. The other H1's on that page will be blue and italic.

Syntax

Formatting is done with the HTML element (ex. h1) followed by curly brace { followed by attribute (ex. color) followed a colon : then the property (ex. blue) ending with a semicolon ;
Wrapping it all up is a close curly brace }

Putting it all together:

h1 {color: blue;}

You can also group certain elements together

Ex.

h1, h2, h3 {color: blue;}

In addition, you can specify particular elements under certain conditions

Ex.

ul li {font-weight: bold;}

ul ul li {font-style: italic;}

In this case, a list item in an unordered list will be bold; however, if the list item is a part of an unordered list that is a part of another unordered list, it will be italc

Character Styles

Can do a class for particular elements

Done by using a dot, then the class name

Ex. .cap {font-size: 1em;}

NOTE: Classes ONLY work in Embedded Styles; They will NOT work in External Style Sheets!!

Proper Use of Span Tags

Can use span tags <span> in the html code to signify certain elements formatted differently

Old version

<span> Some element</span> that will look different than the rest of the text

New version

<span class="cap"> Some element</span> that will look different than the rest of the text

Print Version of the page

Can use either a link tag with an additional attribute [ media="print" | media="screen"] OR
specify in the style tag

Ex.

<link type="text/css" rel="stylesheet" href="styles.css" media="screen">
<link type="text/css" rel="stylesheet" href="print-style.css" media="print">

OR

<style type="text/css">
@media print {
h1, h2, h3, h4 {
color: purple;
/* font-variant: small-caps; */
font-family: "Comic Sans MS", "Bookshelf Symbol 7";
font-size:1.3em;
}
}
@media screen {
h1, h2, h3, h4 {
color: red;
font-variant: small-caps;
font-family: "Arial";
font-size:1.3em;
}
ul li {font-weight: bold;}
}
</style>

Try these tips out with this file

Back to Class Tips

Back to Home