Session 2.3 Cascading Style Sheet
2.3.1 CSS Introuction
Cascading Style Sheets (CSS) is a style sheet language used to
describe the presentation semantics (the look and formatting) of a
document written in a markup language. Its most common application is
to style web pages written in HTML and XHTML, but the language can also
be applied to any kind of XML document, including plain XML, SVG and
XUL.
2.3.2 CSS General Particulars
| Filename extension | .css |
|---|---|
| Internet media type | text/css |
| Developed by | World Wide Web Consortium |
| Initial release | 17 December 1996 |
| Type of format | Style sheet language |
| Standard(s) | Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Recommendation) |
2.3.3 CSS Syntax
|
/* CSS version 2.0, by Boris Cherny. */ /*Many thanks to Andreas, NickyD, ditchCrawler,
TomW, whowrotewhat, hash bar, and Sanden Cottongame */ * { border:
0; margin:
0; padding:
0; } body { background:
#6183ad url(Images/background_big.gif) center repeat-y; color:
#616161; font-family:
Verdana, Arial, Helvetica, sans-serif; font-size:
69%; text-align:
center; } a { color:
#6799b1; text-decoration:
underline; } a:hover { color:
#838f96; text-decoration:
none; } acronym { border-bottom:
1px dashed #999999; cursor:
help; } h1 { border-bottom:
1px solid #aec4de; border-top:
1px solid #aec4de; border-right:
20px solid #6183ad; color:
#6183ad; font-size:
130%; font-weight:
normal; margin:
5px 0; background:
#d7e5ef; } h1:hover { border-bottom:
1px solid #7f9fc6; border-top:
1px solid #7f9fc6; background:
#c9dcea; } input { background:
#385585; margin:
2px 20px; width:
140px; } #column2 ul { margin:
10px 0; } #column2 li { color:
#999999; list-style:
square inside; text-indent:
10px; } .login { border:
1px solid #c9dcea; color:
#999; } .login_hover { border:
1px solid #999; color:
#ccc; } #submit { border:
1px solid #c9dcea; color:
#999; cursor:
pointer; margin:
2px 20px; text-decoration:
none; width:
140px; text-align:center; } #submit_hover { border:
1px solid #999; color:
#ccc; cursor:
pointer; margin:
2px 20px; text-decoration:
none; text-align:center; } /* The background-image's for the #wrap below are
for preloading all the page's images, just add your own images to the pattern
*/ #wrap { background-image:
url(Images/arrow.gif); background-image:
url(Images/arrow_outline.gif); background-image:
url(Images/background.gif); background-image:
url(Images/camera1.gif); background-image:
url(Images/camera2.gif); background-image:
url(Images/camera3.gif); background-image:
url(Images/header_big.gif); background-image:
url(Images/selector.gif); background-image:
url(Images/selector_sub.gif); background-repeat:
no-repeat; background-position:
-5000px -5000px; margin:
0 auto; text-align:
left; width:
800px; } #header { background:
url(Images/header_big.gif) center no-repeat; color:
#e0e0e0; font-size:
327%; font-weight:
bold; height:
100px; line-height:
120px; text-indent:
150px; } #nav { padding-bottom:
40px; width:
179px; } /* leave the padding-bottom in the #nav if you want
some space between the navigation and the photos in the left column */ #nav ul li { display:
inline; line-height:
16px; list-style:
none; } #nav ul li a { border-bottom:
1px solid #c9dcea; color:
#fff; display:
block; padding:
5px; text-decoration:
none; width:
169px; } /* remove the 'text-decoration: underline;' in #nav
li a:hover if you don't want the links in the left nav menu to be underlined
when the user hovers over them with their mouse */ #nav li a:hover { background:
#c9dcea url(Images/selector.gif) center right no-repeat; color:
#000; } /* the following 3 rules are for the submenu, if
you removed the submenu remove these rules as well */ #nav ul ul li { line-height:
10px; border-bottom:
none; } #nav ul ul li a { color:
#d7e5ef; text-indent:
10px; } #nav ul ul li a:hover { color:
#000; background-image:
url(Images/selector_sub.gif); } #column1 { float:
left; width:
180px; } #column1 img { border:
1px solid #c9dcea; margin:
5px 20px; padding:
10px 20px; } /* in the tag below, #column2, I used the
Underscore Hack to give the column2 div the correct margins in Firefox 1 */ #column2 { float:
none !important; float:
right; margin-left:
192px !important; margin-left:
0; padding:
12px 40px 30px 9px; } #column2 p { line-height:
190%; } #links div { float:
left; width:
140px; } #links div li { list-style:
none; } #links div li a { background:
url(Images/arrow_outline.gif) left no-repeat; padding-left:
15px; text-decoration:
none; } #links div li a:hover { background-image:
url(Images/arrow.gif); color:
#ac835c; text-decoration:
underline; } #footer { clear:
both; color:
#999; font-size:
9px; padding:
30px 0 10px 0; text-indent:
185px; } #footer a { color:
#999999; text-decoration:
underline; } |
Note:
1. "*" is a wild card notation representation everything. The attributes it defines are applied to all elements.
2. "ID" is specified by a "#" preceding the name of the element, eg. #column1. It is unique in the web page (i.e. It appears once only).
3. "Class" is specified by a "."(dot) preceding the name of the element, e.g. .longin. It may be repeatedly used in the web page.
2.3.4 Anatomy of Web-Page Using CSS
(Image: The Appearance of Web-page Using CSS of "A Bit Modern Big Blue from OSWD.Com Illustrated by Uncle MIng's Gallery)
Tips in Using CSS:
1. Carefully plan the layout before writing the CSS. Instead of
DIY, refer to a template obtained from elsewhere and try to modify it
is always a good idea. Basically, there is no copyright for a code
section in a CSS but the graphical elements do have copyright. Build up
a pool of graphical elements conforming to the specification defined by
the CSS at first.
2. Inline style overrides Internal style sheet and internal style sheet overrides external style sheet.
3. Multiple style sheet is possible.
4. Multiple class is possible.
5. Use "class" as much as possible. "ID" is recommended when
"javascript" is used because it can be called by a specific function of
the scripting language.
6. Back up the web page template and first. Then use an WYSIWYG editor
to test the effect of changing the attributes of both the "id" and
"class" on the layout of the web page. Thus you may get acquanted to
all the attributes of an element.