‹date/time›
‹footer›
‹#›
------=_NextPart_01C5C92E.038A48C0
Content-Location: file:///C:/ECB422F3/STLDEVWEB-CascadingStyleSheets_files/pres.xml
Content-Transfer-Encoding: quoted-printable
Content-Type: text/xml; charset="utf-8"
![](3D"master81_image001.gif")
10/04/2005 =
21:49:17
1
<=
/span>
Cascading Style Sheets<=
/span>
Alan Barasch
•alan@bar=
asch.com
•http://w=
ww.barasch.com
•AIM:
AlanMacro
![](3D"master82_image002.gif")
Cascading Style Sheets<=
/span>
=
Everything
you ever wanted to know, didn’t know you =
needed,
and had no idea where to get it!
10/04/2005 =
21:49:17
3
<=
/span>
What is CSS?
•Cascading Style Sheets
(CSS) is a simple mechanism for adding st=
yle
(e.g. fonts, colors, spacing) to Web
documents.
•Cascading Style Sheets =
lets
authors define style rules that are
applied to HTML elements
•Style rules influence t=
he
rendering of colors, alignment, bord=
er,
margins, and padding
•Style rules can define a
custom image for a list bullet, a backgrou=
nd
color or a position
•
10/04/2005 =
21:49:17
4
What can CSS do?
•Properly defined, CSS c=
an
set a paragraph to “float” to a specifi=
ed
position.
•Table elements can be
precisely defined
•Fonts and sizes can be
defined globally
•Any element of a page m=
ay
be defined and applied to an website&#=
13;
•CSS can make the job of=
a
webmaster infinitely easier!
10/04/2005 =
21:49:17
5
Governance of CSS
•Cascading Style Sheets,
level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual =
formatting model.
•CSS2, which became a W3C Recommend=
ation
in May 1998, builds on CSS1 and adds support f=
or
media-specific style sheets (e.g. prin=
ters
and aural devices), downloadable fonts, element =
=
positioning and tables.
10/04/2005 =
21:49:17
6
Types of Styles - Pr=
ecedence
•Linked – The HTML page =
is
“linked” to an external page e.g.
<LINK href=3D"special.css" rel=3D"stylesheet" type=3D&q= uot;text/css">
<LINK href=3D"special.css" rel=3D"stylesheet" type=3D&q= uot;text/css">
•Embedded – Specifies an
element within the page e.g. <STYLE type=3D"text/css"> p.special { =
color: rgb(230, 100, 180) } </STYLE>
•Inline – Sets the styli=
ng
for a specific item taking precedence =
over
anything specified in the stylesheet e.g. <P style=3D"font-size:
12pt; color: fuchsia">Aren't style she=
ets
wonderful?
•
<=
/div>
10/04/2005 =
21:49:17
7
Calling Styles
•Should I use SPAN or
DIV
•Use <DIV CLASS=3D“style”></DIV> to begin a new section and apply=
the
element to everything.
•Use <SPAN CLASS=3D“style”></SPAN> to apply the style to a sm=
all
section.
•Styles may be nested within each other but the usual rules about =
closing what you open applies
10/04/2005 =
21:49:17
8
@ “At” Rules
•Some CSS rules are only designed =
for certain media types
•Media Types allow you to specify how documents will be presented in different media. The document can =
be displayed differently on the screen, on the paper, with an aural =
browser, etc.
10/04/2005 =
21:49:17
9
Media Types
•All – for use in all me=
dia
devices
•Aural – for speech and
sound synthesizers
•Braille – for Braille
tactile feedback devices
•Embossed - for paged
Braille printers
=
•Handheld – for small or
handheld devices
•Print – for printers and
printing
•Projection – for projec=
ted
presentation
•TV – for television-type
devices
10/04/2005 =
21:49:17
10
Simple Examples
<=
span
class=3DHBB style=3D'position:absolute;left:-20.2%'>•Au=
ral
<=
span
style=3D'visibility:hidden'>•
<=
span
style=3D'visibility:hidden'>•
<=
span
class=3DHBB style=3D'position:absolute;left:-20.2%'>•Pr=
int
<=
span
style=3D'visibility:hidden'>•
<=
span
style=3D'visibility:hidden'>•
<=
span
class=3DHBB style=3D'position:absolute;left:-20.2%'>•Sc=
reen
<=
span
style=3D'visibility:hidden'>•
h1, h=
2,
h3, h4
{ voice-family: male; richness: 80; cue-before: url("beep.au")
}
=
<STYLE> H3 { page-break-before: always } </STYLE>
// For computer screens, the font size is 12pt. @media
screen { BODY {font-size:12pt;} }
// When printed, the font size is 8pt. =
@media
print { BODY {font-size:8pt;} }
![](3D"slide0017_image003.gif")
![](3D"slide0017_image004.gif")
10/04/2005 =
21:49:17
11
CSS Samples
•BODY
=
•{
• FONT-SIZE: small;
• COLOR: #000000;
• FONT-FAMILY: Arial, Helvetica,
sans-serif
•}
•B
•{
• COLOR: navy
•}
•STRONG
•{
• COLOR: navy
•}
•DD
•{
• MARGIN-TOP: 3px;
• FONT-WEIGHT: 500;
• MARGIN-BOTTOM: 18px
•}
•.PinkPara=
•{
• FONT-STYLE: oblique;
• FONT-FAMILY: Ge=
orgia,
"'Times New Roman'", "'MS Serif'";
• BACKGROUND-COLOR: #ffccff
•}
•
•.second&#=
13;
•{
• LIST-STYLE-IMAGE:
url(/tec/images/starbul.gif)
•}
•.third
•{
• LIST-STYLE-IMAGE:
url(/tec/images/starthr.gif)
•}
•.SideBarLeft
•{
• BORDER-RIGHT: #ffffff thin outset;&#=
13;
• PADDING-RIGHT: 3px;
• BORDER-TOP: medium none;
=
• PADDING-LEFT: 3px;
• FONT-SIZE: 11px;
• FLOAT: left;
• PADDING-BOTTOM: 3px;
------=_NextPart_01C5C92E.038A48C0
Content-Location: file:///C:/ECB422F3/STLDEVWEB-CascadingStyleSheets_files/slide0005.htm
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="windows-1252"
• BORDER-LEFT: medium none;
• WIDTH: 250px;
• PADDING-TOP: 3px;
• BORDER-BOTTOM: #ffffff thin outset;&=
#13;
• FONT-FAMILY: Arial, Helvetica,
sans-serif;
• POSITION: relative;
• BACKGROUND-COLOR: #ffffcc;
• TEXT-ALIGN: justify
•}<=
/div>
10/04/2005 =
21:49:17
12
CSS Enhanced Pages
![](3D"slide0005_image006.jpg")
![](3D"slide0005_image008.jpg")
10/04/2005 =
21:49:17
13
Example – 3 Views
![](3D"slide0006_image010.jpg")
10/04/2005 =
21:49:17
14
On Screen Examples
•Here is where the fun starts – Al=
an has
10/04/2005 =
21:49:17
15
CSS3
•CSS Specifications
CSS has various level= s and profiles. Roughly speaking, desktop browsers implement level 1, 2 or 3, o= ther programs implement the appropriate profile for their platform: cell phone, PDA, television, printe= r, speech synthesizer, etc.
CSS has various level= s and profiles. Roughly speaking, desktop browsers implement level 1, 2 or 3, o= ther programs implement the appropriate profile for their platform: cell phone, PDA, television, printe= r, speech synthesizer, etc.
•CSS level 3 is under development. It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more.
=
•=
CSS level
2 revision 1 (“CSS 2.1”) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, <=
span
style=3D'position:absolute;top:75.25%;left:16.66%;width:75.09%;height:5.5%=
'>right to left text and other things. At this =
moment, February 2004, it is a Candi=
date W3C Recommendation.
•
<=
/div>
10/04/2005 =
21:49:17
16
New Browsers
•Microsoft's blog admission that IE7 will not support standa=
rds
at the heart of the flexible, accessible web is
shameful, according to web testers
SciVisum.
“Microsoft's admission that IE7 will not support leadi= ng and well established standards such as CSS is shameful= and undermines accessibility efforts. While accessibility may well not be a mission critical element like security, this is a moral issue - saying it's not a priority sets a callous example, and thousands of businesses will follow suit. Microsoft nee= ds to lead by example and be at the cutting edge.
Or perhaps Firefox has them on the run and they're just not taking IE7 seriously anymore?” At 50 million users and counting, Firefox's rapid success is a threat. Perhaps Microsoft is putting all its efforts into cl= ever features and go-faster stripes in order to out-market Firefox - at the cost of good engineering and= web standards.
<= /span>
“Microsoft's admission that IE7 will not support leadi= ng and well established standards such as CSS is shameful= and undermines accessibility efforts. While accessibility may well not be a mission critical element like security, this is a moral issue - saying it's not a priority sets a callous example, and thousands of businesses will follow suit. Microsoft nee= ds to lead by example and be at the cutting edge.
Or perhaps Firefox has them on the run and they're just not taking IE7 seriously anymore?” At 50 million users and counting, Firefox's rapid success is a threat. Perhaps Microsoft is putting all its efforts into cl= ever features and go-faster stripes in order to out-market Firefox - at the cost of good engineering and= web standards.
<= /span>
10/04/2005 =
21:49:17
17
Future Development
•A working draft for CSS3
was published on 07/03/2003
<=
/span>
•New support for color so
that representation is true no matter what kind of computer; e.g. Macintosh or PC
•CSS3 extends the color
value to include the 'transparent' keywo=
rd
to allow its use with all properties that
accept a <color> value. This simplifies =
the
definition of those properties in CSS=
3.
10/04/2005 =
21:49:17
18
Conclusion
•You see web sites in wh=
ich
every page is directly formatted with=
a
crazy font or silly color. Some sites
backgrounds, while beautiful in themselves;
are totally inappropriate for a web page.
•Basically, CSS can
alleviate these styling mistakes.
Formatting the built-in HTML tags, we can make “fall
back” fonts, etc.. We can change an entire
site on the fly without touching a sing=
le
page. And we can break the styles in=
to
multiple lookups.
10/04/2005 =
21:49:17
19
Other Resouces
•VisiBone – www.visibone.com – produces wonderful laminated charts for CSS, JavaScript, HTML and other elements
•Microsoft – MSDN has a
complete reference
10/04/2005 =
21:49:17
20
Cascading Style Sheets
•alan@barasch.com
•AIM: AlanMacro
•
•
![](3D"slide0014_image012.gif")
------=_NextPart_01C5C92E.038A48C0
Content-Location: file:///C:/ECB422F3/STLDEVWEB-CascadingStyleSheets_files/slide0014_image011.jpg
Content-Transfer-Encoding: base64
Content-Type: image/jpeg
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP
ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e
Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCACnAV4DASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD7Iooo
oAKKKKACiiigAooooAKKKKACiikz82MHGOtAC0UUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFF
FFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUU
UAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFY/ijxR4f8M2jXOu6taWKhdypJIA79vlXq34CuK+Kn
xa07wnfjw9pNsdV8RzMIktclFiZ1BQsxGGzuX5QefUVyFx8LI0H/AAnvxS8S3WoiOHz7uxeNiIS3
SFXVz8qu2AFAH4VtCltzdRmtb/tBaBqmow6T4e8Pa3f6jcSCOCNkjVST3JV2IGevHA5r2SIuYlMo
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
28e3K55yTnnFXG/Zy8PmEquv6kHPIbYm3P0xyPxr2+ih4io+oczPGbH9njwtG6teatqlyAQSqlEB
wO/BPX3/AMa6vw38JfBGhEtBprXLk533Mm8j0x0HFd3RUOtN7sLsp6Xpem6XB5OnWNvaR4AIijC5
wMc46n3NXKKKzbuIKKO/WigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAMfxuCfB2sA
MUP2KXBHb5DXz3+yufM+JV8xYkppMq8/9doulfQ/i8ovhTVjIxVfsU2SBnHyHtXzz+yoQfiRqXyg
f8SuXHr/AK6Kuyl/AkOPU+m6848O3V14x+KF5rMdxNFovht5LG2jAGy4uSGWV89wAwA/A+tbnxX8
RQ+G/A2pXX2lob2eB7ewCDLvcOpCBR3OSDUnwt0VdB8BaTZGAw3L2yT3gYfMZ3UNIW99xI/CudLl
hfuI6eiiiswCiiigAooooAKKKKACiiigAooo5z7UAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFF
FABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBleMWCeE9WY5wLOU/c3fwHtg5+mK+ef2VVUfE
bUHY5ZtLlA9P9dF/hX0V4ngF14b1O2JwJbSVOnqhr5E+GHi4+DPFkt9DYzX9zPaSWttbwLlpJGYb
eOuMr2ya7aKboySKj1PbdTtbjx/8b47ZmQaN4MljmLxPzLcOFcKeuQGTBwBjB5r1+ub+Gnh2fwv4
QtNLvblbu/y815cD/lpK7l2PPYFsD6V0lcs5XemyEwoooqBBRRRQAUUUUAFFFFABRRRQAUUUUAFF
FFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAjqr
oyMAVYYIPcV4d8Bfhe2na5f+K/EFmVuEnkhsLeZFZQu5SJwcnBJyB6DJ7ivcqKuNRxi4rqNOwUUU
VAgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKK
ACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==
------=_NextPart_01C5C92E.038A48C0
Content-Location: file:///C:/ECB422F3/STLDEVWEB-CascadingStyleSheets_files/slide0014_image012.gif
Content-Transfer-Encoding: base64
Content-Type: image/gif
R0lGODlhRwHFAHcAMSH+GlNvZnR3YXJlOiBNaWNyb3NvZnQgT2ZmaWNlACH5BAEAAAAALB8AHQAJ
AXsAhwAAAAAAAAAAMwAAZgAAmQAAzAAA/wAzAAAzMwAzZgAzmQAzzAAz/wBmAABmMwBmZgBmmQBm
zABm/wCZAACZMwCZZgCZmQCZzACZ/wDMAADMMwDMZgDMmQDMzADM/wD/AAD/MwD/ZgD/mQD/zAD/
/zMAADMAMzMAZjMAmTMAzDMA/zMzADMzMzMzZjMzmTMzzDMz/zNmADNmMzNmZjNmmTNmzDNm/zOZ
ADOZMzOZZjOZmTOZzDOZ/zPMADPMMzPMZjPMmTPMzDPM/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYA
M2YAZmYAmWYAzGYA/2YzAGYzM2YzZmYzmWYzzGYz/2ZmAGZmM2ZmZmZmmWZmzGZm/2aZAGaZM2aZ
ZmaZmWaZzGaZ/2bMAGbMM2bMZmbMmWbMzGbM/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkA
mZkAzJkA/5kzAJkzM5kzZpkzmZkzzJkz/5lmAJlmM5lmZplmmZlmzJlm/5mZAJmZM5mZZpmZmZmZ
zJmZ/5nMAJnMM5nMZpnMmZnMzJnM/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA
/8wzAMwzM8wzZswzmcwzzMwz/8xmAMxmM8xmZsxmmcxmzMxm/8yZAMyZM8yZZsyZmcyZzMyZ/8zM
AMzMM8zMZszMmczMzMzM/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8zAP8z
M/8zZv8zmf8zzP8z//9mAP9mM/9mZv9mmf9mzP9m//+ZAP+ZM/+ZZv+Zmf+ZzP+Z///MAP/MM//M
Zv/Mmf/MzP/M////AP//M///Zv//mf//zP///wECAwECAwECAwECAwECAwECAwECAwECAwECAwEC
AwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwEC
AwECAwECAwECAwECAwECAwECAwECAwECAwECAwECAwj/AAEIHEiwoMGDCBMqXMiwocOHECNKnEix
osWLGDNq3MixY8NWrTyKHEmypMmTHUMCGCQIpcuXMGPKvMgSy5WZOHPq3BkRm0qGra7YvMLiJs+j
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
zBiJjapFQKJGkapF7zenlaotNZipegNgDREQADs=
------=_NextPart_01C5C92E.038A48C0
Content-Location: file:///C:/ECB422F3/STLDEVWEB-CascadingStyleSheets_files/master01.htm
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html; charset="windows-1252"
‹header›
‹date/time›
Click to edit Master text styles
Second level
Third level
Fourth level
Fifth level
‹footer›
‹#›
' + ENDSHOW_MESG + '
![](3D"notes_flag.gif")
No=
tes![](3D"buttons.gif")
