Transcription
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Table of Contents All Slides Link List Examples CSCI slides/20070220/handout.htmlQuick Reference CardsCascading Style Sheets (CSS)From refcards.com:XHTMLXHTML 1.0 StrictXHTML 1.0 TransitionalCSSCSS Level 1CSS Level 2February 20, 2007Harvard UniversityDivision of Continuing EducationExtension SchoolCourse Web Site: http://cscie12.dce.harvard.edu/Copyright 1998-2007 David P. HeitmeyerInstructor email: david heitmeyer@harvard.eduCourse staff email: cscie12@fas.harvard.edu1 of 832/20/2007 7:58 PM2 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Server Side Includes (SSI) /slides/20070220/handout.htmlTypical SSI Use CasesA simple way of dynamically including content in XHTML/HTML documents.1.2.3.4.include other documents (use the virtual parameter)echo document and/or server informationCommon pages headerFrequently changing contentCommon navigationCommon footer with document informationSSI statements look like XHTML comments, except with a "#"1. !--#include virtual "footer.shtml" -- Apache processes files for SSI statements based upon file extension. Default behavior on minervais to parse files ending in .shtmlFooter:Page for PRISE website with SSI:3 of 832/20/2007 7:58 PM4 of 832/20/2007 7:58 PM
Cascading Style Sheets ndout.htmlCascading Style Sheets (CSS) !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" xml:lang "en" lang "en" head meta http-equiv "content-type" content "text/html; charset utf-8" / title PRISE: About PRISE /title link rel "stylesheet" href "prise.css" type "text/css" / /head body id "about" div id "container" div id "logobanner" !--#include virtual "banner.html" -- /div div id "content" !--#include virtual "leftmenu.html" -- div id "main" div id "notices" !--#include virtual "notices.html" -- /div h2 About PRISE /h2 !--begin content-- p The May 2005 Report . /p p For more information . /p !--end content-- div class "footer" !--#include virtual "footer.shtml" -- /div /div /div /div /body /html es/20070220/handout.htmlIroquois ConstitutionIroquois ConstitutionIroquois Constitution Zip File containing XHTML, CSS, and "Include" files.FooterContents of footer.shtml contains SSI commands:Example 4.1Example 4.1 Source:1.2.3.4.5.6.7. div class "footer" !--#config timefmt "%B %e, %Y"-- Last updated: !--#echo var "LAST MODIFIED" -- Images: a href "http://www.freeimages.co.uk" www.freeimages.co.uk /a br/ Location: http:// !--#echo var "SERVER NAME"-- !--#echo var "DOCUMENT URI"-- /div Example 4.1 Demonstrated5 of 832/20/2007 7:58 PM6 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlPros and ConsProsConsEasy to useWidespread server supportfor SSIServer-side; notbrowser-dependentLess resource intensivethan CGISimple, yet powerful.Used appropriately, virtually none.Limiting (compared to other, more complex andfull-featured mechanisms to produce dynamic content)Apache SSI DocumentationApache Tutorial: Introduction to Server Side IncludesApache module mod 8.19.7 of 83 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 -strict.dtd" html xmlns "http://www.w3.org/1999/xhtml" head title The Great Binding Law, Gayanashagowa (Constitution of the Iroquois Nations) /titl link rel "stylesheet" type "text/css" href "style.css" / /head body div id "header" !--#include file "header.inc"-- /div div id "navigation" !--#include file "nav.inc"-- /div div id "main" !--#include file "1.inc"-- /div /body /html 2/20/2007 7:58 PM8 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Cascading Style Sheets /slides/20070220/handout.htmlThe Power of StylesheetsUnited States Constitution (no external stylesheet)XHTML for Structure; CSS for PresentationXHTML for MarkupCSS for style and presentationMarkup and PresentationIntertwinedSymptomsproprietary HTML extensionsmaking text into imagesproliferate use of "spacer" 1px by 1pxGIF imagesdeprecated HTML elements and/orattributesusing tables for layoutSeparatedAllows structure and presentation to beseparate.Allows greater control over presentation thanXHTML/HTML alone.Improves accessibility.Simplifies XHTML/HTML markup, both in termof structure and sizeImproves accessibility.Simple yet powerful.W3C Core Styles applied to the US Constitution.Chocolate StylesheetMidnight StylesheetModernist StylesheetOldstyle StylesheetSteely StylesheetSwiss StylesheetTraditional StylesheetUltramarine StylesheetConsequencesChanging design can be a majorhassleHTML/XHTML very complex; caneasily lead to errorsUnnecessary content constraints9 of 832/20/2007 7:58 PM10 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlHarvard College AdmissionsHarvard College AdmissionsWith CSS disabled:HeadingsHeading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remainheadings in markup and CSS can style them as desired.11 of 832/20/2007 7:58 PM12 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets cie12/slides/20070220/handout.htmlDepartment of African and African American StudiesLists combined with CSS are very powerful. Lists can remain lists in markup (navigation, contentitems, etc.) and CSS can style them as desired.Department of African and African American StudiesWith CSS disabled:13 of 832/20/2007 7:58 PM14 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlDesigning with Stylesheets: CSS Zen Gardencss Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplishedvisually through CSS-based desgin.15 of 832/20/2007 7:58 PM16 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlCSS Recommendations from the W3CCSS 1(Dec 1996; Revised Jan 1999)CSS 2(May 1998)CSS 2.1(Februray 2004)CSS Current Workhttp://www.w3.org/Style/CSS/current-work(CSS Mobile Profile, Print Profile, TV Profile, CSS3)CSS ValidatorW3C CSS Validation Servicehttp://jigsaw.w3.org/css-validator/17 of 832/20/2007 7:58 PM18 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlstyle attributestyle elementExample 4.2Example 4.3Example 4.2 Source:Example 4.3 Source:1.2.3.4.5. p style "color: black; background-color: teal; padding: 1em; font-family: helvetica, saLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce veliInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallisante sit amet urna. Maecenas condimentum hendrerit turpis. /p 1.2.3.4. p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nefacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce veliInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallissit amet urna. Maecenas condimentum hendrerit turpis. /p In style element ( style type "text/css" ) within head element:Example 4.2 Rendered:1.2.3.4.5.6.7.8.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit.Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nullaconvallis ante sit amet urna. Maecenas condimentum hendrerit turpis.p {color: black;background-color: teal;padding: 1em;font-family: helvetica, sans-serif;text-align: justify;margin: 2em;}Example 4.3 Rendered:With StylesWithout StylesSo the full page looks like:view 19.20.21.22.23.19 of 832/20/2007 7:58 PM20 of 83print? html xmlns "http://www.w3.org/1999/xhtml" head title CSCIE-12, Example: 4.3 /title style type "text/css" p {color: black;background-color: teal;padding: 1em;font-family: helvetica, sans-serif;text-align: justify;margin: 2em;} /style /head body p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcifacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. FusceInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convalsit amet urna. Maecenas condimentum hendrerit turpis. /p /body /html 2/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)link elementAnatomy of a CSS RuleThe link element can reference an external stylesheet.Example 4.5Example 4.5 Source:Example 4.41.2.3.4.Example 4.4 Source:1.2.3.4. p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nefacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce veliInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallissit amet urna. Maecenas condimentum hendrerit turpis. /p 1.2.3.4.p {color: black;background-color: teal;padding: 1em;font-family: helvetica, sans-serif;text-align: justify;margin: 2em;p {color: red;background-color: blue;}Example 4.5 Rendered:With StylesWithout Styles}In head element:1. p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nefacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce veliInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallissit amet urna. Maecenas condimentum hendrerit turpis. /p In style element ( style type "text/css" ) within head element:In mlCSS Rule link rel "stylesheet" type "text/css" href "example4.css"/ Example 4.4 Rendered:With StylesWithout StylesThe full source:view plain1.2.3.4.5.6.7.8.9.10.11.12.13.14.21 of 83print? html xmlns "http://www.w3.org/1999/xhtml" head title CSCIE-12, Example: 4.4 /title link href "example4.css" type "text/css" rel "stylesheet"/ /head body p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallsit amet urna. Maecenas condimentum hendrerit turpis. /p /body /html 2/20/2007 7:58 PMSelector and Declarations22 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlCombining RulesRules can be combined. The following two sets of style rules would produce identical results.Rules can be listed separately:1.2.3.4.5.6.pppppp{color: black;}{background-color: teal;}{padding: 1em;}{margin: 1em;}{font-family: helvetica, sans-serif;}{text-align: justify;}Or, rules can be grouped. Property:Value pairs need to be sepa rated by a semicolon.1.2.3.4.5.6.7.8.Properties and Values23 of 832/20/2007 7:58 PM24 of 83p {color: black;background-color: teal;padding: 1em;margin: 1em;font-family: helvetica, sans-serif;text-align: justify;}2/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Combining Selectorsclass selectorsThe class and id attributes of XHTML elements can be used in conjunction with styles.Selectors can be combined into comma-separated ts/cscie12/slides/20070220/handout.htmlClass names are referenced in CSS as .classname, and may or may not have an element namepreceding the period ( .classname or element.classname.}}}}}}Likewise, id names are referenced in CSS as #idref, and may or may not have an element namepreceding the period ( #idref or element#idref.Example 4.6We combine the selectors so that a single declaration applies to multiple selectors.1.Example 4.6 Source:h1, h2, h3, h4, h5, h6 { color: maroon; }1.2.3.4.5.6.7.8.9.10.11.12.13.14. div Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcinec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. /div div class "withstyle" Fusce velit. Integer sapien enim, rhoncus vitae, cursus non,commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentumhendrerit turpis. /div div class "warn" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enimvelit at orci. /div div Lorem ipsum dolor sit amet, span class "warn" consectetuer adipiscing elit /span . Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. /div div id "legalese" Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enimvelit at orci. /div In style element ( style type "text/css" ) within head lor: white;color: black;font-family: times;margin: 0.5em;padding: 0.5em;}div.withstyle{background-color: olive;color: navy;font-family: sans-serif;margin: 0.5em;padding: 0.5em;}.warn{background-color: yellow;color: red;font-weight: bold;}#legalese{color: #cccccc;font-size: 0.6em;}Example 4.6 Rendered:25 of 832/20/2007 7:58 PM26 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlWith StylesWithout Stylesid selectorsExample 4.7Example 4.7 Source:1.2.3.4.5.6.7.8.9. div id "header" put in header information here /div div id "main" !-- main content -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enimvelit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodovitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. /div div id "footer" put in footer information here /div In style element ( style type "text/css" ) within head element:1.2.3.4.5.6.7.#main {background-color: blue;color: white;border-color: green;border-width: thick;border-style: solid;}Example 4.7 Rendered:With StylesWithout Styles27 of 832/20/2007 7:58 PM28 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Contextual SelectorsPropertiesCSS Level 1 lists 53 properties that let you style properties of:Example 4.8Example 4.8 textboxes (border, padding, margins)classification (inline, block, list) div em Emphasized text /em outside of strong li /strong appear "normal". ul li em Emphasized text /em within strong li /strong have a differentstyle. /li /ul /div CSS Level 2.1 lists 105 properties.In style element ( style type "text/css" ) within head element:1.li em { color: red; background-color: navy;}Example 4.8 Rendered:With StylesWithout Styles29 of 832/20/2007 7:58 PM30 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets tion and ImplementationsProperties are typically inherited by children elements.Example 4.9Example 4.9 Source:1.2.3. div Lorem ipsum dolor sit amet, em consectetuer adipiscing elit /em . Cras sollicitudin, or p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necIn style element ( style type "text/css" ) within head element:1.2.3.body { color: navy; }em { color: red; }div { color: green; }Example 4.9 Rendered:CSS Browser SupportWith StylesWithout Styles31 of 832/20/2007 7:58 PM32 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)Importing scie12/slides/20070220/handout.htmlSample "UA" default stylesheets for HTML 2.0 and HTML 4.0Stylesheets can be imported. This is useful to reduce redundan cy.Take a look at the sample default stylesheets for HTML 2.0 and HTML 4.0 listed in theAppendices of the CSS1 and CSS2 Recommendations.Example 4.10Sample style sheet for HTML 2.0 [Local copy]Default style sheet for HTML 4.0 [Local copy]Example 4.10 Source:1.2.3. div Now we have the best of both worlds. /div I have the styles from the main course site, and sHTML 4 Sample default CSSIn style element ( style type "text/css" ) within head 18.19.20.21.22.23.24.25.26./* import main style sheet */@import .elementcontent, .element {margin-left: 1em;}.bracket {font-weight: bold;}.ename {color: blue;}.attr {color: red;}.attrv {color: green;}.pcdata {color: black;}.source {background-color: #eeeeee;border-size: 1pt;border-style: solid;padding: 0.5em;}Example 4.10 Rendered:With StylesWithout Styles33 of 832/20/2007 7:58 PM34 of 832/20/2007 7:58 PM
Cascading Style Sheets (CSS)35 of cscie12/slides/20070220/handout.htmlCascading Style Sheets (CSS)html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre{ display: block }li{ display: list-item }head{ display: none }table{ display: table }tr{ display: table-row }thead{ display: table-header-group }tbody{ display: table-row-group }tfoot{ display: table-footer-group }col{ display: table-column }colgroup{ display: table-column-group }td, th{ display: table-cell; }caption{ display: table-caption }th{ font-weight: bolder; text-align: center }caption{ text-align: center }body{ margin: 8px; line-height: 1.12 }h1{ font-size: 2em; margin: .67em 0 }h2{ font-size: 1.5em; margin: .75em 0 }h3{ font-size: 1.17em; margin: .83em 0 }h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu{ margin: 1.12em 0 }h5{ font-size: .83em; margin: 1.5em 0 }h6{ font-size: .75em; margin: 1.67em 0 }h1, h2, h3, h4,h5, h6, b,strong{ font-weight: bolder }blockquote{ margin-left: 40px; margin-right: 40px }i, cite, em,var, address{ font-style: italic }pre, tt, code,kbd, samp{ font-family: monospace }pre{ white-space: pre }button, textarea,input, object,select{ display:inline-block; }big{ font-size: 1.17em }small, sub, sup { font-size: .83em }sub{ vertical-align: sub }sup{ vertical-align: super }table{ border-spacing: 2px; }thead, tbody,tfoot{ vertical-align: middle }td, th{ vertical-align: inherit }s, strike, del { text-decoration: line-through }hr{ border: 1px inset }ol, ul, dir,menu, dd{ margin-left: 40px }ol{ list-style-type: decimal }ol ul, ul ol,ul ul, ol ol{ margin-top: 0; margin-bottom: 0 }u, ins{ text-decoration: underline }br:before{ content: "\A" }:before, :after { white-space: pre-line }center{ text-align: center }abbr, acronym{ font-variant: small-caps; letter-spacing: 0.1em }:link, :visited { text-decoration: underline }:focus{ outline: thin dotted invert des/20070220/handout.htmlHTML 2 Sample default 53.54.55.56.57.BODY {margin: 1em;font-family: serif;line-height: 1.1;background: white;color: black;}H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {display: block }B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,IMG, SPAN { display: inline }LI { display: list-item }H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }H5, H6 { margin-top: 1em }H1 { text-align: center }H1, H2, H4, H6 { font-weight: bold }H3, H5 { font-style: italic }H1 { font-size: xx-large }H2 { font-size: x-large }H3 { font-size: large }B, STRONG { font-weight: bolder } /* relative to the parent */I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }PRE, TT, CODE, KBD, SAMP { font-family: monospace }PRE { white-space: pre }ADDRESS { margin-left: 3em }BLOCKQUOTE { margin-left: 3em; margin-right: 3em }UL, DIR { list-style: disc }OL { list-style: decimal }MENU { margin: 0 }LI { margin-left: 3em }/* tight formatting */DT { margin-bottom: 0 }DD { margin-top: 0; margin-left: 3em }HR { border-top: solid }/* 'border-bottom' could also have been used */A:link { color: blue }A:visited { color: red }A:active { color: lime }/* unvisited link *//* visited links *//* active links *//* setting the anchor border around IMG elementsrequires contextual selectors */A:link IMG { border: 2px solid blue }A:visited IMG { border: 2px solid red }A:active IMG { border: 2px solid lime }/* Begin bidirectionality settings (do not change) */BDO[DIR "ltr"] { direction: ltr; unicode-bidi: bidi-override }BDO[DIR "rtl"] { direction: rtl; unicode-bidi: bidi-override }*[DIR "ltr"]{ direction: ltr; unicode-bidi: embed }2/20/2007 7:58 PM36 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)The 12/slides/20070220/handout.htmlfont ightfont-sizefontStylesheet Originauthor's stylesheetreader's stylesheetUA's stylesheetSpecificity of SelectorConcatenate the following:count "id" attributescount "class" attributescount element namesOrderlast occurence has higher specificity37 of 832/20/2007 7:58 PM38 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)font-familyfont-styleExample 4.11Example 4.12Example 4.11 Source:Example 4.12 Source:1.2.3.4.5. div div div div divstyle "font-family:style "font-family:style "font-family:style "font-family:style "font-family:garamond, times, serif;" Garamond, Times, or serif (generic faarial, helvetica, sans-serif;" Arial, Helvetica or sans-serifcourier, monospace;" Courier or monospace (generic family) /difantasy;" Fantasy (generic family) /div cursive;" Cursive (generic family) /div 1.2.3. div style "font-style: normal;" Normal font-style /div div style "font-style: italic;" Italic font-style /div div style "font-style: oblique;" Oblique font-style /div Example 4.12 Rendered:Example 4.11 Rendered:Normal font-styleItalic font-styleOblique font-styleGaramond, Times, or serif (generic family)Arial, Helvetica or sans-serif (generic family)Courier or monospace (generic family)Fantasy (generic family)Cursive (generic family)39 of ides/20070220/handout.html2/20/2007 7:58 PM40 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets (CSS)font-variant and ariantExample 4.15Example 4.15 Source:Example 4.131.2.3.4.5.6.7.8.9.Example 4.13 Source:1.2.3.4. div style "font-variant: small-caps;" This should be rendered in small-caps. div style "font-variant: normal;" Here we revert to "normal". /div /div Example 4.13 Rendered: div style "font-size: 8pt;" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis envelit at orci. /div div style "font-size: 120%;" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis envelit at orci. /div div style "font-size: 1.5em;" Lorem ipsum dolor sit amet, consectetuer adipiscing elitCras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis envelit at orci. /div Example 4.15 Rendered:THIS SHOULD BE RENDERED IN SMALL-CAPS.Here we revert to "normal".Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facili sis vehicula, neque urna porta risus, ut sagittis enim velitat orci.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcinec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.font-weightLorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, utsagittis enim velit at orci.values: normal bold bolder lighter 100 200 300 400 500 600 700 800 900Example 4.14Example 4.14 Source:1.2.3. div font-weight can be used to make things span style "font-weight: bold" bold /span . /div Example 4.14 Rendered:font-weight can be used to make things bold.41 of 832/20/2007 7:58 PM42 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlRelative vs. AbsolutefontAs a general guideline with CSS, relative measurements are better than absolute measurements.In CSS, there are various shorthandproperties; these allow you to define several properties in a single place.RelativeRelative Sizes (to UA settings):xx-small x-small small medium large x-large xx-largeRelative Sizes (to context): larger smallerPercentage (%)"em" unitsLengthAbsolute"pt" sizes (8pt, 10pt, 12pt)[font-style font-variant font-weight ]? font-size[/line-height]? font-familyExample 4.16Example 4.16 Source:1.2.3.4. div Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce veliInteger sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallissit amet urna. Maecenas condimentum hendrerit turpis. /div In style element ( style type "text/css" ) within head element:1.2.3.body {font: normal normal normal 12pt/200% arial, helvetica, sans-serif;}Example 4.16 Rendered:With StylesWithout Styles43 of 832/20/2007 7:58 PM44 of 832/20/2007 7:58 PM
Cascading Style Sheets /slides/20070220/handout.htmlCascading Style Sheets /slides/20070220/handout.htmlturpis.text propertiesLorem ipsum dolor sit amet,consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula,neque urna porta risus, ut sagittisenim velit at orci. Fusce velit. Integersapien enim, rhoncus vitae, cursusnon, commodo vitae, felis. Nullaconvallis ante sit amet urna.Maecenas condimentum indentline-heightExample 4.17Example 4.17 Source:1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17. div style "margin-left: 30%; margin-right: 30%;" p style "text-align: left" Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittisvelit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodovitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. /p p style "text-align: right" Lorem ipsum dolor sit amet, consectetuer adipiscing elitCras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittisvelit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodovitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendreritturpis. /p p style "text-align: justify" Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus,
Feb 20, 2007 · Cascading Style Sheets (CSS) es/20070220/
