cascading style sheets css

XML & CSS, by Dr. Khalil 1

Cascading Style SheetsCSS

Dr. Awad KhalilDr. Awad Khalil

Computer Science DepartmentComputer Science Department

AUCAUC


Content

How to create style sheets HTML/XML How to create style sheets HTML/XML documentsdocuments

How to use CSS with HTMLHow to use CSS with HTMLWhere some of the limitations areWhere some of the limitations areHow you can use CSS to provide very How you can use CSS to provide very

sophisticated effects in your documents for sophisticated effects in your documents for web pages, printed pages, speech engines, and web pages, printed pages, speech engines, and other mediaother media


XML Content/Presentation Paradigm

The Content/Presentation paradigm is one of the The Content/Presentation paradigm is one of the most pervasive patterns in XML.most pervasive patterns in XML.

At its root, the concept means that you separate At its root, the concept means that you separate data from the way that the data is displayed.data from the way that the data is displayed.

The important thing is that by separating the The important thing is that by separating the content – the logical structure – from the content – the logical structure – from the presentation, you can target your message to any presentation, you can target your message to any number of different viewers without having to number of different viewers without having to worry about whether the message gets mangled in worry about whether the message gets mangled in the medium.the medium.


What is a Style?

In essence, a In essence, a style is a set of (mostly) visual is a set of (mostly) visual characteristics that can be applied to an HTML characteristics that can be applied to an HTML (and eventually XML) tag to change the visual (and eventually XML) tag to change the visual appearance of the tag. The style is not an intrinsic appearance of the tag. The style is not an intrinsic part of the structure – we can remove the style part of the structure – we can remove the style and the visual appearance of the element may and the visual appearance of the element may change, but we’re not adding or removing change, but we’re not adding or removing information to/from the document itself, simply information to/from the document itself, simply the the visualization visualization of that information.of that information.


W3C and CSS

The W3C set up a The W3C set up a Style Sheet Working GroupStyle Sheet Working Group to handle to handle the specific problems of building presentation layer the specific problems of building presentation layer architectures. The first CSS spec was created in 1995.architectures. The first CSS spec was created in 1995.

There are in fact two CSS specs at varying levels.There are in fact two CSS specs at varying levels. CSS1 defined the association between specific CSS CSS1 defined the association between specific CSS

property names and their visual appearance.property names and their visual appearance. CSS2, approved in May of 1998, clarified a number of CSS2, approved in May of 1998, clarified a number of

ambiguities from the first specification, and also ambiguities from the first specification, and also incorporated support for sound and non-traditional media.incorporated support for sound and non-traditional media.

Currently, the most recent formal recommendation for Currently, the most recent formal recommendation for CSS is CSS2 Specification CSS is CSS2 Specification (http://www.w3.org/TR/1998/REC-CSS2). (http://www.w3.org/TR/1998/REC-CSS2).


Creating Styles in HTML

A style consists of CSS properties assigned to A style consists of CSS properties assigned to specific values of the form specific values of the form property:value

StylesStyles can be assigned in one of three ways in can be assigned in one of three ways in HTML:HTML: TheThe style style attributeattribute TheThe <STYLE> <STYLE> elementelement An external style sheetAn external style sheet


The style Attribute

In the first case, the style would look much like:In the first case, the style would look much like:

<H1 style=“voice-family:JamesEarlJones;volume:x-loud;”> Welcome To My Site</H1><P style=“voice-family:KellyMcGillis;volume:medium;” This is the aural website, where everything is read to you.</P>

This works well when you only need to assign styles to This works well when you only need to assign styles to change a few elements from their default display, but change a few elements from their default display, but has some serious limitations when applied to the has some serious limitations when applied to the document as a whole.document as a whole.


The <STYLE> Element

The The <STYLE> element allows you to associate a given style with a element allows you to associate a given style with a specific type of element.specific type of element.

For example, the following For example, the following <STYLE> declaration ensures that whenever declaration ensures that whenever an H1 tag is encountered, it’s rendered to speak in its James Earl Jones an H1 tag is encountered, it’s rendered to speak in its James Earl Jones voice, while a paragraph tag will speak with Ms. McGillis’s voice:voice, while a paragraph tag will speak with Ms. McGillis’s voice:

<STYLE> H1 {voice-family:JamesEarlJones;volume:x-loud;} P {voice-family:KellyMcGillis;volume:medium;}</STYLE>

<H1>This will be read as if by James Earl Jones</H1><P>This would be read as if by Kelly MacGillis</P><P>So will this.</P><H2>This won’t be spoken by the language interpreter, as there is no association with a

specific rule here.</H2>


The Style Sheet

The actual CSS style declaration for each type of tag is called a The actual CSS style declaration for each type of tag is called a rule, and the collection of all rules within the , and the collection of all rules within the <STYLE> tag are tag are together known as a together known as a style sheet..

The name of the tag in turn is called the The name of the tag in turn is called the selector for the rule. for the rule.


Cascading Styles

A cascade implies a falling, moving from one level down to the next.A cascade implies a falling, moving from one level down to the next. A style applied to a given step thus also affects everything within the step. In A style applied to a given step thus also affects everything within the step. In

other words a style applies not only to the element that it’s defined on, but also other words a style applies not only to the element that it’s defined on, but also to all children of that element.to all children of that element.

Whenever a style is applied to an element, many of the properties cascade to Whenever a style is applied to an element, many of the properties cascade to all child elements within that element. That is, unless those children all child elements within that element. That is, unless those children specifically override the styles with the same CSS properties in their own specifically override the styles with the same CSS properties in their own styles.styles.


Example: Showing Cascades(showcascades.html)

<HTML><HEAD><TITLE>Showing Cascades</TITLE></HEAD><BODY><H1>Showing Cascades</H1><DIV style="background-color:red;color:white;"> This text will be shown with white text on a red background. <DIV>So will this text, which is in a DIV contained in the first.</DIV> <DIV style="background-color:blue;"> This text has a blue background, and inherits (or cascades) the white text. <DIV style="color:black;"> Meanwhile, this inherits the blue background, from the most immediate parent element, but sets the text color to black. </DIV> </DIV> This text is back to red on white, because it inherits the topmost style.</DIV><DIV> This has no styles associated with it, so should appear as black on white (or gray, if viewed in certain Netscape browsers)</DIV></BODY></HTML>


Overriding Styles with Style Element

<STYLE>

<!– This defines the DIV style -->

DIV {background-color:red;”}

</STYLE>

<DIV>This may look like it will be red, but in fact will be blue</DIV>

<STYLE>

<!– This REdefines the DIV style -->

DIV {background-color:blue;”}

</STYLE>

<DIV>This will also be blue, of course</DIV>

Style sheets contained in Style sheets contained in <STYLE> elements do not <STYLE> elements do not cascade.cascade.

If we declare a given rule for a If we declare a given rule for a specific selector (such as the specific selector (such as the DIV element) in one style DIV element) in one style sheet, then declare a different sheet, then declare a different rule for the same selector, the rule for the same selector, the last rule declared will be the last rule declared will be the one used for the page – even if one used for the page – even if there were DIVs between the there were DIVs between the first and second <STYLE> first and second <STYLE> sectionssections


A Class Act in HTML

Suppose that we had a need Suppose that we had a need for three different kinds of for three different kinds of notes within a document:notes within a document: A tip note (in which the A tip note (in which the

background color is background color is yellow).yellow).

A note that indicated A note that indicated some kind of resource some kind of resource (with a green (with a green background).background).

A warning (in red).A warning (in red). The way to do this is by The way to do this is by

defining a defining a Class attribute attribute for each kind of note.for each kind of note.

<STYLE>

.tip {background-color:yellow;}

.resource {background-color:green;}

.warning {background-color:red;}

</STYLE>

------------------------------------------------------------------------<DIV class=“tip”>This is a tip.</DIV>

<DIV class=“resource”>This is a resource.</DIV>

<DIV class=“warning”>This is a warning</DIV>


A Class Act in HTML (Cont’d)

It’s also possible to It’s also possible to apply two classes to a apply two classes to a single tag single tag simultaneously, by simultaneously, by separating each class separating each class from the next with a from the next with a space character.space character.

<STYLE> .note {margin-left:-.5in;

width:250;border:solid 3px black;position:relative;background-color:lightblue;}

.tip {background-color:yellow;} .resource {background-color:green;} .warning {background-color:red;}</STYLE>--------------------------------------------------------<BODY> <P>This is some text</P> <DIV class=“note warning”> This will display as a warning type note. </DIV></BODY>


Making Class Selectors (classselectors.html)

<HTML><HEAD><TITLE>Making Class Selectors</TITLE></HEAD><H1>Making Class Selectors</H1><STYLE> P.note {margin-left:-.05in;width:250;border:solid 3px black; position:relative;background-color:lightblue;} LI.note {border:inset 3px gray;background-color:cyan;} .tip {background-color:yellow;border:inset 2px yellow;margin-bottom:.2in;} .resource {background-color:green;border:inset 2px green; margin-bottom:.2in; color:white;} .warning {background-color:red;border:inset 2px red;margin-bottom:.2in;}</STYLE><BODY> <P class="note">This text will appear as a light blue box with black borders.</P> <UL> <LI class="note">This will appear as a bulleted point with a cyan, inset background.</LI> </UL> <DIV class="tip">This is a specialized note called a tip.</DIV> <DIV class="resource">A resource note, like this, might point to some external resource.</DIV> <DIV class="warning">A warning note indicates an action that might prove problematic (like causing your system to crash).</DIV></BODY></HTML>


Inheriting Selectors (inheritselector.html)<HTML><HEAD><TITLE>Inheriting Selectors</TITLE></HEAD><BODY><H1>Inheriting Selectors</H1><STYLE> UL {list-style-image:url(bluebullet.jpg);}</STYLE><UL> <LI>This will have a blue bulleted graphic.</LI> <LI>So will this</LI></UL><OL> <LI>However, this point will be numbered.</LI> <LI>So will this. <UL> <LI>But this will be bulleted again.</LI> </UL> </LI></OL></BODY></HTML>


Inheriting Selectors – inheritselector2.html

<HTML>

<HEAD>

<TITLE>Inheriting Selectors</TITLE>

</HEAD>

<BODY>

<H1>Inheriting Selectors</H1>

<STYLE>

UL LI {list-style-image:url(bluebullet.jpg);}

</STYLE>

<UL>

<LI>This will have a blue bulleted graphic.</LI>

<LI>So will this</LI>

<OL>

<LI>However, even though this is in an ordered list it

will have a graphic as well.</LI>

</OL>

</UL>

<OL>

<LI>However, this point will be numbered.</LI>

<LI>So will this.

<UL>

<LI>But this will be bulleted again.</LI>

</UL>

</LI>

</OL>

</BODY>

</HTML>


Inheriting Selectors (inheritselector3.html)

<HTML>

<HEAD>

<TITLE>Inheriting Selectors</TITLE>

</HEAD>

<BODY>

<H1>Inheriting Selectors</H1>

<STYLE>

UL LI {list-style-image:url(bluebullet.jpg);}

*{font-family:Courier;font-size:12pt;font-style:plain;}

H1 {text-decoration:underline;}

</STYLE>

<H1>Announcement</H1>

<P>There’s a new technique being used for output here.</P>

<UL>

<LI>This will have a blue bulleted graphic.</LI>

<LI>So will this</LI>

<OL>

<LI>However, even though this is in an ordered list it

will have a graphic as well.</LI>

</OL>

</UL>

<OL>

<LI>However, this point will be numbered.</LI>

<LI>So will this.

<UL>

<LI>But this will be bulleted again.</LI>

</UL>

</LI>

</OL>

</BODY>

</HTML>


Pseudo-Classes

A pseudo-class always starts A pseudo-class always starts with a colon character(:)with a colon character(:)

::first-childfirst-childThis pseudo-class applies to the firstThis pseudo-class applies to the firstchild element of the given type for a child element of the given type for a node.node.UL {list-style-type:disc}UL:first-child {list-style-

image:url(bluebullet.jpg)}------------------------------------------------------------------------------------------------------------------

:link and :visited:link and :visitedYou can use these to change the link You can use these to change the link colors or other characteristics awaycolors or other characteristics awayfrom the default characteristics thatfrom the default characteristics thatthe browser supports.the browser supports.A:link {background-

color:blue;color:white}A:visited {background-

color:navy;color:gray}

:hover. :active, and :focus:hover. :active, and :focus<STYLE>UL LI:hover {background-

color:lightblue;color:black;}UL LI:active {background-

color:navy;color:white;}INPUT[type=text]:focus {border:solid 1px

red;}</STYLE>---------------------------------------------------------- :lang:langYou can use this to set such things as quote You can use this to set such things as quote marks so that they properly match themarks so that they properly match theconvention of the language, for example: convention of the language, for example: <STYLE>HTML:lang(fr) {quotes: ‘<< ‘ ‘ >>’;}</STYLE>


Pseudo-Classes (Cont’d)

first-letter and first-linefirst-letter and first-lineThese pseudo-properties can be used toThese pseudo-properties can be used toselect the first displayed character andselect the first displayed character andthe first line in a given tag. the first line in a given tag. <STYLE> P:first-letter {float:left;font-size:48pt;margin-

top:20px;}</STYLE><P>When in the course of human events it

becomes necessary for one people to dissolve the political bonds which have connected them to another and to assume among the powers of the earth the equal and separate stations to which the laws of nature and natures God belong; a decent respect for the opinions of mankind require that we should declare the causes which impel them to the separation.</P>

------------------------------------------------------------------------------------------------------------------

:before and :after:before and :afterThese pseudo-properties exist primarily to These pseudo-properties exist primarily to

addaddelements prior to or after a given element. elements prior to or after a given element. <STYLE> P:Juliet {font-style:italic;} P.Juliet:before {content: “Juliet:

“;color:red;} P.Romeo {font-weight:bold;} P.Romeo:before {content: “Romeo:

“;color:blue;}</STYLE><P class=“Romeo”>Harks! What light on

yonder window breaks?</P><P class=“Juliet”>Romeo? Romeo?

Wherefore art thou, Romeo?</P>


External Styles in HTML

<LINK>Can be used to load style sheets, forCan be used to load style sheets, forexample:example:

<LINK type=“text/css” rel=“stylesheet” href=“mystylesheet.css”>

One of the limitation of One of the limitation of <LINK> is that it is that itis only supported in the is only supported in the <HEAD> of an of anHTML document.HTML document.

The @import DirectiveWith With @import, you can load in a, you can load in a

style sheet from a style sheet from a <STYLE> block, block,

or even from a different externalor even from a different external

style sheet, for example:style sheet, for example:

<STYLE>

@import url(notes.css)

</STYLE>


CSS and XML CSS provides a presentation layer that associates patterns of CSS provides a presentation layer that associates patterns of

tags with some kind of media representation.tags with some kind of media representation. The difference between CSS in HTML and in XML is very The difference between CSS in HTML and in XML is very

small.small. One of the primary differences is that the One of the primary differences is that the style attribute, the attribute, the

class attribute and the attribute and the <STYLE> or or <LINK> elements have elements have no predefined meaning in XML.no predefined meaning in XML.

As a consequence, we have to assign styles through a different As a consequence, we have to assign styles through a different mechanism with XML – the mechanism with XML – the <?xml-stylesheet ?> processing processing instruction.instruction.

Another principal difference between the CSS generated in Another principal difference between the CSS generated in HTML and XML is that in XML there really is no need for the HTML and XML is that in XML there really is no need for the class attribute – the objects are already defined through the attribute – the objects are already defined through the tags themselves.tags themselves.


External Style Sheets in XML

The The ?xml-stylesheet processing instruction processing instruction works with any style sheet format that is works with any style sheet format that is defined for XML, but in particular applies to defined for XML, but in particular applies to CSS and XSL. It’s full syntax:CSS and XSL. It’s full syntax:

<?xml-stylesheet type=mimetype href=stylesheetURL?>

mimetype will most likely have the value mimetype will most likely have the value ““text/css” or “” or “text/xsl”.”.

The The ?xml-stylesheet processing instruction processing instruction should be included after the XML declaration should be included after the XML declaration (<?xml version=“1.0” … ?>) and before the first and before the first element of the XML document.element of the XML document.

Creating an External Style Sheet in XML1.1. Create an XML document Create an XML document

(notesTest1.xml) which contains a (notesTest1.xml) which contains a number of different number of different note notation. notation.

<?xml-stylesheet type=“text/css” href=“notes1.css”?>

<document> <body> <warning>This is a

warning.</warning> On the other hand <tip>this is a tip</tip>, while <resource>this is a resource</resource>

</body></document>

2.2. The document contains a reference to The document contains a reference to an XML style sheet notes1.css, which an XML style sheet notes1.css, which is nearly identical to the HTML file is nearly identical to the HTML file notes.css.notes.css.

tip {margin-left:.5in;width:250px;border:solid 3px

black;position:relative; background-color:yellow;}

resource {margin-left:.5in;width:250px;border:solid

3px black;position:relative; background- color:green;}

warning {margin-left:.5in;width:250px;border:solid

3px black;position:relative; background- color:red;}

Creating an External Style Sheet in XML (Cont’d)

3.3. However, all three of these rules are However, all three of these rules are essentially subclasses of essentially subclasses of note. It may be . It may be more advantageous to create an attribute more advantageous to create an attribute for the note called something likefor the note called something like type, , which would codify the exact type ofwhich would codify the exact type of note that we are talking about that we are talking about (notesTest2.xml):(notesTest2.xml):

<?xml-stylesheet type="text/css" href="notes2.css"?>

<document> <body> <note type="warning">This is a

warning.</note> On the other hand <note type="tip">this is a tip</note>,

while <note type="resource">this is a

resource</note> </body>

</document>

4.4. The CSS for this is something that can’t The CSS for this is something that can’t readily be expressed using the HTML readily be expressed using the HTML notation. Fortunately, the CSS2 specification notation. Fortunately, the CSS2 specification includes a mechanism for referencing includes a mechanism for referencing attributes – the bracket [ ] notation. With attributes – the bracket [ ] notation. With brackets you can either search to make sure brackets you can either search to make sure that a given attribute exists for the specific that a given attribute exists for the specific element (i.e., element (i.e., note[type]) or can match those ]) or can match those tokens for which the attributes has a given tokens for which the attributes has a given value.value.

note {margin-left:.5in;width:250px;border-width:3px; border-style:outset;border-color:blue; position:relative;background-color;lightBlue;} note[type="tip"] {background-color:yellow;border-

color:yellow;} note[type="resource"] {background-color::green; border-color:green} note[type="warning"] {background-

color:red;border-color:red;}

Internal XML Cascading Style Sheets We can include style sheet rules in an element in the XML document with We can include style sheet rules in an element in the XML document with

a named ID, then reference the style sheet by that ID in the xml-stylesheet a named ID, then reference the style sheet by that ID in the xml-stylesheet processing instruction, for example:processing instruction, for example:

<?xml-stylesheet type=“text/css” href=“#myStylesheet”?><document> <st id=“myStylesheet”> title {font-size:24pt;display:block;} P {font-size:11pt;display:block;} P:first-letter {float:left;font-size:36pt;} st {display:none}  b {font-weight:bold;} </st> <title>CSS Style Sheets in XML Documents</title> <p>You can use the pound sign “#” to indicate that you want to reference a stylesheet

from within your document. In this case, the style sheet is contained in the <b>st</b> element, and is labeled “stylesheet”.</p>

</document>


CSS and Media Representation The ultimate direction of both CSS and XSL is to replace the way that we The ultimate direction of both CSS and XSL is to replace the way that we

represent any sort of document structure.represent any sort of document structure. CSS2 can potentially apply to many more media than simply web pages:CSS2 can potentially apply to many more media than simply web pages: all. The style property applies to all media types The style property applies to all media types aural. Intended for speech synthesizers Intended for speech synthesizers braille. Intended for Braille tactile feedback devices Intended for Braille tactile feedback devices handheld. Intended for handheld devices Intended for handheld devices embossed. Intended for paged Braille printers Intended for paged Braille printers print. Intended for printing to an opaque page, for example paper Intended for printing to an opaque page, for example paper projection. Intended for projection to a screen (such as slideshow) Intended for projection to a screen (such as slideshow) screen. Intended principally for color computer screens Intended principally for color computer screens tty. Intended for fixed pitch printers and related character grid devices Intended for fixed pitch printers and related character grid devices tv. Intended for use on a television screen Intended for use on a television screen


The @media directive CSS can let you target different media through the @media directive, making the code displayed CSS can let you target different media through the @media directive, making the code displayed

by, say, a web browser and a Palm Pilot look very different.by, say, a web browser and a Palm Pilot look very different. CSS allows you to group together rules that apply to a specific type of medium, and a rule for a CSS allows you to group together rules that apply to a specific type of medium, and a rule for a

given tag can be given several times (as long as each applies to a different medium):given tag can be given several times (as long as each applies to a different medium):

<!– NotesMedia.css -->@media screen print { note {margin-left:-.5in;width:250px;border-width:3px;border-

style:inset;position:relative;background-color:lightblue;} note[type=“tip”] {background-color:yellow;border-color:yellow;} note[type=“resource”] {background-color:green;border-color:green;color:white;} note[type=“warning”] {background-color:red;border-color:red;}}

@media aural { note[type=“tip”] {volume:medium;voice-family:FriendAdvice;} note[type=“resource”] {volume:soft;voice-family:Directions;} note[type=“warning”] {volume:loud;voice-family:WarningWillRobinson;}}


Media Groups In addition to the media In addition to the media type, we can also specify , we can also specify media groups, as follows:, as follows:

continuous or or paged. The medium is either one long stream of information, such . The medium is either one long stream of information, such as found in spoken output or a web page, or is broken into discrete pages.as found in spoken output or a web page, or is broken into discrete pages.

visual, aural, or or tactile. The medium is either concentrated in a visual display (a . The medium is either concentrated in a visual display (a printed page or web page, for example), an aural display (a speech synthesizer) or printed page or web page, for example), an aural display (a speech synthesizer) or a tactile display (a Braille reader)a tactile display (a Braille reader)

grid or or bitmap. The medium either consists of a fixed width set of characters . The medium either consists of a fixed width set of characters (such as a teletype machine) or can render graphics through a painted bitmap.(such as a teletype machine) or can render graphics through a painted bitmap.

interactive or e or static. The medium either allows interaction (such as a computer . The medium either allows interaction (such as a computer display) or doesn’t (such as a printed page).display) or doesn’t (such as a printed page).

all. Includes all media types.. Includes all media types.

@media paged, visual, bitmap, interactive { note {margin-left:-.5in;border:solid 2px black;position:relative;} note[type=“tip”] {border:solid 1px black;} note[type=“resource”] {border:dashed 1px black;} note[type=“warning”] {border:solid 5px black;}


The Box Model CSS makes use of what’s called a CSS makes use of what’s called a “Box”

Model, which determines the way that , which determines the way that information flows on the page.information flows on the page.

There are essentially two types of such There are essentially two types of such boxes – boxes – inline elements and elements and block elements.elements.

When defining CSS tags in XML, you When defining CSS tags in XML, you need to explicitly declare whether the need to explicitly declare whether the tag refers to a block or an inline element, tag refers to a block or an inline element, which is done through the which is done through the display property.property.

para (display:block;color:black;}

comment {display:inline;color:gray;font-size:120%;font-family:courier

<para>I’d like to include a comment: <comment>This is an interesting way of expressing yourself.</comment></para>

<para>Here’s another line with no comment.</para>


The Display Properties inline Content assumes the smallest possible size, with additional Content assumes the smallest possible size, with additional

elements flowing automatically in line with the current elements flowing automatically in line with the current element element when possible.when possible.

block Content fills the extent of the flow boundaries, and that content Content fills the extent of the flow boundaries, and that content always starts as part of a new flow region (for example by always starts as part of a new flow region (for example by

starting on the next line of text).starting on the next line of text). none Indicates that the contents are not rendered to the output Indicates that the contents are not rendered to the output

canvascanvas inherit The element inherits the style attribute of the object’s immediate The element inherits the style attribute of the object’s immediate

container.container.

list-item The item is treated as an element in a list.The item is treated as an element in a list. run-in The contents are essentially treated as belonging to the next The contents are essentially treated as belonging to the next

block of text encountered.block of text encountered. compact The contents are a display-type-box, but occupy the smallest The contents are a display-type-box, but occupy the smallest

area possible.area possible. marker The contents are to be treated as a marker or bullet.The contents are to be treated as a marker or bullet.


The Display Properties (Cont’d)

table The contents are displayed as if in a table.The contents are displayed as if in a table.

inline-table Indicates a table that is contained as part of the flow.Indicates a table that is contained as part of the flow.

table-row- Contains all of the regular rows (those not part of the column Contains all of the regular rows (those not part of the column group headers.headers.

table-header Contains all of the header elements in the table (such as Contains all of the header elements in the table (such as column column --group heads).heads).

table-footer Contains all of the footer elements in a table.Contains all of the footer elements in a table. -group

table-row Contains a standard row in a table.Contains a standard row in a table.

table-cell Contains a standard cell from a row in a table.Contains a standard cell from a row in a table.

table-caption Contains a caption that is associated with the table.Contains a caption that is associated with the table.

Example: Working With Display (midnightRain.xml)

<?xml-stylesheet type="text/css" href="#docstyle"?><document> <style id="docstyle"> style {display:none;} head {display:block;} title {display:block;font-size:24pt;} author {display:block;font-size:18pt;} email {display:none;} body {display:block;font-size:10pt;} para {font-size:11pt;display:block;} </style> <head> <title>Midnight Rain</title> <author>Kurt Cagle</author> <email>[email protected]</email> </head> <body> <note>From the first chapter of Midnight Rain, by Kurt Cagle</note> <para>The rain spat against the apartment's window pane, torrential for this part of Los Angeles, though Gina would not have much noticed it at home. The rain straddled the boundary between being the life blessing touch that this valley so seldom received and the caustic depressed state that lately so made up her soul.</para> <para>"Rain, Rain, Go Away '" she sang listlessly, though as she doodled over the script that Stan had sent, Gina secretly relished the rain, as indulgent as the black mood she wore around herself.</para> </body></document>


Example: Working With Display (midnightRain.xml)

Nature of display is not uniform across browsers – IE and Opera, for Nature of display is not uniform across browsers – IE and Opera, for example, an element that has example, an element that has display set to set to block within another element within another element with with display set to set to none will simply not appear.will simply not appear.

To make the story appear properly in IE, you would need to explicitly To make the story appear properly in IE, you would need to explicitly make the <head> element visible, then hide any sub-elements that don’t make the <head> element visible, then hide any sub-elements that don’t appear:appear:

<style id="docstyle"> style {display:none;} head {display:block;} title {display:block;font-size:24pt;} author {display:block;font-size:18pt;} email {display:none;} body {display:block;font-size:10pt;} para {font-size:11pt;display:block;} </style>


Setting Colors

In CSS, you create rectangular blocks that had specific In CSS, you create rectangular blocks that had specific colors (or background-images) within the document colors (or background-images) within the document itself, for example:itself, for example:

<P style=“color:red;background-color:white;”>Warning, Will Robinson!!

Warning!!</P>

Similarly, you can set the colors of whole tag sets in the Similarly, you can set the colors of whole tag sets in the same way by adding these attributes to style sheets:same way by adding these attributes to style sheets:

< style>

H1 {color:red;background-color:white;}

</style>


Building Borders Borders can be used to provide a number of useful special effects.Borders can be used to provide a number of useful special effects. In CSS, each border supports three distinct properties: In CSS, each border supports three distinct properties: style, , width, and , and

color. The three properties can be set up by a single tripled attribute, as:. The three properties can be set up by a single tripled attribute, as:P {border:solid 5px red;}

Style lets you change the visual appearance of the border, with possible lets you change the visual appearance of the border, with possible values including:values including:

solid (a single solid line) (a single solid line) double (two concentric lines of least three pixels width) (two concentric lines of least three pixels width) inset (a border where the upper and left hand sides are darker than the bottom (a border where the upper and left hand sides are darker than the bottom

and right hand sides)and right hand sides) outset (the inverse of inset)(the inverse of inset) groove (a border that appears incised around the container)(a border that appears incised around the container) ridge (a border that’s excised around the container) (a border that’s excised around the container) dotted (a border consisting of alternating dots and spaces) (a border consisting of alternating dots and spaces) dashed (a border consisting of alternating dashes and spaces)(a border consisting of alternating dashes and spaces) none (turns bordering off)(turns bordering off)


Example: Building Borders in HTML (borders.html)


Example: Building Borders in XML (borders.xml)

<?xml-stylesheet type="text/css" href="#internalstyles" ?><?xml-stylesheet type="text/css" href="#internalstyles" ?><document><document><style id="internalstyles"><style id="internalstyles"> annotation {border:solid 3px green;font-size:12pt;annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none;display:block;border-left:none;border-right:none; font-family:Arial;}font-family:Arial;} annotation {border:solid 3px green;font-size:12pt;annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none;display:block;border-left:none;border-right:none; font-family:Arial}font-family:Arial} para {font-size:11pt;display:block;}para {font-size:11pt;display:block;} style {display:none;}style {display:none;}</style></style> <para>The rain spat against the apartment's window pane, <para>The rain spat against the apartment's window pane, torrential for this part of Los Angeles, though Gina would torrential for this part of Los Angeles, though Gina would not have much noticed it at home. The rain straddled the not have much noticed it at home. The rain straddled the boundary between being the life blessing touch that this boundary between being the life blessing touch that this valley so seldom received and the the caustic depressed valley so seldom received and the the caustic depressed state that lately so made up her soul.</para>state that lately so made up her soul.</para> <para>"Rain, Rain, Go Away," she sang listlessly, though as <para>"Rain, Rain, Go Away," she sang listlessly, though as she doodled over the script that Stan had sent, Gina secretly she doodled over the script that Stan had sent, Gina secretly relished the rain, as indulgent as the black mood she wore relished the rain, as indulgent as the black mood she wore around herself.</para>around herself.</para> <annotation><annotation>

<para>Rain is a metaphor throughout this story as an <para>Rain is a metaphor throughout this story as an expressionexpression

of both elemental force and chaotic emotions. </para>of both elemental force and chaotic emotions. </para>

</annotation></annotation>

<para>She didn't want to do the script, not really - the <para>She didn't want to do the script, not really - the

scripts that she received anymore were hardly star scripts that she received anymore were hardly star makers, makers,

though her star had risen fairly high once, only to be though her star had risen fairly high once, only to be knocked knocked

off course by the ... ah, what was the term the publicist off course by the ... ah, what was the term the publicist had had

used ... the incident, that was it.</para>used ... the incident, that was it.</para>

</document></document>

Background Images

Images are a regular staple of web pages, but incorporating Images are a regular staple of web pages, but incorporating images is considerably more complex in XML documents.images is considerably more complex in XML documents.

The The background-image style attribute offers one way of setting style attribute offers one way of setting an image, for example, the following style samples will load a an image, for example, the following style samples will load a graphic called graphic called mybackground.jpg from the same folder as the from the same folder as the page, from different folder on the same server, and from a page, from different folder on the same server, and from a different server:different server:

<style>body {background-image:url(mybackground.jpg);}

body {background-image:url(images/mybackground.jpg);}

 body {background-image:url(

http://www.myserver.com/images/mybackground.jpg);background-color:blue;}</style>


Repeating Background Images

Repetition is specified by using the various Repetition is specified by using the various repeat properties. These control properties. These control the tiling behavior of background graphics:the tiling behavior of background graphics:

repeat (repeats the indicated graphic both horizontally and vertically, the (repeats the indicated graphic both horizontally and vertically, the default)default)

repeat-x (repeats the indicated graphic both horizontally, but not vertically) (repeats the indicated graphic both horizontally, but not vertically) repeat-y (repeats the indicated graphic vertically but not horizontally) (repeats the indicated graphic vertically but not horizontally) no-repeat (doesn’t repeat the graphic at all) (doesn’t repeat the graphic at all)

So, if we wanted to have our strip repeat vertically along the left side of the So, if we wanted to have our strip repeat vertically along the left side of the page, we’d set the style as:page, we’d set the style as:

{background-image:url(mybackground.jpg); background-repeat:repeat-y;}


Positioning Background Images

There are several different ways that you can position the image:There are several different ways that you can position the image:

percentage, e.g., 40% 60%e.g., 40% 60% (sets the graphic so that it starts 40% of the (sets the graphic so that it starts 40% of the width from the left and 60% of the height from the top)width from the left and 60% of the height from the top)

length, e.g., 50,75e.g., 50,75 (positions the left coordinate at 50 pixels and the top of (positions the left coordinate at 50 pixels and the top of 75 pixels)75 pixels)

top center bottom (sets the graphic flush to the top, centered vertically, (sets the graphic flush to the top, centered vertically, or flush to the bottom of the document)or flush to the bottom of the document)

left center right (sets the graphic flush to the left, centered vertically, or (sets the graphic flush to the left, centered vertically, or flush to the right of the document)flush to the right of the document)

So, if we wanted to align the graphic so that it was centred on the web page So, if we wanted to align the graphic so that it was centred on the web page horizontally at the top of the page, without tiling, we’d use the expression:horizontally at the top of the page, without tiling, we’d use the expression:

<h1 style=“background-url(mybackground.jpg);{background-repeat:no-repeat;background-position:top center;”>Here’s a test.</h1>


Specifying Multiple Background Properties

The main background properties are:The main background properties are:

background-color (which sets the color) (which sets the color) background-image (sets the image) (sets the image) background-repeat (indicates how the background tiles) (indicates how the background tiles) background-attachment (indicates whether the background scrolls (indicates whether the background scrolls

or remains fixed)or remains fixed) background-position (the location of the upper-left hand point of (the location of the upper-left hand point of

the background)the background)

Example:Example:<h1 style=“background:blue url(mybackground.jpg) no-repeat scroll

top center”>Here’s a test.</h1>

Creating XML Web Page Background (rainWithBG.xml)

<?xml-stylesheet type="text/css" href="#internalstyles" ?><?xml-stylesheet type="text/css" href="#internalstyles" ?>



<document><document>

<style id="internalstyles"><style id="internalstyles">

annotation {border:solid 3px green;font-size:12pt;annotation {border:solid 3px green;font-size:12pt;

display:block;border-left:none;border-right:none;font-display:block;border-left:none;border-right:none;font-family:Arial}family:Arial}

annotation {border:solid 3px green;font-size:12pt;annotation {border:solid 3px green;font-size:12pt;

display:block;border-left:none;border-right:none;font-display:block;border-left:none;border-right:none;font-family:Arial}family:Arial}

para {font-size:11pt;display:block;}para {font-size:11pt;display:block;}

style {display:none;}style {display:none;}

background {background-image:url(BGTile.jpg);background {background-image:url(BGTile.jpg);

background-repeat-x:no;background-repeat-y:yes;background-repeat-x:no;background-repeat-y:yes;

width:128px;height:100%;position:absolute;left:0px;top:width:128px;height:100%;position:absolute;left:0px;top:0px;}0px;}

body {margin-left:136px;position:absolute;}body {margin-left:136px;position:absolute;}

</style></style>

<background/><background/>

<body><body>

<para>The rain spat against the apartment's window pane, <para>The rain spat against the apartment's window pane,

torrential for this part of Los Angeles, though Gina would torrential for this part of Los Angeles, though Gina would

not have much noticed it at home. The rain straddled the not have much noticed it at home. The rain straddled the

boundary between being the life blessing touch that this boundary between being the life blessing touch that this

valley so seldom received and the caustic depressed valley so seldom received and the caustic depressed

state that lately so made up her soul.</para>state that lately so made up her soul.</para>

<para>"Rain, Rain, Go Away," she sang listlessly, though as <para>"Rain, Rain, Go Away," she sang listlessly, though as

she doodled over the script that Stan had sent, Gina secretly she doodled over the script that Stan had sent, Gina secretly

relished the rain, as indulgent as the black mood she wore relished the rain, as indulgent as the black mood she wore

around herself.</para>around herself.</para>

<annotation><annotation>

<para>Rain is a metaphor throughout this story as an <para>Rain is a metaphor throughout this story as an expressionexpression

of both elemental force and chaotic emotions. </para>of both elemental force and chaotic emotions. </para>

</annotation></annotation>

<para>She didn't want to do the script, not really - the <para>She didn't want to do the script, not really - the

scripts that she received anymore were hardly star makers, scripts that she received anymore were hardly star makers,

though her star had risen fairly high once, only to be though her star had risen fairly high once, only to be

knocked off course by the ... ah, what was the term the knocked off course by the ... ah, what was the term the

publicist had used ... the incident, that was it.</para>publicist had used ... the incident, that was it.</para>

</body></body>

</document></document>


Positioning Schemes

CSS identifies four distinct types of positioning (which affects CSS identifies four distinct types of positioning (which affects the flow) – the flow) – static, , relative, , absolute, and , and fixed::

Static Position – is one in which the position of the content is – is one in which the position of the content is controlled by the browser, it’s the default.controlled by the browser, it’s the default.

Relative Position – is similar to the static position except that – is similar to the static position except that the top and left values can be overridden by code or CSS the top and left values can be overridden by code or CSS properties.properties.

Absolute Position – it’s opposite to the relative position. The – it’s opposite to the relative position. The origin (the starting position both horizontally and vertically) for origin (the starting position both horizontally and vertically) for a relatively positioned item is its “nornal” position in the flow.a relatively positioned item is its “nornal” position in the flow.

Fixed Position – it uses the absolute model, but it won’t change – it uses the absolute model, but it won’t change the position if the viewport (the browser display window, for the position if the viewport (the browser display window, for example) changes.example) changes.


Positioning Schemes (Cont’d)

Once you set up the positioning mode, you can position an Once you set up the positioning mode, you can position an element from from the top, bottom, left or right.element from from the top, bottom, left or right.

CSS distinguishes between two types of coordinates:CSS distinguishes between two types of coordinates:

absolute coordinates – ones where the lengths correspond to coordinates – ones where the lengths correspond to standardized lengths such as inches or centimeters.standardized lengths such as inches or centimeters.

relative coordinates – such as pixels or ems that are measured as coordinates – such as pixels or ems that are measured as part of a device specification (like the resolution of a computer part of a device specification (like the resolution of a computer screen or the height of a font character).screen or the height of a font character).


Positioning Properties

Width and and Height Overflow – defines what happens when the contents of – defines what happens when the contents of

a given field exceed the boundaries of a given element. a given field exceed the boundaries of a given element. It takes one of five distinct values – vIt takes one of five distinct values – visible, , hidden, , scroll, , auto, or , or inherit..

Clip – can work in conjunction with the – can work in conjunction with the overflow property.property.

Floats – can take one of three values – – can take one of three values – left, , right, or , or none – and works by forcing the element that has this – and works by forcing the element that has this CSS property to “float” in the direction specified as far CSS property to “float” in the direction specified as far left or right as it can.left or right as it can.


Example: Simple Drop Caps (DropCaps.html)

<HTML><HTML>

<HEAD><HEAD>

<TITLE>DropCaps</TITLE><TITLE>DropCaps</TITLE>

<STYLE><STYLE>

P {border:solid 5px #C0C0C0;}P {border:solid 5px #C0C0C0;}

</STYLE></STYLE>

</HEAD></HEAD>

<BODY><BODY>

<H3>Drop Caps</H3><H3>Drop Caps</H3>

<STYLE><STYLE>

P:first-letter {float:left;font-size:36pt;font-family:Times Roman;}P:first-letter {float:left;font-size:36pt;font-family:Times Roman;}

</STYLE></STYLE>

<BODY><BODY>

<P>This is an example of the float element in HTML, although it works in a similar fashion<P>This is an example of the float element in HTML, although it works in a similar fashion

in XML. Note that the height of the initial cap includes the height of the "ascendor" in XML. Note that the height of the initial cap includes the height of the "ascendor"

length, which describes a margin above characters for handling parts of the character length, which describes a margin above characters for handling parts of the character

glyph that extends beyond the nominal top of the line.</P>glyph that extends beyond the nominal top of the line.</P>

</BODY></BODY>

</HTML></HTML>

Example: Sidebars (sidebars.xml)<?xml-stylesheet type="text/css" href="#internalstyles"?><?xml-stylesheet type="text/css" href="#internalstyles"?><document><document><style id="internalstyles"><style id="internalstyles"> style {display:none;}style {display:none;} style {display:none;}style {display:none;} document {display:block;}document {display:block;} heading {display:block;font-size:24pt;font-family:Times Roman;}heading {display:block;font-size:24pt;font-family:Times Roman;} p {display:block:font-size:11pt;position:relative;}p {display:block:font-size:11pt;position:relative;} sidebar {display:block;float:right;width:250px;border:inset 3pt gray;sidebar {display:block;float:right;width:250px;border:inset 3pt gray; background-color:#C0C0FF;padding:3px; }background-color:#C0C0FF;padding:3px; } sidebar heading {display:block;font-size:18pt;font-family:Helvetica;}sidebar heading {display:block;font-size:18pt;font-family:Helvetica;} sidebar p {display:block;font-size:9pt;font-family:Times Roman;}sidebar p {display:block;font-size:9pt;font-family:Times Roman;}</style></style> <heading>CSS helps with XML Page Layout</heading><heading>CSS helps with XML Page Layout</heading> <sidebar><sidebar> <heading>A Few Tips</heading><heading>A Few Tips</heading> <p>Full support of CSS unfortunately is hard to find. Netscape 4.x doesn't support <p>Full support of CSS unfortunately is hard to find. Netscape 4.x doesn't support it anywhere near as robustly as it should, for example, while Microsoft's Internet it anywhere near as robustly as it should, for example, while Microsoft's Internet Explorer provides an implementation that is similar, but not identical, to the CSS2 Explorer provides an implementation that is similar, but not identical, to the CSS2 specification.</p>specification.</p> </sidebar></sidebar> <p>XML is commonly used for passing data between systems, but its original purpose, <p>XML is commonly used for passing data between systems, but its original purpose, providing layout for data that doesn't necessarily fit well into the HTML model, sometimes providing layout for data that doesn't necessarily fit well into the HTML model, sometimes gets lost in the din. However, that doesn't have to be the case. By using CSS, you can gets lost in the din. However, that doesn't have to be the case. By using CSS, you can place a visual presentation layer in front of your XML that will make it usable through place a visual presentation layer in front of your XML that will make it usable through any interface.any interface. </p></p></document></document>


Lists and Tables

In HTML lists and tables are defined by s specific set In HTML lists and tables are defined by s specific set of elements (such as <of elements (such as <LI>, <>, <UL> and <> and <OL> tags for > tags for lists and <lists and <TABLE>, <>, <TR>, <>, <TD>, and so forth for >, and so forth for tables).tables).

However, the problem with any of these elements is However, the problem with any of these elements is that they’re essentially display-oriented rather than that they’re essentially display-oriented rather than logical structure.logical structure.

The CSS2 specification attempts to fix this problem The CSS2 specification attempts to fix this problem somewhat; it actually defines CSS property somewhat; it actually defines CSS property equivalents to the HTML table and list tags. equivalents to the HTML table and list tags.

Example: Lists (employees.xml)<?xml-stylesheet type="text/css" <?xml-stylesheet type="text/css"

href="cssemployeelist.css"?>href="cssemployeelist.css"?><employees><employees> <employee id="101"><employee id="101"> <firstName>Jean</firstName><firstName>Jean</firstName> <lastName>Janus</lastName><lastName>Janus</lastName> <title>President</title><title>President</title> <dateStarted>1997-11-12</dateStarted><dateStarted>1997-11-12</dateStarted> <salary>324021</salary><salary>324021</salary> <department>Administration</department><department>Administration</department> <image>images/jjanus.jpg</image><image>images/jjanus.jpg</image></employee></employee><employee id="102"><employee id="102"> <firstName>Kitara</firstName><firstName>Kitara</firstName> <lastName>Milleaux</lastName><lastName>Milleaux</lastName> <title>Chief Executive Officer</title><title>Chief Executive Officer</title> <dateStarted>1997-08-12</dateStarted><dateStarted>1997-08-12</dateStarted> <salary>329215</salary><salary>329215</salary> <department>Administration</department><department>Administration</department> <image>kmilleaux.jjpg</image><image>kmilleaux.jjpg</image></employee></employee><employee id="103"><employee id="103"> <firstName>Shelley</firstName><firstName>Shelley</firstName>

<lastName>Janes</lastName><lastName>Janes</lastName> <title>Chief Financial Officer</title><title>Chief Financial Officer</title> <dateStarted>1998-03-16</dateStarted><dateStarted>1998-03-16</dateStarted> <salary>232768</salary><salary>232768</salary> <department>Finance</department><department>Finance</department> <image>images/sjanes.jpg</image><image>images/sjanes.jpg</image></employee></employee><employee id="104"><employee id="104"> <firstName>Marissa</firstName><firstName>Marissa</firstName> <lastName>Mendez</lastName><lastName>Mendez</lastName> <title>Chief Technical Officer</title><title>Chief Technical Officer</title> <dateStarted>1998-09-16</dateStarted><dateStarted>1998-09-16</dateStarted> <salary>242768</salary><salary>242768</salary> <department>Information Technologies</department><department>Information Technologies</department> <image>images/mmendez.jpg</image><image>images/mmendez.jpg</image></employee></employee><employee id="105"><employee id="105"> <firstName>Kace</firstName><firstName>Kace</firstName> <lastName>Juriden</lastName><lastName>Juriden</lastName> <title>Vice President, Marketing</title><title>Vice President, Marketing</title> <dateStarted>1998-11-03</dateStarted><dateStarted>1998-11-03</dateStarted> <salary>210359</salary><salary>210359</salary> <department>Marketing</department><department>Marketing</department> <image>images/kjuriden.jpg</image><image>images/kjuriden.jpg</image></employee></employee></employees></employees>

Cssemployeelist.css



employees {display:block;visibility:visible;}

employee {display:list-item;list-style-type:disc;}

lastName {display:inline;font-size:12pt;}

firstName {display:inline;font-size:12pt;}

title {display:none;font-size:12pt;}

dateStarted {display:none;font-size:12pt;}

salary {display:none;font-size:12pt;}

department {display:none;font-size:12pt;}

image {display:none;}

We could set up an external We could set up an external style sheet style sheet (cssemployeelis.css) that will (cssemployeelis.css) that will display a list of each display a list of each employee, first name and last employee, first name and last name. name.

Note how we use the Note how we use the display::list--item property property for the <for the <employee> > element. This indicates that element. This indicates that the employee node marks the the employee node marks the scope of the list item, and scope of the list item, and that any child of that element that any child of that element is considered to ba a part of is considered to ba a part of that list item in turn.that list item in turn.


Working with Lists in XML List items have three characteristics which define them:List items have three characteristics which define them:

list--style--type – describes the bullet character (disc, circle, square, – describes the bullet character (disc, circle, square, decimal, …etc.).decimal, …etc.).

list-style-position – tells the browser or printer whether to display – tells the browser or printer whether to display the bullet indicator offset from the block of the list element the bullet indicator offset from the block of the list element ((outside, the default) or inline to the element (, the default) or inline to the element (inside), in other ), in other words:words:

• This is a list element for whichThis is a list element for which the list-style-position is the list-style-position is outsideoutside..• This is a list element for whichThis is a list element for whichThe list-style-position isThe list-style-position is inside inside..

list-style-image – used to specify a specific bullet graphic to – used to specify a specific bullet graphic to replace the system graphics, for example:replace the system graphics, for example:

<point {list-style-image:url(image/hand.gif);list-style-type:square;}


Supporting Tables in CSS The CSS2 specification introduces a number of table The CSS2 specification introduces a number of table

properties that can let you associate a given table-like properties that can let you associate a given table-like characteristic to a data structure:characteristic to a data structure:

table The contents are displayed as if in a table.The contents are displayed as if in a table.

inline-table Indicates a table that is contained as part of the flow.Indicates a table that is contained as part of the flow.

table-row- Contains all of the regular rows (those not part of the column Contains all of the regular rows (those not part of the column group headers.headers.

table-header Contains all of the header elements in the table (such as Contains all of the header elements in the table (such as column column --group heads).heads).

table-footer Contains all of the footer elements in a table.Contains all of the footer elements in a table. -group

table-row Contains a standard row in a table.Contains a standard row in a table.

table-cell Contains a standard cell from a row in a table.Contains a standard cell from a row in a table.

table-caption Contains a caption that is associated with the table.Contains a caption that is associated with the table.

Example: Displaying the Employees in a Table



employees {display:table;}

employee {display:table-row;}

lastName {display:table-cell;}

firstName {display:table-cell;}

title {display:table-cell;}

dateStarted {display:table-cell;}

salary {display:table-cell ;}

department {display:table-cell;}

image {display:none;}

The CSS2 The CSS2 table property property and its associated sub-and its associated sub-properties (such as properties (such as table--row or or table--cell) are not ) are not supported by IE in any supported by IE in any version. As such, to version. As such, to properly display the table properly display the table contents here you’d need contents here you’d need to transform the results to transform the results into HTML using XSLT, into HTML using XSLT, using using XSLT rather than rather than relying on CSS to indicate relying on CSS to indicate table information.table information.


Text and Font Manipulation font-size – sets the height of the text within the element. You can set the font – sets the height of the text within the element. You can set the font

size to a number of different units, set it as percentage, or specify a named term size to a number of different units, set it as percentage, or specify a named term for it (such as for it (such as small, , medium, , large) or relative terms (such as ) or relative terms (such as larger or or smaller). It’s general syntax:). It’s general syntax:

font-size:absolute size | length | percentage

Examples:Examples:

body {font-size:12pt;}

body note {font-size:75%;} font-style andand font-weight – appear to give us the same capabilities as italic – appear to give us the same capabilities as italic

<I> or bold or bold <B> respectively. The general syntax: respectively. The general syntax:

font-style:normal | italic | oblique

Font-weight:light | normal | bold | bolder | lighter |

100 100 | 200 200 | 300 300 | 400 400 | 500 500 | 600 600 | 700 700 | 800 800 | 900 900


Text and Font Manipulation (Cont’d)

font-family andand font-face – basically describes the – basically describes the characteristics that make a font unique. It’s general syntax:characteristics that make a font unique. It’s general syntax:

font-style:familyname[,familyname]

Examples:Examples:

style=“font-family:’new century schoolbook’, serif;”

font-family:Engraves,’Zapf Chancery’,Fantasy;

@font-face – provides a means to download font resource by – provides a means to download font resource by providing a URL to the resource. It’s general syntax:providing a URL to the resource. It’s general syntax:

@font-face {font-family:familyname; src:url(url);}


Text and Font Manipulation (Cont’d)

font-variant – gives small caps. It’s general syntax:– gives small caps. It’s general syntax:

font-variant:normal | small-caps

font-decoration – is useful for handling underlining and – is useful for handling underlining and strikthrough. It’s general syntax:strikthrough. It’s general syntax:

font-decoration:none | underline | overline | line-through | blink

text-transform – basically will set a string selection to initial – basically will set a string selection to initial caps, all caps, or all lowercase characters. It’s general syntax:caps, all caps, or all lowercase characters. It’s general syntax:

font-transform:capitalize | uppercase | lowercase | none


Indentation, Padding and Margins

Text-indent – lets you specify the amount of space that the first – lets you specify the amount of space that the first line indents. It’s general syntax:line indents. It’s general syntax:

text-indent:length | percentage

margin – provides the amount of space between a block element – provides the amount of space between a block element and the surrounding elements. It’s general syntax:and the surrounding elements. It’s general syntax:

margin:length | percentage | auto

padding – provides the amount of space between a block – provides the amount of space between a block element and the elements that it contains. It’s general syntax:element and the elements that it contains. It’s general syntax:

padding:length | percentage | auto


Alignment

text-align – lets you set the alignment characteristics – lets you set the alignment characteristics of a block of text. It’s general syntax:of a block of text. It’s general syntax:

text-align:left | right | center | justify

vertical-align –sets of a block of text to be superscript –sets of a block of text to be superscript or subscript. It’s general syntax:or subscript. It’s general syntax:

vertical-align:sub | super


Aural Style Sheets

The CSS2 specification was basically built around the The CSS2 specification was basically built around the integration of various media into the web browser.integration of various media into the web browser.

The ability to have your web page read aurally can prove The ability to have your web page read aurally can prove useful in many situations, for example:useful in many situations, for example:

Automobile and cell-phone access to your web sites.Automobile and cell-phone access to your web sites. Sites that can be accessed by sight-impaired people.Sites that can be accessed by sight-impaired people. Kiosks that use a web page base and allow us to listen to Kiosks that use a web page base and allow us to listen to

one site in the background while viewing another in the one site in the background while viewing another in the foreground. foreground.


Example: Aural Style Sheets

@media visual {

document {position:absolute;left:0px;top:0px;background-

image(myBackground.jpg); }

title (display:block;font-size:24pt;font-family:Helvetica; }

author (display:block;font-size:15pt;font-family:Helvetica; }

para (display:block;font-size:10pt;font-family:Times Roman; }

}

@media aural {

document {play-during:url(backgroundMusic.mp3 repeat mix; }

title (voice-family:’James Earl Jones’ male;volume:medium; }

author (voice-family:’James Earl Jones’ male;volume:soft; }

para (voice-family:’Kelly McGillis’ female;volume:medium; }

}


Thank you

cascading style sheets css

Documents

given style

htmla style

css specs

mediaxml css

css properties

khalilthe style attributein

cascading style sheetscss

specific css property