DefiniJon
• CascadingStyleSheets(CSS)formthepresenta(onlayeroftheuserinterface.
• Tellsthebrowseragenthowtheelementistobepresentedtotheuser.
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
WhyCSS?
• CSSremovesthepresenta(ona1ributesfromthestructureallowingreusability,easeofmaintainability,andaninterchangeablepresentaJonlayer.
• HTMLwasnevermeanttobeapresentaJonlanguage.ProprietaryvendorshavecreatedtagstoaddpresentaJontostructure.– <font>– <b>– <i>
• CSSallowsustomakeglobalandinstantaneouschangeseasily.
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
BenefitofCSS
• PowerfulandflexiblewaytospecifytheformaXngofHTMLelements
• ShareStyleSheetsacrossmulJpledocumentsorenJreWebSite
• CanspecifyaclassdefiniJonforastyleeffecJvelydefiningnewHTMLelements
• Rulesareappliedinahierarchicalmanner(precedencerules)
TheCascade
• ThepowerofCSSisfoundinthe“cascade”whichisthecombinaJonofthebrowser’sdefaultstyles,externalstylesheets,embedded,inline,andevenuser‐definedstyles.
• ThecascadesetsprioriJesontheindividualstyleswhicheffectsinheritance.
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
CSSInheritance
• Allowselementsto“inherit”stylesfromparentelements.
• HelpfulinreducingtheamountofCSStosetstylesforchildelements.
• Unlessamorespecificstyleissetonachildelement,theelementlookstotheparentelementforitsstyles.
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
UsingStyleSheets
• ExternalStyleSheet<linkhref=“location.css”rel=“stylesheet”type=“text/css”/>
‐ Alsoa“media”descriptor(screen,print,etc)‐ Preferredmethod.
• EmbeddedStyles<styletype=“text/css”>body{}</style>
• InlineStyles<pstyle=“font‐size:12px”>Loremipsum</p>
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
ThebirthofCSS
• HTMLgrew,moreandmorestylisJccapabiliJes,becamemorecomplextowriteandmaintain
• consistentsiteappearancedifficultbecauseofdifferentbrowserimplementaJons,alsolackedusercontrol
• introducingCSS– 9differentstylesheetlanguageswereproposedtotheW3C– 2werechosenasthebasisforCSS,CHSSandSSP– CSSversion1becomeanofficialW3CRecommendaJoninDecember1996
CSSversionHistory
• CSS1becomeanofficialW3CRecommendaJoninDecember1996,inmostbrowsersfrom2000onwards
• CSS2publishedasaW3CRecommendaJoninMay1998,s(llnotfullysupportedinbrowsers
• CSS2revision1,June2005,fixeserrorsinCSS2,removespoorly‐supportedfeatures,addsfeaturesalreadysupportedinbrowsers
• CSS3.0currentlyunderdevelopment,CSS3ismodularizedandwillconsistofseveralseparateRecommendaJons
CascadingStyleSheets(CSS)
• astylesheetlanguageusedtodescribethepresenta(onofadocumentwrijeninamarkuplanguagetostylewebpageswrijeninHTMLandXHTML
• canalsobeappliedtoanyXMLdocument(SVG,XUL)
• separa(onofcontentandpresenta(on Selector {property: value; property: value; property: value;}
Example p {fontfamily: Arial, sansserif; color: #0000FF; fontsize: 120%; }
Cascadingstyles
• thesitedesignerandusercanbothcontrolthestyle
• moreeasilymaintained
• adocumentstylecanbeinfluencedbymulJplestylesheets
• sheetcaninheritor“cascade"fromanother
• designingstylesisnotforthefaintofheart!
MulJpleajributes
YoucanprovidemulJpleajributestoaselector:
p { font-weight: bold; color: yellow;
background-color: black; }
Grouping
YoucanspecifyargumentsformulJpleselectors
Exampleh1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; }
isequivalentto:h1,h2,h3 { color: yellow; }
Selectors
Selectorsarepa1ernsusedtomatchelementsinthedocumenttree.
• Typeselectors’E’ matchesanyEelement
• Descendantselectors’E F’matchesanyFelementthatisadescendantofanE element
• Childselectors‘E > F' matchesanyFelementthatisachildofanelementE
• Adjacentselectors‘E + F' matchesanyFelementimmediatelyprecededbyanelementE
• Universalselector ‘*' matchesanyelement
Typeselectors
• matchesthenameofadocumentlanguageelementtype
• matcheseveryinstanceoftheelementtypeinthedocumenttree
• elementnamesarecase‐sensi(veifthedocumentlanguageis
ExampleH1 { color: red; }
MatchesallH1elementsinthedocumenttree
Descendantselectors
• matchanelementthatisthedescendantofanotherelementinthedocumenttree
ExampleH1 { color: red } EM { color: red } H1 EM { color: blue }
ThethirdrulewillmatchtheEMinthefollowingfragment:<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>
Childselectors
• matchwhenanelementisthechildofsomeelement• descendantandchildselectorscanbemixed
ExampleBODY > P { line-height: 1.3 }
matchesallPelementsthatarechildrenofBODY
ExampleDIV OL>LI P { line-height: 1.3 }
Adjacentselectors
• matchwhenanelementisimmediatelyprecededbysomeelement
ExamplereducetheverJcalspaceseparaJnganH1andanimmediatelyFollowingH2
H1 + H2 { margin-top: -5mm }
Universalselector(`*')
• matchesthenameofanyelementtypeExample
H1 * { color : red }
changesthecolorofalldescendantsofH1
CSSComments
YoucanaddcommentstoCSSsourcefilesbyusingthefamiliar`/*'and`*/'tokens:
/* This is some comment */ p { text-align: right; /* This is another comment */ color: black; font-family: arial }
CSSColors
• W3CStandardColorNamesaqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,andyellow.
• HexadecimalRGBValues#FF0000
• RGBvaluesrgb(255,0,0)
ExamplesEM { color: red } EM { color: rgb(255,0,0) }
Moreselectors• A1ributeselectors
matchelementsbya1ributesdefinedinthesourcedocument
• classselectorsanalternaJvenotaJonwhenmatchingonthe`class'ajribute
• IDselectorsmatchelementsbyID
• PseudoclassesclassifyelementsoncharacterisJcsotherthantheirname,ajributesorcontent
• PseudoelementsmatchabstracJonsinthedocumenttreebeyondthosespecifiedbythedocument
language
Ajributeselectors
• E[foo] MatchesanyEelementwiththe"foo”ajributeset(whateverthevalue)
• E[foo="warning"] MatchesanyEelementwhose"foo”ajributevalueisexactlyequalto"warning"
• E[foo~="warning"] MatchesanyEelementwhose"foo”ajributevalueisalistofspace‐separatedvalues,oneofwhichisexactlyequalto"warning"
• E[lang|="en"] MatchesanyEelementwhose"lang”ajributehasahyphen‐separatedlistofvaluesbeginning(fromthelex)with"en"
hjp://www.w3.org/TR/CSS2/selector.html
DefiningStyleClasses
• TodefineanelementStyleclassproceedthehtmlelementbyaperiodandclassname//defineandabstractparagraphtype
P.abstract { margin-left: 0.5in; margin-right: 0.5in; font-style:italic }
• TousesupplythenameofthestyleclassintheCLASSa1ributeintheHTMLelement
<H1> New Advances in Physics </H1> <P CLASS=“abstract”> Text </P>
Classselectors
• usedwithHTML• Authorsusethedot(.)notaJonwhenmatchingonthe
“class”ajribute• theajributevaluemustimmediatelyfollowthe.
ExampleThefollowingassignsstyleonlytoH1elementswithclass"sne":
H1.sne { color: red } /* H1[class~=sne] */
resultsin:
<H1>Not red</H1> <H1 class="sne">Very red</H1>
IDselectors
• documentlanguagesmaycontaina1ributesthatareoftypeID.
• notwoIDajributescanhavethesamevalue;whateverthedocumentlanguage
• anIDajributecanbeusedtouniquelyidenJfyitselementinHTMLallIDajributesarenamed`id’
• XMLapplicaJonsmaynameIDajributesdifferently
Example
H1#chapter1 { text-align: center }
<H1 id=“chapter1”> …
CSSSelectors
• IdenJfierorclass?What’sthedifference?– Aniden(fierisspecifiedonlyonceonapageandhasahigherinheritancespecificitythanaclass.
– AclassisreusableasmanyJmesasneededinapage.
CascadingStyleSheets(CSS)AnIntroducJonbyChrisPoteet
Pseudoclasses(1)
• topermitformaXngbasedoninforma(onthatliesoutsidethedocumenttree
• donotappearinthedocumentsourceordocumenttree.
• areallowedanywhereinselectors• namesarecase‐insensi(ve.
Pseudoclasses(2)• E:first-child
matcheselementEwhenEisthefirstchildofitsparent• E:link
matcheselement(hyperlink)Eifitisnotyetvisited• E:visited
matcheselement(hyperlink)Eifitisalreadyvisited• E:active
matchesEduringcertainuseracJons• E:hover
matchesEduringcertainuseracJons• E:focus
matchesEduringcertainuseracJons• E:lang(|="en")
matchesanyEelementwhose"lang” ajributehasahyphen‐separatedlistofvaluesbeginningwith"en”.
Pseudoelements(1)
• topermitformaXngbasedoninforma(onthatliesoutsidethedocumenttree
• donotappearinthedocumentsourceordocumenttree.
• mayonlyappearaxerthesubjectoftheselector.
• namesarecase‐insensiJve.
Pseudoelements(2)
• E:first-line thefirstformajedlineofaparagraph
• E:first-letter maybeusedfor"iniJalcaps"and"dropcaps"
• E:beforecanbeusedtoinsertgeneratedcontentbeforeanelement'scontent
• E:aftercanbeusedtoinsertgeneratedcontentaxeranelement'scontent
Charactersets
Encodingvancharacters• ASCII• UTF‐8• iso‐8859‐1
• @charsetdirecJveattheverytopofyourexternalCSSfile @charset"ISO‐8859‐1";
CSSCommonmistakes
• youshouldn'tembedCSSintoyourHTMLdocuments
• useexternalCSSfile(s)andinclude• usenamestospecifyabstractproper(es,
notliteral:use.highlight,not.brightred
CSSExamplesandResources
ZenCSSGardenhjp://www.csszengarden.com/
hjp://www.brucelawson.co.uk/2004/zengarden/
• Othershjp://www.cssplay.co.uk/menu/amazinghjp://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
hjp://www.w3.org/2002/03/csslayout‐howto
<html> <head> </head> <body>
<div id="header">This is my cool Header</div>
<div id="leftnav">This is the leftnav</div>
<div id="rightnav">This is the rightnav</div>
<div id="body">This is the body</div>
<div id="footer">This is the footer</div>
</body> </html>
Someelementsusedtogeneratethepreviouslayout
• width: 900px; • height: 50px; • background-image: url(images/SNELogo.png); • border-bottom: 2px solid #000000; • border-left: 1px dashed #694717; • float: left; • float: right; • background-color: #f8AA3c; • border-left:1px solid #000000; • clear: both;
TheHTMLcode<html> <head> <link href="style.css" rel="stylesheet" type="css/text"> </head> <body> <div id="container"> <div id="header">This is my cool Header</div> <div id="leftnav">This is the leftnav</div> <div id="rightnav">This is the rightnav</div> <div id="body">This is the body</div> <div id="footer">This is the footer</div> </div> </body> </html>
hjp://www.youtube.com/watch?v=H3KESBQTD8k&feature=channel
TheCSScodecontainer {
width: 900px;
}
#header {
width: 800px; height: 50px; background-image: url(images/SNELogo.png); border-bottom: 2px solid #000000;
}
#leftnav {
float: left; width: 140px; height: 400px; background-color: #f8AA3c; border-left:1px solid #000000; }
rightnav {
float: right; width: 140px; height: 400px; background-color: #F8AA3c; border-left: 1px dashed #694717;
}
#body {
width: 620px;
}
#footer {
clear: both; background-color: #D1C0A7;
}
hjp://www.youtube.com/watch?v=H3KESBQTD8k&feature=channel
ExtensibleStylesheetLanguage(XSL)
• familyoftransformaJonlanguages(XSLT, XSL-FO, XPath)
• datadriven• useittodescribehowtoformatortransformfilesencoded
inXML• XSLusesvalidXMLsyntax• canproduceHTML,plain‐text,orPDFamongothers
Example<xsl:if test="@author='Jones'"> Hello Mrs. Jones! </xsl:if>
XSLTransformaJons(XSLT)
• XML‐basedlanguage• transforma(onofXMLdocumentsintootherXMLor"human‐readable"documents
• usestemplateruleprocessing,basedonmatching• manyimplementaJonsavailable• browserssupporJngtransformaJonofXMLtoHTMLthroughXSLT– InternetExplorer(MSXMLengine)– Firefox,Mozilla,andNetscape(TransforMiiXengine)– Opera(naJveengine)– ...
History• XSLT1.0
– developedbytheWorldWideWebConsorJum(W3C)– OriginallypartoftheXSLdevelopmenteffort(1998‐1999)– XSLT1.0waspublishedasaRecommendaJonbytheW3Con16November1999
• XSLT2.0– builtin2002‐2006– basedonricherdatamodelandtypesystembasedonXMLSchema
– reachedW3CrecommendaJonstatuson23January2007
• XSLT1.0issJllmorewidelyusedandimplementedhowever
Templates
ifatemplateismatchedusingapa1ern,theruleapplies
ExampleXML source <person>
<name>Eelco</name> </person> <person> <name>Jaap</name> </person> XSLT <xsl:template match="person"> <li> <xsl:value-of select="name"/> </li> </xsl:template>
Output <li> Eelco </li>
<li> Jaap </li>
XSLTelementsVariouselementsusage: <xsl:element attributes/options />
• condiJonal if, choose, otherwise, when,...
• iteraJon for-each,...
• template apply-template, call-template, template,...
• node value-of, copy, copy-of, sort,...
• ajribute attribute, attribute-set,...
XMLsource
<?xml version="1.0" ?> <persons>
<person username="JS1”> <name>John</name> <family_name>Smith</family_name> </person>
<person username="MI1"> <name>Morka</name> <family_name>Ismincius</family_name> </person>
</persons>
XHTMLOutput<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Testing XML Example</title> </head>
<body> <h1>Persons</h1>
<ul> <li>Ismincius, Morka</li> <li>Smith, John</li> </ul>
</body> </html>
XSLTstylesheet(XMLtoXHTML)(1)<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/
XSL/Transform" version="1.0”> <xsl:template match=“persons">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing XML Example</title> </head> <body> <h1>Persons</h1> <ul> <xsl:apply-templates select="person"> <xsl:sort select="family_name" /> </xsl:apply-templates> </ul> </body> </html>
</xsl:template>
See next page …
XSLTstylesheet(XMLtoXHTML)(2)
<xsl:template match="person"> <li>
<xsl:value-of select="family_name"/>, <xsl:value-of select="name"/> </li>
</xsl:template>
</xsl:stylesheet>
XSLTExamplesandResources
• Examples– hjp://www‐scf.usc.edu/~csci571/Special/xsl_examples.html
Others– Wikipedia
– hjp://www.w3schools.com/xsl/– hjp://www.w3.org/TR/xslt– hjp://en.wikipedia.org/wiki/XSLT_elements
Assignment
• UseyourXMLdatafromthelastassignment• writeanXSLTstylesheetthattransformsyourXMLdatatovalidXHTMLstrict,whichcanbeviewedfromwithinabrowser– thenwriteaCSSstylesheetfortheXHTMLoutputthatatleastdefinescolorsforeachcharacterisJcinyourdata,andmakesthesechangeonmouse‐over
• Note– allXHTML,XSLTandCSSmustvalidate(showthisinyourlog)
– uploadyourfilestothewiki,notethatyoucanalsousethe<code>tagwithcoloring!