CSS,XSL&XSLT

MaterialPreparedbyEelcoSchatborn

ESA2010/2011AdamBelloum

a.s.z.belloum@uva.nl

Content

•  Previously– XML&XHTML

•  Today– CSS– XSL&XSLT

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%; }

CSSinacJon

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

CSSvalidators

•  CSSTidy•  W3Cvalidators

•  W3schools

•  Acid3

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>

Trytocreatethefollowingpage

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!