SDSU Faculty Profile - Victor M. Ponce - Cascade Style Sheets - Primer

SDSU Faculty Profile - Victor M. Ponce - Cascade Style Sheets - Primer - Learn how to do CSS

CSS (CASCADE STYLE SHEETS) PRIMER
(041012)

CSS provides a way to specify style formats in HTML documents in a variety of ways, from global to local.

CSS code can be specified as inline style, i.e., inside the HTML tag.

CSS code can also be specified as internal style, using the style tag which is embedded in the HTML head tag.

CSS code can also be specified as external style, using an external file sample.css residing in the subdirectory "styles".
Multiple style definitions will cascade into one, with the following priority: 1. Inline style, 2. Internal style, 3. External style, and 4. Browser default.

No.	CSS Code	Explanation [comments]
1	<head> <style type="text/css"> p {xxx} </style> </head>	Internal style tag; type is text; executes instruction line p {xxx}.
2	<head> <style type="text/css"> @import url("styles/sample.css"); </style> </head>	External style tag, imported from css file [Example: sample.css] residing in subdirectory "styles" [located immediately below public_html directory]. [Type raw css code directly into styles/sample.css. Do not use style tags in css file.]
3	body {font-family:helvetica; background:#ffffcc}	Body font is helvetica and background color #ffffcc [other common fonts: roman, arial, courier, bookman].
4	body {margin-left:10%; margin-right:10%}	Sets both margins to 10% of the window width.
5	p {margin-left:1em; margin-right:1em}	p paragraph's left margin moves 1em to the right; p paragraph's right margin moves 1em to the left [1em is equal to the font size].
6	p.abc {margin-top:8em; margin-bottom:5em}	p class="abc" paragraph's top margin has vertical white space equal to 8em, and bottom margin has vertical white space equal to 5em. [Example: <p class="abc">xxx</p>].
7	p.hot:first-letter {color: darkred; font-size:200%; font-family:bookman; padding:3px}	p class "hot" paragraph's first letter style is as follows: color darkred, font size 200%, font bookman, padding 3 pixels [the white space on the left and right of the first letter].
8	a {text-decoration:none}	Provides links with no text decoration (eliminates underlining from links) [other text decoration: underline].
9	a.plain {text-decoration:none}	Provides link of class "plain" with no text decoration (eliminates underlining from links) [other text decoration: underline]. [Example: <a class="plain" href="http://google.com">google.com</a>]
10	a:hover {color:#990000; background:#ffffcc; text-decoration:none}	Provides hover feature with specified [text] color [#990000] and background color [#ffffcc], and no text decoration (eliminates underlining from links).
11	div.narrow {margin-left:1em; margin-right:1em}	Text embedded in division tag of class "narrow" will be indented 1em on both left and right margins. [Example: <div class="pqr">xyz</div>].
12	div.box {border:solid; border-width: thin; padding:3em}	Text embedded in division tag of class "box" will be enclosed within a thin solid border with 3 em of padding.
13	div.color {border:solid; border-width: medium; padding: 5em; background: #ffffcc}	Text embedded in division tag of class "color" will be enclosed within a medium solid border with 5 em of padding and background color #ffffcc.
14	#redbar {position: absolute; left: 10em; right: 10em; top: 30px}	Text embedded in division tag of id "redbar" will be positioned as stated. [Example: <div id="redbar">xyz</div>].
15	strong {color: red}	Renders all strong text in red color.
16	b {color: #0000ff}	Renders all bold text in #0000ff (blue) color.

Leading CSS Tutorials: w3.org w3schools.com echoecho.com htmlgoodies.com htmlhelp.com westciv.com