From: Subject: JumpStart to the Web technologies tutorial: Cascading Style Sheets (CSS) Date: Thu, 14 Nov 2002 10:47:53 +0100 MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_NextPart_000_0007_01C28BCB.4891C590"; type="text/html" X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106 This is a multi-part message in MIME format. ------=_NextPart_000_0007_01C28BCB.4891C590 Content-Type: text/html; charset="Windows-1252" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/part_8.html JumpStart to the Web technologies tutorial: Cascading = Style Sheets (CSS)
Jumpstart into=20 the Web technologies: <- Prev. Start Contents References Home Next=20 ->
Cascading Style Sheets (CSS)

Style Sheets are defining for the Web browser how to present a = document.=20

These are the basic types of presentational information, called = properties:=20

The basic syntax for defining the CSS is the following: = 

<STYLE TYPE=3D"text/css">
selector1 { property: value }
selector2 { property1: value1; property2: value2 }
............
</STYLE>
Each rule is made up of a selector (usually an HTML element such = as BODY,=20 P, H1 etc.) and the style to be applied to the selector. The style = consists of=20 the list of properties and values.=20

Example: 

<STYLE TYPE=3D"text/css">
<!--
BODY { color: green; }
H2 { text-decoration: underline;
     color: blue;
}
-->
</STYLE>
The first rule sets the default text color to green. The second = rule=20 defines, that heading 2 will be underlined and with font color = blue.
The=20 reason it's good to put the rules in comments is that if browser doesn't = support=20 the CSS it'll not be shown.=20

Linking Style Sheets to = HTML

There are tree ways to link style sheets to your HTML:=20

Note here, that you can use = different=20 MEDIA to specify different style sheets in case of screen, printer, = projection=20 etc. - But this attribute is not working in Netscape 4.x, it'll ignore = the style=20 sheet with this :-(

Here are some examples on the different types of rules: =
Source Result
Class Selector:
Need to define the diffrent styles for = the same=20 element you can use classes. 
<STYLE TYPE=3D"text/css">
H4.exmpl1 {
  text-decoration: underline;
  text-transform:uppercase;
  color: blue;
}
H4.exmpl2 {
  border-width:4pt;
  border-style:outset;
  padding: 4pt;
  background-color:#909090;
  color: green;
}
</STYLE>
<H4 CLASS=3Dexmpl1>This is exmpl1 class</H4>
<H4 CLASS=3Dexmpl2>This is exmpl2 class</H4>

This is exmpl1 class

This is exmpl2 class

<STYLE TYPE=3D"text/css">
/* class can be defined without an associated element */
.red { color: red }
</STYLE>
<EM CLASS=3Dred>This is red EM element</EM><BR>
<B CLASS=3Dred>This is red B element</B>
This is red EM element
This = is red B=20 element
ID Selectors:
ID selectors used to define rules on a=20 per-element basis. ID should be unique in whole document. = 
<STYLE TYPE=3D"text/css">
#myid100 {color: green}
</STYLE>
<EM ID=3Dmyid100>This is ID selector example</EM>
This is ID selector example
Contextual Selectors:
These selectors define the properties = of the=20 element in some context. They will take precedence over simple = selectors=20 according to the rules of cascading order. 
<STYLE TYPE=3D"text/css">
P BLOCKQUOTE {
  color: green;
  text-decoration: line-through;
}
</STYLE>
<P><BLOCKQUOTE>This text inside the =
paragraph</BLOCKQUOTE></P>
<BLOCKQUOTE>This text outside the paragraph</BLOCKQUOTE>

This text is inside the paragraph

This text is outside of the = paragraph
Grouping
You can group selectors together = 
<STYLE TYPE=3D"text/css">
H3.exmpl4, H4.exmpl5 {
  text-decoration: underline;
  text-transform:uppercase;
  color: red;
}
</STYLE>
<H4 CLASS=3Dexmpl5>This is H4 exmpl5 class</H4>
<H3 CLASS=3Dexmpl4>This is H3 exmpl4 class</H4>

This is H4 exmpl5 class

This is H3 exmpl4 = class

Inheritance:
Almost all selectors which are nested = within=20 selectors will inherit the property values assigned to the outer = selector unless=20 otherwise specified. For example, a color defined for the BODY will also = be=20 applied to text in a paragraph or table.
There are some properties = which are=20 not inherited, e.g. in case of margin-top property, but these = are=20 logical.=20

Pseudo classes and elements:
Pseudo-classes and=20 pseudo-elements are special, predefined "classes" and = "elements".
Their=20 syntax is the following:
selector.class:pseudo-class { property: = value=20 }=20

CSS positioning:
CSS positioning is an extension to = CSS1=20 that lets you control an object's precise position on the page. You can = also=20 layer objects on the page and specify if they are visable or = hidden.
When=20 browser renders each object on the page it puts it into the so-called=20 'bounding box', which is basically invisable rectangle. You can = set the=20 exact position for each 'bounding box' using the absolute=20 positioning (coordinates from the edges of the browser) or using = the=20 relative positioning (coordinates from some other elements on = the page,=20 usually previous element).
Objects can be hidden or = visable=20 and they can overlap, in which case browser will use clipping. = You can=20 use z-index property to layer the objects on top of each over, = creating=20 the 3D layering.=20

Example:=20
Source Result
<STYLE TYPE=3D"text/css">
.over {=20
  position: relative;
  top: 10px;
  left: 5px;
  z-index: 2;
  background-color: #909090
}
.under { =20
  position: relative;
  top: -10px;
  left: -5px;
  z-index: 1;
  background-color: #a0a0a0
}

</STYLE>
<SPAN CLASS=3Dover>This is the over text, which is higer
than the second text. His z-index is 2.</SPAN>
<SPAN CLASS=3Dunder>This is the under text, which is lower.
It's z-index is 1.</SPAN>
This is the over text, which is higher than the = second=20 text. His z-index is 2. This is the = under text,=20 which is lower. It's z-index is 1. 
<STYLE TYPE=3D"text/css">
.plain {=20
  position: relative;
  top: 5px;
  left: 5px;
  width: 150px;
  height: 100px;
  background-color: #909090
}
.clip { =20
  position: relative;
  top: -70px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: #a0a0a0;
  color: blue;
  clip: rect(25px 125px 125px 25px)
}

</STYLE>
<SPAN CLASS=3Dplain>This is a block of a=20
plain text, just sitting here, doing=20
nothing, just to taking some place...</SPAN>
<SPAN CLASS=3Dclip>1 2 3 4 5 6 7 8 9 0 - =3D
q w e r t y u i o p
a s d f g h j k l z x c v b n m , .
</SPAN>
This is a block of a plain text, just sitting = here,=20 doing nothing, just taking some place... 1 2 3 4 5=20 6 7 8 9 0 - =3D q w e r t y u i o p a s d f g h j k l z x c v b n = m ,=20 .

To play with CSS, try CNET's Style-o-Mattic - a very nice tool to play with.=20

Summary:
CSS are extremely useful in many ways. They = allow=20 you to use the similar styles on all the pages. They allow to create = much nicer=20 Web pages with a lot of special effects. Use them, but don't abuse them! :-)=20

More info on CSS can be found here<= /I>.=20

Jumpstart into=20 the Web technologies: <- Prev. Start Contents References Home Next=20 ->

Copyright =A9 2000 Sergey=20 Gribov
------=_NextPart_000_0007_01C28BCB.4891C590 Content-Type: text/css; charset="iso-8859-1" Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/style.css .toolbar1 { PADDING-RIGHT: 3pt; PADDING-LEFT: 3pt; FONT-WEIGHT: bold; FONT-SIZE: = 8pt; PADDING-BOTTOM: 1pt; COLOR: #002255; PADDING-TOP: 1pt; FONT-FAMILY: = Tahoma, Arial, sans-serif } .toolbar2 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = 8pt; PADDING-BOTTOM: 1pt; COLOR: navy; PADDING-TOP: 1pt; FONT-FAMILY: = Tahoma, Arial, sans-serif } .title1 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = x-large; PADDING-BOTTOM: 7pt; COLOR: navy; PADDING-TOP: 10pt; = TEXT-ALIGN: center } .title2 { PADDING-RIGHT: 4pt; PADDING-LEFT: 4pt; FONT-WEIGHT: bold; FONT-SIZE: = x-large; PADDING-BOTTOM: 7pt; COLOR: navy; PADDING-TOP: 10pt; = TEXT-ALIGN: center; TEXT-DECORATION: underline } P { PADDING-RIGHT: 5pt; PADDING-LEFT: 5pt; PADDING-BOTTOM: 7pt; = PADDING-TOP: 7pt } ------=_NextPart_000_0007_01C28BCB.4891C590 Content-Type: application/octet-stream Content-Transfer-Encoding: quoted-printable Content-Location: http://www.sergey.com/web_course/navig.js =0A= // Navigation function to go to the next / previous page=0A= // n is offset (1, -1 etc.)=0A= function goto_page (n) {=0A= var first =3D 0;=0A= var last =3D 14; // should be the next after the last one=0A= var part_name =3D "part_";=0A= var loc =3D window.location.href;=0A= var re =3D /(.*)\/(\w+)\.html([^\/]*)$/;=0A= var ra =3D re.exec(loc);=0A= =0A= // may be it ends with '/' instead of index.html=0A= if (ra =3D=3D null) {=0A= ra =3D re.exec(loc + "index.html");=0A= }=0A= var path =3D ra[1];=0A= var fname =3D ra[2]; =0A= =0A= // alert("=3D=3D" + ra[1] + "=3D=3D" + ra[2] + "=3D=3D" + ra[3]);=0A= =0A= if (n !=3D -1 && n !=3D 1) {=0A= alert("Hmmm... Wrong parameter to goto_page()...");=0A= }=0A= else if (fname =3D=3D "index" || fname =3D=3D "content") {=0A= if (n =3D=3D -1) {=0A= window.location.href =3D path + "/index.html";=0A= }=0A= else { // +1=0A= window.location.href =3D path + "/" + part_name + "1.html";=0A= }=0A= }=0A= else if (fname =3D=3D "reference") {=0A= if (n =3D=3D -1) {=0A= window.location.href =3D path + "/" + part_name + last + ".html";=0A= }=0A= else { // +1=0A= window.location.href =3D path + "/reference.html";=0A= }=0A= }=0A= else {=0A= var re1 =3D new RegExp("^" + part_name + "(\\d+)");=0A= var ra1 =3D re1.exec(fname);=0A= var num =3D parseInt(ra1[1]);=0A= if (num !=3D null) {=0A= num +=3D n;=0A= if (num > last) {=0A= window.location.href =3D path + "/reference.html";=0A= }=0A= else if (num <=3D first) {=0A= window.location.href =3D path + "/index.html";=0A= }=0A= else {=0A= window.location.href =3D path + "/" + part_name + num + ".html";=0A= }=0A= }=0A= else {=0A= alert("Hmmm... the filename " + fname + " looks strange...");=0A= }=0A= }=0A= }=0A= ------=_NextPart_000_0007_01C28BCB.4891C590--