CSS,XSL&XSLT

MaterialPreparedbyEelcoSchatborn

ESA2011/2012AdamBelloum

a.s.z.belloum@uva.nl

Content

•  Previously– XML&XHTML

•  Today– CSS– XSL&XSLT

ThebirthofCSS

•  HTMLgrew,moreandmorestylisIccapabiliIes,becamemorecomplextowriteandmaintain

•  consistentsiteappearancedifficultbecauseofdifferentbrowserimplementaIons,alsolackedusercontrol

•  introducingCSS–  9differentstylesheetlanguageswereproposedtotheW3C–  2werechosenasthebasisforCSS,CHSSandSSP–  CSSversion1becomeanofficialW3CRecommenda:oninDecember1996

CSSversionHistory

•  CSS1becomeanofficialW3CRecommendaIoninDecember1996,inmostbrowsersfrom2000onwards

•  CSS2publishedasaW3CRecommendaIoninMay1998,s:llnotfullysupportedinbrowsers

•  CSS2revision1,June2005,fixeserrorsinCSS2,removespoorly‐supportedfeatures,addsfeaturesalreadysupportedinbrowsers

•  CSS3.0currentlyunderdevelopment,CSS3ismodularizedandwillconsistofseveralseparateRecommendaIons

WhyCSS?

•  CSSremovesthepresenta:onaFributesfromthestructureallowingreusability,easeofmaintainability,andaninterchangeablepresentaIonlayer.

•  HTMLwasnevermeanttobeapresentaIonlanguage.ProprietaryvendorshavecreatedtagstoaddpresentaIontostructure.–  <font>–  <b>–  <i>

•  CSSallowsustomakeglobalandinstantaneouschangeseasily.

CascadingStyleSheets(CSS)AnIntroducIonbyChrisPoteet

DefiniIon

•  CascadingStyleSheets(CSS)formthepresenta:onlayeroftheuserinterface.

•  Tellsthebrowseragenthowtheelementistobepresentedtotheuser.

CascadingStyleSheets(CSS)AnIntroducIonbyChrisPoteet

BenefitofCSS

•  Powerfulandflexiblewaytospecifytheforma`ngofHTMLelements

•  ShareStyleSheetsacrossmul:pledocumentsorenIreWebSite

•  Canspecifyaclassdefini:onforastyleeffecIvelydefiningnewHTMLelements

•  Rulesareappliedinahierarchicalmanner(precedencerules)

hap://www.techrepublic.com/arIcle/css‐101‐handling‐mulIple‐rules‐for‐the‐same‐element/6164216

TheCascade

•  ThepowerofCSSisfoundinthe“cascade”whichisthecombina:onofthebrowser’sdefaultstyles,externalstylesheets,embedded,inline,andevenuser‐definedstyles.

•  ThecascadesetsprioriIesontheindividualstyleswhicheffectsinheritance.

CascadingStyleSheets(CSS)AnIntroducIonbyChrisPoteet

CSSInheritance

•  Allowselementsto“inherit”stylesfromparentelements.

•  HelpfulinreducingtheamountofCSStosetstylesforchildelements.

•  Unlessamorespecificstyleissetonachildelement,theelementlookstotheparentelementforitsstyles.

CascadingStyleSheets(CSS)AnIntroducIonbyChrisPoteet

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)AnIntroducIonbyChrisPoteet

CSSinacIon

Cascadingstyles

•  thesitedesignerhasmorecontrolonthestyle•  moreeasilymaintained

•  adocumentstylecanbeinfluencedbymulIplestylesheets

•  sheetcaninheritor“cascade"fromanother

CascadingStyleSheets(CSS)

•  astylesheetlanguageusedtodescribethepresenta:onofadocumentwriaeninamarkuplanguagetostylewebpageswriaeninHTMLandXHTML

•  canalsobeappliedtoanyXMLdocument(SVG,XUL)

•  separa:onofcontentandpresenta:on Selector {property: value; property: value; property: value;}

Example p {fontfamily: Arial, sansserif; color: #0000FF; fontsize: 120%; }

MulIpleaaributes

YoucanprovidemulIpleaFributestoaselector:

p { font-weight: bold; color: yellow;

background-color: black; }

Grouping

YoucanspecifyargumentsformulIpleselectors

Exampleh1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; }

isequivalentto:h1,h2,h3 { color: yellow; }

Selectors

SelectorsarepaFernsusedtomatchelementsinthedocumenttree.

•  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

ExamplereducetheverIcalspaceseparaInganh1andanimmediatelyFollowingh2

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•  AFributeselectors

matchelementsbyaFributesdefinedinthesourcedocument

•  classselectorsanalternaIvenotaIonwhenmatchingonthe`class'aaribute

•  IDselectorsmatchelementsbyID

•  PseudoclassesclassifyelementsoncharacterisIcsotherthantheirname,aaributesorcontent

•  PseudoelementsmatchabstracIonsinthedocumenttreebeyondthosespecifiedbythedocument

language

Aaributeselectors

•  E[foo] MatchesanyEelementwiththe"foo”aFributeset(whateverthevalue)

•  E[foo="warning"] MatchesanyEelementwhose"foo”aFributevalueisexactlyequalto"warning"

•  E[foo~="warning"] MatchesanyEelementwhose"foo”aFributevalueisalistofspace‐separatedvalues,oneofwhichisexactlyequalto"warning"

•  E[lang|="en"] MatchesanyEelementwhose"lang”aFributehasahyphen‐separatedlistofvaluesbeginning(fromthelex)with"en"

hap://www.w3.org/TR/CSS2/selector.html

DefiningStyleClasses

•  TodefineanelementStyleclassproceedthehtmlelementbyaperiodandclassname//defineandabstractparagraphtype

P.abstract { margin-left: 0.5in; margin-right: 0.5in; font-style:italic }

•  TousesupplythenameofthestyleclassintheCLASSaFributeintheHTMLelement

<H1> New Advances in Physics </H1> <P CLASS=“abstract”> Text </P>

Classselectors

•  usedwithHTML•  Authorsusethedot(.)notaIonwhenmatchingonthe

“class”aaribute•  theaaributevaluemustimmediatelyfollowthe.

ExampleThefollowingassignsstyleonlytoH1elementswithclass"sne":

H1.sne { color: red } /* H1[class~=sne] */

resultsin:

<H1>Not red</H1> <H1 class="sne">Very red</H1>

IDselectors

•  documentlanguagesmaycontainaFributesthatareoftypeID.

•  notwoIDaaributescanhavethesamevalue;whateverthedocumentlanguage

•  anIDaFributecanbeusedtouniquelyidenIfyitselementinHTMLallIDaaributesarenamed`id’

•  XMLapplicaIonsmaynameIDaaributesdifferently

Example

H1#chapter1 { text-align: center }

<H1 id=“chapter1”> …

CSSSelectors

•  IdenIfierorclass?What’sthedifference?– Aniden:fierisspecifiedonlyonceonapageandhasahigherinheritancespecificitythanaclass.

– AclassisreusableasmanyImesasneededinapage.

CascadingStyleSheets(CSS)AnIntroducIonbyChrisPoteet

Pseudoclasses(1)

•  topermitforma`ngbasedoninforma:onthatliesoutsidethedocumenttree

•  donotappearinthedocumentsourceordocumenttree.

•  mayonlyappearaxerthesubjectoftheselector.

•  areallowedanywhereinselectors•  namesarecase‐insensi:ve.

Pseudoclasses(2)•  E:first-child

matcheselementEwhenEisthefirstchildofitsparent•  E:link

matcheselement(hyperlink)Eifitisnotyetvisited•  E:visited

matcheselement(hyperlink)Eifitisalreadyvisited•  E:active

matchesEduringcertainuseracIons•  E:hover

matchesEduringcertainuseracIons•  E:focus

matchesEduringcertainuseracIons•  E:lang(|="en")

matchesanyEelementwhose"lang” aaributehasahyphen‐separatedlistofvaluesbeginningwith"en”.

Pseudoelements(3)

•  E:first-line thefirstformaaedlineofaparagraph

•  E:first-letter maybeusedfor"iniIalcaps"and"dropcaps"

•  E:beforecanbeusedtoinsertgeneratedcontentbeforeanelement'scontent

•  E:aftercanbeusedtoinsertgeneratedcontentaxeranelement'scontent

Charactersets

Encodingofcharacters•  ASCII•  UTF‐8•  iso‐8859‐1

•  @charsetdirecIveattheverytopofyourexternalCSSfile @charset"ISO‐8859‐1";

CSSCommonmistakes

•  youshouldn'tembedCSSintoyourHTMLdocuments

•  useexternalCSSfile(s)andinclude•  usenamestospecifyabstractproper:es,

notliteral:use.highlight,not.brightred

CSSvalidators

•  CSSTidy•  W3Cvalidators

•  W3schools

•  Acid3

CSSExamplesandResources

ZenCSSGardenhap://www.csszengarden.com/

hap://www.brucelawson.co.uk/2004/zengarden/

•  Othershap://www.cssplay.co.uk/menu/amazinghap://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)

hap://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>

hap://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;

}

hap://www.youtube.com/watch?v=H3KESBQTD8k&feature=channel

ExtensibleStylesheetLanguage(XSL)

•  familyoftransformaIonlanguages(XSLT, XSL-FO, XPath)

•  datadriven•  useittodescribehowtoformatortransformfilesencoded

inXML•  XSLusesvalidXMLsyntax•  canproduceHTML,plain‐text,orPDFamongothers

Example<xsl:if test="@author='Jones'"> Hello Mrs. Jones! </xsl:if>

XSLTransformaIons(XSLT)

•  XML‐basedlanguage•  transforma:onofXMLdocumentsintootherXMLor"human‐readable"documents

•  usestemplateruleprocessing,basedonmatching•  manyimplementaIonsavailable•  browserssupporIngtransformaIonofXMLtoHTMLthroughXSLT–  InternetExplorer(MSXMLengine)–  Firefox,Mozilla,andNetscape(TransforMiiXengine)–  Opera(naIveengine)–  ...

History•  XSLT1.0

–  developedbytheWorldWideWebConsorIum(W3C)–  OriginallypartoftheXSLdevelopmenteffort(1998‐1999)–  XSLT1.0waspublishedasaRecommendaIonbytheW3Con16November1999

•  XSLT2.0–  builtin2002‐2006–  basedonricherdatamodelandtypesystembasedonXMLSchema

–  reachedW3CrecommendaIonstatuson23January2007

•  XSLT1.0issIllmorewidelyusedandimplementedhowever

TemplatesifatemplateismatchedusingapaFern,theruleapplies

ExampleXML source <person>

<name>Eelco</name> </person> <person> <name>Jaap</name> </person>

Example XSLT template <xsl:template match="person"> <li> <xsl:value-of select="name"/> </li> </xsl:template>

Output <li> Eelco </li>

<li> Jaap </li>

Example XSLT template <xsl:template match="person"> <li> <xsl:value-of select="name"/> </li> </xsl:template>

XSLTelementsVariouselementsusage: <xsl:element attributes/options />

•  condiIonal if, choose, otherwise, when,...

•  iteraIon for-each,...

•  template apply-template, call-template, template,...

•  node value-of, copy, copy-of, sort,...

•  aaribute 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> <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– hap://www‐scf.usc.edu/~csci571/Special/xsl_examples.html

Others– Wikipedia

– hap://www.w3schools.com/xsl/– hap://www.w3.org/TR/xslt– hap://en.wikipedia.org/wiki/XSLT_elements

Assignment

•  UseyourXMLdatafromthelastassignment•  writeanXSLTstylesheetthattransformsyourXMLdatatovalidXHTMLstrict,whichcanbeviewedfromwithinabrowser–  thenwriteaCSSstylesheetfortheXHTMLoutputthatatleastdefinescolorsforeachcharacterisIcinyourdata,andmakesthesechangeonmouse‐over

•  Note–  allXHTML,XSLTandCSSmustvalidate(showthisinyourlog)

–  uploadyourfilestothewiki,notethatyoucanalsousethe<code>tagwithcoloring!