5.

cascading
What is Cascading?
Cascading is like a waterfall. You start at the top. As you go down,
there are different levels.

There are 3 levels of C!! co""ands#
$n the sa"e page within an %T&' tag as a property.
$n the sa"e page in the (%)A*+ ... (,%)A*+ area.
$n a separate page.

Choosing the one or co"-ination of all is your choice. )very-ody
has an option on how they want to set up their page or site.

The CA!CA*./0 part of C!! deter"ines the i"portance of a
co""and tag. .f you have a tag for the sa"e property on all 3
levels, -ut each one has a different value assigned to it, the C!!
will take and use the "ost i"portant out of the". 'evel 1 will
over2ride 'evel 3 which will over2ride 'evel 3.


)4ternal

%aving written all C!! co""ands on a separate page is -est
suited for a "ultiple page site owner. &ultiple pages are a-le to
utili5e the sa"e co""ands in a single area. These pages are
called linked or e4ternal C!!. 6or ti"e, it saves fro" typing in
all the co""ands on each individual page. 6or space, it takes less
space since "ore than one page is using the sa"e page
reference. 6or editing, one change on the "aster C!! page will
affect all pages connected to it, instantly. 6or "aintenance, such
sites are easy to "odify and "aintain since when we edit the
"aster C!!, the effects are shown on all related pages.

C!! pages have a file e4tension of .css which is allowed on "ost,
if not all, "ain ho"epage servers. Create and save the docu"ent
in te4t2only for"at then give the docu"ent the .css e4tension.

An e4ternal page is usually used for a generalor co""on style
layout. !etting the -ackground color or i"age, setting the te4t
colors, etc.

To link to the e4ternal style sheet, a './7 "ust -e placed in the
%)A* area of the page code. That is anywhere after the (%)A*+
tag and -efore the (,%)A*+ tag.

(link rel8stylesheet type8te4t,css href86ile/a"e.css+

'./7 There is a separate page of co""and tags linked to use on
this page.
9)' The linked page is a !TY')!%))T.
TY:)The linked page is te4t for"at containing C!! co""ands.
%9)6The filena"e ;and location or su-2directories if necessary<
of the linked page.

)4ternal C!! pages do not use any foundation tags. =ust the
actual C!! co""ands are listed.


)"-edded

The %)A* area, is also used to store C!! co""ands. These are
called e"-edded C!!. )"-edded co""ands are "ore specific to
the page. Any e"-edded C!! co""and will over2ride an e4ternal
C!! co""and of the sa"e tag.

)"-edded C!! codes are placed within the %)A* area of the page
code. That is anywhere after the (%)A*+ tag and -efore the
(,%)A*+ tag. /$T in the %)A* tag itself.

(style type8te4t,css+
(>22
... style sheet codes here ...
22+
(,style+


&ost e4a"ples shown in the following C!! tutorial pages will -e
using the )&?)**)* style.


.nline

.nline C!! are the "ost do"inant type of C!! co""ands. They
will over2ride any others -efore the". !tyle co""ands are
actually placed within any regular %T&' tag in the ?$*Y area.
(tag style8 C!! code +
... te4t or o-@ect ...
(,tag+

What is Cascading?
Cascading is like a waterfall. You start at the top. As you go down, there are different levels.
There are 3 "levels" of Cco!!ands"
#n the sa!e page within an $T%& tag as a property.
#n the sa!e page in the '$(A)* ... '+ $(A)* area.
#n a separate page.
Choosing the one or co!,ination of all is your choice. (very,ody has an option on how they
want to set up their page or site.
The CACA)-./ part of Cdeter!ines the i!portance of a co!!and tag. -f you have a tag for
the sa!e property on all 3 levels, ,ut each one has a different value assigned to it, the Cwill
take and use the !ost i!portant out of the!. &evel 0 will over1ride &evel 2 which will over1ride
&evel 3.
(3ternal
$aving written all Cco!!ands on a separate page is ,est suited for a !ultiple page site
owner. %ultiple pages are a,le to utili4e the sa!e co!!ands in a single area. These pages are
called "linked" or e3ternal C. 5or ti!e, it saves fro! typing in all the co!!ands on each
individual page. 5or space, it takes less space since !ore than one page is using the sa!e page
reference. 5or editing, one change on the !aster Cpage will affect all pages connected to it,
instantly. 5or !aintenance, such sites are easy to !odify and !aintain since when we edit the
!aster C, the effects are shown on all related pages.
Cpages have a file e3tension of .css which is allowed on !ost, if not all, !ain ho!epage
servers. Create and save the docu!ent in te3t1only for!at then give the docu!ent the .css
e3tension.
An e3ternal page is usually used for a "general"or "co!!on" style layout. etting the
,ackground color or i!age, setting the te3t colors, etc.
To link to the e3ternal style sheet, a &-.6 !ust ,e placed in the $(A) area of the page code.
That is anywhere after the '$(A)* tag and ,efore the '+ $(A)* tag.
'link rel7"stylesheet" type7"te3t+ css" href7"5ile.a!e.css"*
&-.6 There is a separate page of co!!and tags linked to use on this page.
8(& The linked page is a TY&($((T.
TY9( The linked page is te3t for!at containing Cco!!ands.
$8(5 The filena!e :and location or su,1directories if necessary; of the linked page.
(3ternal Cpages do not use any foundation tags. <ust the actual Cco!!ands are listed.
(!,edded
The $(A) area, is also used to store Cco!!ands. These are called e!,edded C. (!,edded
co!!ands are !ore specific to the page. Any e!,edded Cco!!and will over1ride an
e3ternal Cco!!and of the sa!e tag.
(!,edded Ccodes are placed within the $(A) area of the page code. That is anywhere after
the '$(A)* tag and ,efore the '+ $(A)* tag. .#T in the $(A) tag itself.
'style type7"te3t+ css"*
'=11
... style sheet codes here ...
11*
'+ style*
%ost e3a!ples shown in the following Ctutorial pages will ,e using the (%>())() style.
-nline
-nline Care the !ost do!inant type of Cco!!ands. They will over1ride any others ,efore
the!. tyle co!!ands are actually placed within any regular $T%& tag in the >#)Y area.