Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
The Web With Style Effectively Using Cascading Style Sheets (CSS) 1 What is in this Presentation An introduction to the technology Some features that make Web design easier Frequently used capabilities Tips and “gotchas” References to take you further 2 What are Style Sheets? A way for web page designers to separate the formatting of a document from the HTML markup A way of centrally managing the styles for an entire web site 3 What are Style Sheets? A way to layout web pages without the use of complex tables and tricks A way for users to take control of how web pages are displayed 4 What are Style Sheets? Database-Driven Web Sites Database-driven web sites require that the content be separated from the style Large sites benefit from a centralized or corporate style that can be applied consistently by anyone (everyone) 5 What are Style Sheets? Documents Style Sheet Documents with Style 6 Quick History CSS1 released in December 1996 CSS2 released in May 1998 Around 50 properties for simple formatting, fonts and colors Additional 70 properties for more advanced features like numbering, cursors, and page breaks Browsers are only now capable of correctly implementing this technology 7 CSS Specifications We use a few key styles in this presentation, the rest can be found at: CSS1 http://www.w3.org/TR/REC-CSS1 CSS2 http://www.w3.org/TR/REC-CSS2 8 Style Anatomy Selector h1 { color: #0000FF; font-size: 24pt; } Property Declarations Value 9 Types of Style Sheets Each has a smaller scope … <html> <head> Embedded Style 1 External Style file .css 2 </head> <body> Inline Style </boby> </html> 3 10 External Style Sheets mystyle.css H1 { color:#FF3355; text-align:center} h2,h3 { color: #22FFCC; font-style: italic} p { font-family:Arial, Helvetica } html code <html> <head> <link rel=stylesheet href=“mystyle.css”> </head> <body> <h1>Heading</h1> <h2>Heading</h2> </body> 11 Embedded Style Sheets Comment tag alerts older browsers to <head> ignore Styles they cannot read <style type=“text/css”> <!-h1 { font-family: Arial, Helvetica, Verdana; color: blue; text-align: center} p { font-family: Arial, Helvetica, sans-serif; font-style: italic; color: red} --> </style> </head> 12 Inline Style Sheets <body > <p style=“font-weight:bold; background-color:blue; text-align:center”> This paragraph will be bold, and centered against a blue background. </p> </body> 13 Calling Style Sheets Linked (in the <HEAD>) Embedded (in the <HEAD>) <link rel=“stylesheet” href=“style.css” type=“text/css”> <style> h1 {color: #FFFFFF;} </style> Inline (in the tag) <p style=“color: #FFFFFF”></p> 14 Cascading Styles A document can have more than one style sheet defined Style declarations ranking Designer User Browser At same rank, last-defined style declaration takes priority 15 CSS Lifesavers Grouping Selectors Classes and IDs <DIV> and <SPAN> Pseudo-elements Contextual Styles 16 Grouping Selectors Instead of H1 { color: #FFFF00; } H2 { color: #FFFF00; } Combine Rules H1, H2 { color: #FFFF00; } 17 Classes and IDs Classes Allow styles for groups of elements CSS: td.navbar { color: blue; } HTML: <td class=“navbar”></td> IDs Allow styles for specific elements CSS: #copyright { color: blue; } HTML: <p id=“copyright”></p> 18 Style Classes <head> <style type=“text/css”> Create your own section names <!-p.norm {font-family: ‘Times New Roman’ ; text-indent: .5in } p.spec {font-family: Arial ; font-style: italic ; text-indent: 1in } --> </style> <body> <p class=“norm”>Normal paragraph</p> Apply them to HTML <p class=“spec”>Special paragraph</p> tags </body> 19 Style Classes <style type=“text/css”> <! - .first {color: red } --> .first is the name of the class </style> <body> <p>Welcome to your <span class=“first”>new home</span></p> </body> 20 DIV and SPAN Tags designed for style sheets DIV Block elements (i.e., P and H1) No blank space, just line break e.g., div.heading1 { font-size: 24pt; } SPAN Inline element (i.e., A and IMG) e.g., span.bold { font-weight: bold; } 21 Pseudo-elements Special-case selectors Anchors Can use pseudo-elements with classes a:link a:visited a:hover a:active e.g., a.navbar:active Other pseudo-elements :first-line, :first-letter 22 Contextual Selectors Allow definition of styles for elements within elements CSS: td.navbar a { color: #FFFFFF; } HTML: <td class=“navbar”> <a href=“url”>text</a> </td> 23 Common CSS Properties CSS Units Fonts Colors Backgrounds Text & Alignment Margins & Padding 24 CSS Units Used for specific heights and lengths CSS supports several length units px – Pixels – screen dots pt – Points – font sizes in, cm – Inches and centimeters % - percent of the current/parent font em – height of current font Pixels vs. Em For easiest/best design control – pixels For best flexibility/accessibility – % or em 25 Fonts font-family Ordered list of font names Quote names with spaces: e.g., “Arial Black” p.arial { font-family: Arial, Helvetica, sans-serif; } font-size larger, smaller, or specific height p.big { font-size: 60px; } 26 Fonts font-style normal or italic p.plain { font-style: normal; } font-weight normal, lighter, bold, or bolder p.bolder { font-weight: bolder; } 27 Colors color: Named Colors: red, blue, green Hex: #FFCC00, #FC0 RGB values: rgb(123, 123, 123) p.green { color: #00FF00; } background-color: color or transparent p.highlight { background-color: #FFCC00; } 28 Backgrounds background-image: none or url(http://imageurl) background-repeat: repeat, repeat-x, repeat-y, no-repeat body { background-image: url(“bg1.gif”); background-repeat: repeat-x; } 29 Text Line-height Normal, number, length, percentage p.wellspaced { line-height: 150%; } Text-align left, right, center, justify p { text-align: justify; } 30 Text Vertical-align top, middle, bottom, sub, super td.heading { vertical-align: top; } Text-decoration none, underline, overline, line-through p.strikeout { text-decoration: line-through; } 31 Margins & Padding Text Text margin padding Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text fro fro fro fro padding margin Margin Text Text Text Text The space between this and other elements margin-top, margin-right, margin-bottom, margin-left Shortcut margin: 5px 10px 5px 10px; Values are in clockwise order 32 Margins & Padding Text Text margin padding Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text fro fro fro fro padding margin Padding The space between the margin and the element padding-top, padding-right, padding-bottom, padding-left Comparable to TABLE’s cell-padding 33 Tips and Gotchas Gosh Darn Browsers Some Tips Degrading Gracefully 34 Gosh Darn Browsers Internet Explorer 4 & 5 Netscape 4 Very stable and complete CSS support 6.0 Browsers? Does some of the basics but really not very good Opera 5 Probably the best mainstream implementation of CSS Netscape and IE 6 both seem to Check CSS Bugs and Workaround site 35 Some Tips Always define a generic font last End font-family declarations with serif, sansserif, cursive, fantasy, or monospace body { font-family: Arial, Helvetica, sansserif; } Define font styles for BODY, P, and TD TDs don’t inherit font sizes, and font settings are sometimes lost after tables body, p, td { font-size: 12pt; } 36 Just Some Tips Use linked style sheets Makes updates easier Your HTML is cleaner Test Different browsers Different platforms 37 Degrading Gracefully Stick to using tables for layout If style sheets are removed, the page should still be readable CSS layout not working 100% correctly yet Use “simple” HTML (e.g., H1 and P) Avoid buggy properties Cause pages to go haywire or look dramatically different in other browsers See “CSS Bugs and Workarounds” 38 Print References Cascading Style Sheets, Second Edition: Designing for the Web by Hakon Wium Lie, Bert Bos, Robert Cailliau Cascading Style Sheets: The Definitive Guide by Eric A. Meyer 39 Online References WebReview.com Style Reference Webmonkey StyleSheet Guide CSS Bugs and Workarounds TopStyle Pro 2.0 http://www.webreview.com/style/ http://www.webmonkey.com/reference/stylesheet_guide/ http://css.nu/pointers/bugs.html http://www.bradsoft.com/topstyle/ 40