Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ......
Transcript of Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ......
![Page 1: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/1.jpg)
Cascad ing S t y l e Shee t s2004 WebGUI Users Conference
![Page 2: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/2.jpg)
Orig in s o f CSS
![Page 3: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/3.jpg)
Why was i t c rea ted ?
• Result of inefficient use of tables.
• Separate content from presentation.
• Standardize web design.
![Page 4: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/4.jpg)
Bene f i t s o f CSS
![Page 5: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/5.jpg)
F lex ib i l i t y
• no need for nested tables means easier maintentance..
• separates style from presentation.
• define the look of your page in one place.
• easily change the look.
![Page 6: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/6.jpg)
F lex ib i l i t y
<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr>
</table>
Classic HTML
![Page 7: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/7.jpg)
F lex ib i l i t y
<table><tr><td class="subtext">this is line 1</td></tr><tr><td class="subtext">this is line 2</td></tr><tr><td class="subtext">this is line 3</td></tr></table>
With CSS
![Page 8: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/8.jpg)
Render ing
• Less tables = faster load times.
• Spacer images are a thing of the past.
• Bandwidth friendly: a single 1k document can control the appearance of an entire site.
![Page 9: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/9.jpg)
Access ib i l i t y
• No nested tables makes it easier for screen readers.
• Can apply different style sheets for different types of presentation. For example, can supply a high contrast style sheet for people with bad vision.
![Page 10: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/10.jpg)
Forward Compat ib l e
• created with the future standards in mind
• removes need for deprecated tags
• works with todays standards (mostly)
![Page 11: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/11.jpg)
S ty l e Shee t Types
![Page 12: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/12.jpg)
3 Opt ions
• Inline
• Embedded
• Linked
![Page 13: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/13.jpg)
I n l i neUse an inline style sheet to modifya single element one time in a page.
<p style=”color: red; font-style: italic;”>Content here...</p>
![Page 14: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/14.jpg)
EmbeddedUse an embedded style sheet tocontrol styles on an entire page.
<style type=”text/css”>p { color: navy; font-weight: bold; font-size: 10px; background-color: white;}</style>
![Page 15: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/15.jpg)
L inked
Use a linked style sheet to control styles on multiple pages.
<link rel=”stylesheet” type=”text/css”href=”stylesheet.css” />
![Page 16: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/16.jpg)
CSS Bas i c s
![Page 17: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/17.jpg)
CSS Ru le s
• Selector: defines the HTML element to which the rule applies.
• Declarations: contains at least one property and value.
Every style contains one or more rules, each rule containing two parts:
selector { property: value;}
![Page 18: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/18.jpg)
CSS Ru le s
Selector Properties
h1 { color: red; font-size: large;}
Values
![Page 19: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/19.jpg)
Clas ses & IDs
![Page 20: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/20.jpg)
Clas s Se l ec tor
Create your own selectors based onclasses or unique names you define.
Class selectors are indicated by a period.
![Page 21: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/21.jpg)
Clas s Se l ec tor
.recipeName { font-family: Arial; color: red;}
CSS CSS Applied
<p class=”recipeName”>Chicken Pasta</p><p class=”recipeName”>Pizza</p>
![Page 22: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/22.jpg)
Clas s Se l ec tor
![Page 23: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/23.jpg)
i d Se l ec tor
Similar to the class it can be set on nearlyany tag and can be used as a CSS selector.
You can only used an id selectoronce on a given page.
![Page 24: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/24.jpg)
i d Se l ec tor
#copyright { font-family: Arial; font-size:15px;}
CSS CSS Applied
<p id=”copyright”>Copyright 2004 YourCompany Here</p>
![Page 25: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/25.jpg)
i d Se l ec tor
![Page 26: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/26.jpg)
<d iv> & <span>
![Page 27: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/27.jpg)
<d iv> & <span>
• <div> is short for division (within a document), and is a container, a block level element that has a variety of uses.
• <span> is an inline element.
• both are generic in nature.
![Page 28: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/28.jpg)
<d iv> & <span>
.tips{ color: black; background-color: #e8e8e8; font-family: Arial;}
#footer{ color: green; background-color: #white; font-family: Times; font-style: italic;}
CSS CSS Applied<span class=”tips”> <p>USEFUL TIPS FOR YOU</p> <ul> <li>Tip 1</li> <li>Tip 2</li> <li>Tip 3</li> <li>Tip 4</li> </ul></span><hr><div id=”footer”>Your Footer Here</div>
![Page 29: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/29.jpg)
<d iv> & <span>
![Page 30: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/30.jpg)
Contro l l i n g Font D i sp l ay
![Page 31: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/31.jpg)
Font - f am i ly
allows you to specify what font you want to display
p { font-family: Arial;}
![Page 32: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/32.jpg)
Font - s t y l e
toggles between normal and italic fonts
p { font-family: Arial; font-style: italic;}
![Page 33: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/33.jpg)
Font - var i an t
this allows you to select between normal and small caps
p { font-family: Arial; font-style: italic; font-variant: small-caps;}
![Page 34: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/34.jpg)
Font -we i gh tprovides a wider range of choices thanthe HTML <b> element. Choose from
norman, bold, lighter, bolder, or a numericalvalue of 100 -900 (in increments of 100).
p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500;}
![Page 35: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/35.jpg)
Font - s i zefrees you from HTML’s font restrictions.
in, mm, cm, pt, pc, px, em, ex, #%
p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500; font-size: 12px;}
![Page 36: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/36.jpg)
Colorchoose color by using color names, hexidecimal values, or RGB values
p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500; font-size: 12px; color: blue;}
![Page 37: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/37.jpg)
Spac ing & A l i gnment
![Page 38: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/38.jpg)
Word-spac ing
specify space between words (default is normal)
h1 { word-spacing: 2px;}
![Page 39: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/39.jpg)
Let ter- spac ing
specify space between letters (default is normal)
h1 { word-spacing: 2px; letter-spacing: 3px;}
![Page 40: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/40.jpg)
Text -decora t ion
add values of underline, overline, line-through, blink (default is none)
h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline;}
![Page 41: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/41.jpg)
Ver t i c a l - a l i gnsimilar to HTML’s valign property.
Values include baseline, sub, super, top, text-top, middle, bottom, text-bottom, and %
h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top;}
![Page 42: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/42.jpg)
Text - t r ans formcapitalize text, or change
text to uppercase or lowercase
h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top; text-transform: capitalize;}
![Page 43: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/43.jpg)
Text - a l i gnsimilar to HTML’s align attribute.
Values include left, right, center, and justify
h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top; text-transform: capitalize; text-align: right;}
![Page 44: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/44.jpg)
Background Proper t i e s
![Page 45: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/45.jpg)
Background-co lor
allows you to set a background colorfor any element.
body { background-color: black;}
![Page 46: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/46.jpg)
Background- image
allows you to set a background imagefor any element.
body { background-color: black; background-image: url(image.gif);}
![Page 47: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/47.jpg)
Background- repea trepeat your image horizontally, vertically,
through the entire page, or not at all.Values are repeat, repeat-x, repeat-y, no-repeat
body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y;}
![Page 48: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/48.jpg)
Background-a t t achmentcontrols the scrolling of your background.
Values are fixed or scroll.
body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed;}
![Page 49: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/49.jpg)
Background-pos i t ionspecifies where an image occurs in an element.
Values are top/center/bottom andleft/center/right.
body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right;}
![Page 50: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/50.jpg)
The Box Mode lmargins
margins
borders
borders
padding
padding
CONTENT
![Page 51: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/51.jpg)
marg in - top ( l e f t ,bo t tom, r i gh t )
specify margins in measurements or percentages
body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right; margin-left: 15px;}
![Page 52: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/52.jpg)
padd ing - top ( l e f t ,bo t tom, r i gh t )similar to cell padding of tables.
You can add padding to any element.
p { padding-top: 15px; padding-left: 15px;}
![Page 53: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/53.jpg)
border
used to draw a border around your element. Border styles include solid, dashed, dotted.
p { padding-top: 15px; padding-left: 15px; border: 2px solid red;}
![Page 54: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/54.jpg)
Resources
![Page 55: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/55.jpg)
Tops ty l e CSS ed i tor
http://www.bradsoft.com
![Page 56: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/56.jpg)
Onl ine Resources
• http://www.alistapart.com
• http://www.meyerweb.com
• http://www.cssvault.com/resources.php
• http://www.mezzoblue.com/zengarden/resources
• http://www.w3.org/Style/CSS
• http://www.simplebits.com/css/publications/tips
• http://www.cssbeauty.com
• many more
![Page 57: Cascading Style Sheets - WebGUI · Cascading Style Sheets 2004 WebGUI Users Conference. ... Flexibility • no need for nested tables means easier maintentance.. • separates style](https://reader036.fdocuments.net/reader036/viewer/2022070716/5edb227980170867277b6f8f/html5/thumbnails/57.jpg)
QUESTIONS