Cascading Style Sheets CSS Dr Awad Khalil Computer

Cascading Style Sheets CSS Dr. Awad Khalil Computer Science Department AUC XML & CSS, by Dr. Khalil 1

Content / How to create style sheets HTML/XML documents / How to use CSS with HTML / Where some of the limitations are / How you can use CSS to provide very sophisticated effects in your documents for web pages, printed pages, speech engines, and other media XML & CSS, by Dr. Khalil 2

XML Content/Presentation Paradigm v The Content/Presentation paradigm is one of the most pervasive patterns in XML. v At its root, the concept means that you separate data from the way that the data is displayed. v The important thing is that by separating the content – the logical structure – from the presentation, you can target your message to any number of different viewers without having to worry about whether the message gets mangled in the medium. XML & CSS, by Dr. Khalil 3

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

W 3 C and CSS / The W 3 C set up a Style Sheet Working Group to handle the specific problems of building presentation layer architectures. The first CSS spec was created in 1995. / There are in fact two CSS specs at varying levels. / CSS 1 defined the association between specific CSS property names and their visual appearance. / CSS 2, approved in May of 1998, clarified a number of ambiguities from the first specification, and also incorporated support for sound and non-traditional media. / Currently, the most recent formal recommendation for CSS is CSS 2 Specification (http: //www. w 3. org/TR/1998/REC-CSS 2). XML & CSS, by Dr. Khalil 5

Creating Styles in HTML / A style consists of CSS properties assigned to specific values of the form property: value / Styles can be assigned in one of three ways in HTML: u The style attribute u The <STYLE> element u An external style sheet XML & CSS, by Dr. Khalil 6

The style Attribute / In the first case, the style would look much like: <H 1 style=“voice-family: James. Earl. Jones; volume: x-loud; ”> Welcome To My Site </H 1> <P style=“voice-family: Kelly. Mc. Gillis; 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 change a few elements from their default display, but has some serious limitations when applied to the document as a whole. XML & CSS, by Dr. Khalil 7

The <STYLE> Element / / The <STYLE> element allows you to associate a given style with a specific type of element. For example, the following <STYLE> declaration ensures that whenever an H 1 tag is encountered, it’s rendered to speak in its James Earl Jones voice, while a paragraph tag will speak with Ms. Mc. Gillis’s voice: <STYLE> H 1 {voice-family: James. Earl. Jones; volume: x-loud; } P {voice-family: Kelly. Mc. Gillis; volume: medium; } </STYLE> <H 1>This will be read as if by James Earl Jones</H 1> <P>This would be read as if by Kelly Mac. Gillis</P> <P>So will this. </P> <H 2>This won’t be spoken by the language interpreter, as there is no association with a specific rule here. </H 2> XML & CSS, by Dr. Khalil 8

The Style Sheet / / The actual CSS style declaration for each type of tag is called a rule, and the collection of all rules within the <STYLE> tag are together known as a style sheet. The name of the tag in turn is called the selector for the rule. XML & CSS, by Dr. Khalil 9

Cascading Styles / / / 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 other words a style applies not only to the element that it’s defined on, but also to all children of that element. 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 specifically override the styles with the same CSS properties in their own styles. XML & CSS, by Dr. Khalil 10

Example: Showing Cascades (showcascades. html) <HTML> <HEAD> <TITLE>Showing Cascades</TITLE> </HEAD> <BODY> <H 1>Showing Cascades</H 1> <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> 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> XML & CSS, by Dr. Khalil 11

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> elements do not cascade. If we declare a given rule for a specific selector (such as the DIV element) in one style sheet, then declare a different rule for the same selector, the last rule declared will be the one used for the page – even if there were DIVs between the first and second <STYLE> sections XML & CSS, by Dr. Khalil 12

A Class Act in HTML / / Suppose that we had a need for three different kinds of notes within a document: Ø A tip note (in which the background color is yellow). Ø A note that indicated some kind of resource (with a green background). Ø A warning (in red). The way to do this is by defining a Class attribute 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> XML & CSS, by Dr. Khalil 13

A Class Act in HTML (Cont’d) / It’s also possible to apply two classes to a single tag simultaneously, by separating each class from the next with a space character. <STYLE>. note {margin-left: -. 5 in; width: 250; border: solid 3 px black; position: relative; backgroundcolor: 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> XML & CSS, by Dr. Khalil 14

Making Class Selectors (classselectors. html) <HTML> <HEAD> <TITLE>Making Class Selectors</TITLE> </HEAD> <H 1>Making Class Selectors</H 1> <STYLE> P. note {margin-left: -. 05 in; width: 250; border: solid 3 px black; position: relative; background-color: lightblue; } LI. note {border: inset 3 px gray; background-color: cyan; }. tip {background-color: yellow; border: inset 2 px yellow; margin-bottom: . 2 in; }. resource {background-color: green; border: inset 2 px green; margin-bottom: . 2 in; color: white; }. warning {background-color: red; border: inset 2 px red; margin-bottom: . 2 in; } </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> XML & CSS, by Dr. Khalil 15

Inheriting Selectors (inheritselector. html) <HTML> <HEAD> <TITLE>Inheriting Selectors</TITLE> </HEAD> <BODY> <H 1>Inheriting Selectors</H 1> <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> XML & CSS, by Dr. Khalil 16

Inheriting Selectors – inheritselector 2. html <HTML> <HEAD> <TITLE>Inheriting Selectors</TITLE> </HEAD> <BODY> <H 1>Inheriting Selectors</H 1> <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> XML & CSS, by Dr. Khalil 17

Inheriting Selectors (inheritselector 3. html) <HTML> <HEAD> <TITLE>Inheriting Selectors</TITLE> </HEAD> <BODY> <H 1>Inheriting Selectors</H 1> <STYLE> UL LI {list-style-image: url(bluebullet. jpg); } *{font-family: Courier; font-size: 12 pt; fontstyle: plain; } H 1 {text-decoration: underline; } </STYLE> <H 1>Announcement</H 1> <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> XML & CSS, by Dr. Khalil 18

Pseudo-Classes / A pseudo-class always starts with a colon character(: ) / : first-child This pseudo-class applies to the first child element of the given type for a node. UL {list-style-type: disc} UL: first-child {list-styleimage: url(bluebullet. jpg)} ----------------------------- / : link and : visited You can use these to change the link colors or other characteristics away from the default characteristics that the browser supports. A: link {backgroundcolor: blue; color: white} A: visited {backgroundcolor: navy; color: gray} / : hover. : active, and : focus <STYLE> UL LI: hover {backgroundcolor: lightblue; color: black; } UL LI: active {backgroundcolor: navy; color: white; } INPUT[type=text]: focus {border: solid 1 px red; } </STYLE> -----------------------------/ : lang You can use this to set such things as quote marks so that they properly match the convention of the language, for example: <STYLE> HTML: lang(fr) {quotes: ‘<< ‘ ‘ >>’; } </STYLE> XML & CSS, by Dr. Khalil 19

Pseudo-Classes (Cont’d) / first-letter and first-line These pseudo-properties can be used to select the first displayed character and the first line in a given tag. <STYLE> P: first-letter {float: left; font-size: 48 pt; margintop: 20 px; } </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 These pseudo-properties exist primarily to add 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? Wherefore art thou, Romeo? </P> XML & CSS, by Dr. Khalil 20

External Styles in HTML / <LINK> / Can be used to load style sheets, for example: The @import Directive With @import, you can load in a style sheet from a <STYLE> block, or even from a different external style sheet, for example: <LINK type=“text/css” rel=“stylesheet” href=“mystylesheet. css”> One of the limitation of <LINK> is that it is only supported in the <HEAD> of an HTML document. <STYLE> @import url(notes. css) </STYLE> XML & CSS, by Dr. Khalil 21

CSS and XML / / / CSS provides a presentation layer that associates patterns of tags with some kind of media representation. The difference between CSS in HTML and in XML is very small. One of the primary differences is that the style attribute, the class attribute and the <STYLE> or <LINK> elements have no predefined meaning in XML. As a consequence, we have to assign styles through a different mechanism with XML – the <? xml-stylesheet ? > processing instruction. Another principal difference between the CSS generated in HTML and XML is that in XML there really is no need for the class attribute – the objects are already defined through the tags themselves. XML & CSS, by Dr. Khalil 22

External Style Sheets in XML / The ? xml-stylesheet processing instruction works with any style sheet format that is defined for XML, but in particular applies to CSS and XSL. It’s full syntax: <? xml-stylesheet type=mimetype href=stylesheet. URL? > / mimetype will most likely have the value “text/css” or “text/xsl”. / The ? xml-stylesheet processing instruction should be included after the XML declaration (<? xml version=“ 1. 0” … ? >) and before the first element of the XML document. XML & CSS, by Dr. Khalil 23

Creating an External Style Sheet in XML 1. Create an XML document (notes. Test 1. xml) which contains a number of different note notation. <? xml-stylesheet type=“text/css” href=“notes 1. css”? > <!-- notes. Test 1. xml --> <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. The document contains a reference to an XML style sheet notes 1. css, which is nearly identical to the HTML file notes. css. tip {margin-left: . 5 in; width: 250 px; border: solid 3 px black; position: relative; background-color: yellow{; resource {margin-left: . 5 in; width: 250 px; border: solid 3 px black; position: relative; backgroundcolor: green{; warning {margin-left: . 5 in; width: 250 px; border: solid 3 px black; position: relative; backgroundcolor: red{; XML & CSS, by Dr. Khalil 24

Creating an External Style Sheet in XML (Cont’d) 3. However, all three of these rules are essentially subclasses of note. It may be more advantageous to create an attribute for the note called something like type, which would codify the exact type of note that we are talking about (notes. Test 2. xml): <? xml-stylesheet type="text/css" href="notes 2. css"? > <!-- notes. Test 2. xml --> <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> 4. The CSS for this is something that can’t readily be expressed using the HTML notation. Fortunately, the CSS 2 specification includes a mechanism for referencing attributes – the bracket [ ] notation. With brackets you can either search to make sure that a given attribute exists for the specific element (i. e. , note[type]) or can match those tokens for which the attributes has a given value. note {margin-left: . 5 in; width: 250 px; border-width: 3 px; border-style: outset; border-color: blue; position: relative; background-color; light. Blue{; note[type="tip"] {background-color: yellow; bordercolor: yellow{; note[type="resource"] {background-color: green; border-color: green{ note[type="warning"] {background-color: red; bordercolor: red{; </document> XML & CSS, by Dr. Khalil 25

Internal XML Cascading Style Sheets / 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 processing instruction, for example: <? xml-stylesheet type=“text/css” href=“#my. Stylesheet”? > <document> <st id=“my. Stylesheet”> title {font-size: 24 pt; display: block; } P {font-size: 11 pt; display: block; } P: first-letter {float: left; font-size: 36 pt; } st {display: none} <!-- this means that the st element will not be displayed --> 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> XML & CSS, by Dr. Khalil 26

CSS and Media Representation / / Ø Ø Ø Ø Ø The ultimate direction of both CSS and XSL is to replace the way that we represent any sort of document structure. CSS 2 can potentially apply to many more media than simply web pages: all. The style property applies to all media types aural. Intended for speech synthesizers braille. Intended for Braille tactile feedback devices handheld. Intended for handheld devices embossed. Intended for paged Braille printers print. Intended for printing to an opaque page, for example paper projection. Intended for projection to a screen (such as slideshow) screen. Intended principally for color computer screens tty. Intended for fixed pitch printers and related character grid devices tv. Intended for use on a television screen XML & CSS, by Dr. Khalil 27

The @media directive / / 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. 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): <!– Notes. Media. css --> @media screen print { note {margin-left: -. 5 in; width: 250 px; border-width: 3 px; borderstyle: 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: Friend. Advice; } note[type=“resource”] {volume: soft; voice-family: Directions; } note[type=“warning”] {volume: loud; voice-family: Warning. Will. Robinson; } } XML & CSS, by Dr. Khalil 28

Media Groups / In addition to the media type, we can also specify media groups, as follows: Ø continuous or paged. 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. visual, aural, or tactile. The medium is either concentrated in a visual display (a printed page or web page, for example), an aural display (a speech synthesizer) or a tactile display (a Braille reader) grid or bitmap. The medium either consists of a fixed width set of characters (such as a teletype machine) or can render graphics through a painted bitmap. interactive or static. The medium either allows interaction (such as a computer display) or doesn’t (such as a printed page). all. Includes all media types. @media paged, visual, bitmap, interactive { note {margin-left: -. 5 in; border: solid 2 px black; position: relative; } note[type=“tip”] {border: solid 1 px black; } note[type=“resource”] {border: dashed 1 px black; } note[type=“warning”] {border: solid 5 px black; } XML & CSS, by Dr. Khalil 29

The Box Model / / / CSS makes use of what’s called a “Box” Model, which determines the way that information flows on the page. There are essentially two types of such boxes – inline elements and block elements. When defining CSS tags in XML, you need to explicitly declare whether the tag refers to a block or an inline element, which is done through the display property. para (display: block; color: black; } comment {display: inline; color: gray; fontsize: 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> XML & CSS, by Dr. Khalil 30

The Display Properties / inline Content assumes the smallest possible size, with additional elements flowing automatically in line with the current element when possible. / block Content fills the extent of the flow boundaries, and that content always starts as part of a new flow region (for example by starting on the next line of text). / none Indicates that the contents are not rendered to the output canvas / inherit The element inherits the style attribute of the object’s immediate container. / list-item The item is treated as an element in a list. / run-in The contents are essentially treated as belonging to the next block of text encountered. / compact The contents are a display-type-box, but occupy the smallest area possible. / marker The contents are to be treated as a marker or bullet. XML & CSS, by Dr. Khalil 31

The Display Properties (Cont’d) / table The contents are displayed as if in a table. / inline-table Indicates a table that is contained as part of the flow. / table-rowgroup Contains all of the regular rows (those not part of the column headers. / table-header Contains all of the header elements in the table (such as column -group heads). / table-footer Contains all of the footer elements in a table. -group / table-row Contains a standard row in a table. / table-cell Contains a standard cell from a row in a table. / table-caption Contains a caption that is associated with the table. XML & CSS, by Dr. Khalil 32

Example: Working With Display (midnight. Rain. xml) <? xml-stylesheet type="text/css" href="#docstyle"? > <!-- Midnight. Rain. xml --> <document> <style id="docstyle"> style {display: none; } head {display: block; } title {display: block; font-size: 24 pt; } author {display: block; font-size: 18 pt; } email {display: none; } body {display: block; font-size: 10 pt; } para {font-size: 11 pt; display: block; } </style> <head> <title>Midnight Rain</title> <author>Kurt Cagle</author> <email>cagle@olywa. net</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, 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> XML & CSS, by Dr. Khalil 33

Example: Working With Display (midnight. Rain. xml) / / Nature of display is not uniform across browsers – IE and Opera, for example, an element that has display set to block within another element with display set to none will simply not appear. 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 appear: <style id="docstyle"> style {display: none; } head {display: block; } title {display: block; font-size: 24 pt; } author {display: block; font-size: 18 pt; } email {display: none; } body {display: block; font-size: 10 pt; } para {font-size: 11 pt; display: block; } </style> XML & CSS, by Dr. Khalil 34

Setting Colors / In CSS, you create rectangular blocks that had specific colors (or background-images) within the document 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 same way by adding these attributes to style sheets: < style> H 1 {color: red; background-color: white; } </style> XML & CSS, by Dr. Khalil 35

Building Borders / / / Ø Ø Ø Ø Ø Borders can be used to provide a number of useful special effects. In CSS, each border supports three distinct properties: style, width, and color. The three properties can be set up by a single tripled attribute, as: P {border: solid 5 px red; } Style lets you change the visual appearance of the border, with possible values including: solid (a single solid line) double (two concentric lines of least three pixels width) inset (a border where the upper and left hand sides are darker than the bottom and right hand sides) outset (the inverse of inset) groove (a border that appears incised around the container) ridge (a border that’s excised around the container) dotted (a border consisting of alternating dots and spaces) dashed (a border consisting of alternating dashes and spaces) none (turns bordering off) XML & CSS, by Dr. Khalil 36

Example: Building Borders in HTML (borders. html) XML & CSS, by Dr. Khalil 37

Example: Building Borders in XML (borders. xml) <? xml-stylesheet internalstyles"" ? > <? xml-stylesheet type="text/css"" href="#internalstyles <document> <style id="internalstyles "> id="internalstyles"> annotation {border: solid 3 px green; font-size: 12 pt; display: block; border-left: none; border-right: none; font-family: Arial; } annotation {border: solid 3 px green; font-size: 12 pt; display: block; border-left: none; border-right: none; font-family: Arial} para {font-size: 11 pt; display: block; } style {display: none; } </style> <para >The rain spat against the apartment's window pane, <para>The 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, Go Away, " she sang listlessly, though as <para>"Rain, 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 > herself. </para> <annotation> <para>Rain is a metaphor throughout this story as an expression of both elemental force and chaotic emotions. </ para> </annotation> <para >She didn't want to do the script, not really - the <para>She scripts that she received anymore were hardly star makers, though her star had risen fairly high once, only to be knocked off course by the. . . ah, what was the term the publicist had used. . . the incident, that was it. </para > it. </para> </document> XML & CSS, by Dr. Khalil 38

Background Images / / Images are a regular staple of web pages, but incorporating images is considerably more complex in XML documents. The background-image style attribute offers one way of setting an image, for example, the following style samples will load a graphic called mybackground. jpg from the same folder as the page, from different folder on the same server, and from a different server: <style> <!-- to load from the same folder as the source XML document --> body {background-image: url(mybackground. jpg); } <!-- to load from a subordinate folder called images relative to the source XML document --> body {background-image: url(images/mybackground. jpg); } <!-- to load from a different web server --> body {backgroundimage: url(http: //www. myserver. com/images/mybackground. jpg); background-color: blue; } </style> XML & CSS, by Dr. Khalil 39

Repeating Background Images / Repetition is specified by using the various repeat properties. These control the tiling behavior of background graphics: Ø repeat (repeats the indicated graphic both horizontally and vertically, the default) repeat-x (repeats the indicated graphic both horizontally, but not vertically) repeat-y (repeats the indicated graphic vertically but not horizontally) no-repeat (doesn’t repeat the graphic at all) Ø Ø Ø / So, if we wanted to have our strip repeat vertically along the left side of the page, we’d set the style as: {background-image: url(mybackground. jpg); background-repeat: repeat-y; } XML & CSS, by Dr. Khalil 40

Positioning Background Images / There are several different ways that you can position the image: Ø percentage, e. g. , 40% 60% (sets the graphic so that it starts 40% of the width from the left and 60% of the height from the top) length, e. g. , 50, 75 (positions the left coordinate at 50 pixels and the top of 75 pixels) top center bottom (sets the graphic flush to the top, centered vertically, or flush to the bottom of the document) left center right (sets the graphic flush to the left, centered vertically, or flush to the right of the document) Ø Ø Ø / 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: <h 1 style=“background-url(mybackground. jpg); {background-repeat: norepeat; background-position: top center; ”>Here’s a test. </h 1> XML & CSS, by Dr. Khalil 41

Specifying Multiple Background Properties / Ø Ø Ø The main background properties are: background-color (which sets the color) background-image (sets the image) background-repeat (indicates how the background tiles) background-attachment (indicates whether the background scrolls or remains fixed) background-position (the location of the upper-left hand point of the background) / Example: <h 1 style=“background: blue url(mybackground. jpg) no-repeat scroll top center”>Here’s a test. </h 1> XML & CSS, by Dr. Khalil 42

Creating XML Web Page Background (rain. With. BG. xml) <? xml-stylesheet internalstyles"" ? > <? xml-stylesheet type="text/css"" href="#internalstyles <!-- rain. With. BG. xml --> <document> <style id="internalstyles "> id="internalstyles"> annotation {border: solid 3 px green; font-size: 12 pt; display: block; border-left: none; border-right: none; fontfamily: Arial} para {font-size: 11 pt; display: block; } style {display: none; } background {background-image: url(BGTile. jpg ); {background-image: url(BGTile. jpg); background-repeat-x: no; background-repeat-y: yes; width: 128 px; height: 100%; position: absolute; left: 0 px; top: 0 p x; } body {margin-left: 136 px; position: absolute; } </style> <background/> <body> <para >The rain spat against the apartment's window pane, <para>The 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, Go Away, " she sang listlessly, though as <para>"Rain, 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 > herself. </para> <annotation> <para >Rain is a metaphor throughout this story as an <para>Rain expression of both elemental force and chaotic emotions. </ para> </annotation> <para >She didn't want to do the script, not really - the <para>She scripts that she received anymore were hardly star makers, though her star had risen fairly high once, only to be knocked off course by the. . . ah, what was the term the publicist had used. . . the incident, that was it. </ para> </body> </document> XML & CSS, by Dr. Khalil 43

Positioning Schemes / CSS identifies four distinct types of positioning (which affects the flow) – static, relative, absolute, and fixed: Ø Static Position – is one in which the position of the content is controlled by the browser, it’s the default. Relative Position – is similar to the static position except that the top and left values can be overridden by code or CSS properties. Absolute Position – it’s opposite to the relative position. The origin (the starting position both horizontally and vertically) for a relatively positioned item is its “nornal” position in the flow. Fixed Position – it uses the absolute model, but it won’t change the position if the viewport (the browser display window, for example) changes. Ø Ø Ø XML & CSS, by Dr. Khalil 44

Positioning Schemes (Cont’d) / / Ø Ø Once you set up the positioning mode, you can position an element from the top, bottom, left or right. CSS distinguishes between two types of coordinates: absolute coordinates – ones where the lengths correspond to standardized lengths such as inches or centimeters. relative coordinates – such as pixels or ems that are measured as part of a device specification (like the resolution of a computer screen or the height of a font character). XML & CSS, by Dr. Khalil 45

Positioning Properties / Width and Height / Overflow – defines what happens when the contents of a given field exceed the boundaries of a given element. It takes one of five distinct values – visible , hidden, v scroll, auto, or inherit. / Clip – can work in conjunction with the overflow property. / Floats – can take one of three values – left, right, or none – and works by forcing the element that has this CSS property to “float” in the direction specified as far left or right as it can. XML & CSS, by Dr. Khalil 46

Example: Simple Drop Caps (Drop. Caps. html) <HTML> <HEAD> <TITLE>Drop. Caps</TITLE> <STYLE> P {border: solid 5 px #C 0 C 0 C 0; } </STYLE> </HEAD> <BODY> <H 3>Drop Caps</H 3> <STYLE> P: first-letter {float: left; font-size: 36 pt; font-family: Times Roman; } </STYLE> <BODY> <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" length, which describes a margin above characters for handling parts of the character glyph that extends beyond the nominal top of the line. </P> </BODY> </HTML> XML & CSS, by Dr. Khalil 47

Example: Sidebars (sidebars. xml) <? xml-stylesheet internalstyles"? > <? xml-stylesheet type="text/css"" href="#internalstyles <!-- sidebars. xml --> <document> <style id="internalstyles "> id="internalstyles"> style {display: none; } document {display: block; } heading {display: block; font-size: 24 pt; font-family: Times Roman; } p {display: block: font-size: 11 pt; position: relative; } sidebar {display: block; float: right; width: 250 px; border: inset 3 pt gray; background-color: #C 0 C 0 FF; padding: 3 px; } sidebar heading {display: block; font-size: 18 pt; font-family: Helvetica; } sidebar p {display: block; font-size: 9 pt; font-family: Times Roman; } </style> <heading>CSS helps with XML Page Layout</heading> <sidebar> <heading>A Few Tips</heading> <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 Explorer provides an implementation that is similar, but not identical, to the CSS 2 specification. </p> </sidebar> <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 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 any interface. </p> </document> XML & CSS, by Dr. Khalil 48

Lists and Tables / In HTML lists and tables are defined by s specific set of elements (such as <LI < >, <UL < > and <OL < > tags for lists and <TABLE >, <TR < < >, <TD < >, and so forth for tables). / However, the problem with any of these elements is that they’re essentially display-oriented rather than logical structure. / The CSS 2 specification attempts to fix this problem somewhat; it actually defines CSS property equivalents to the HTML table and list tags. XML & CSS, by Dr. Khalil 49

Example: Lists (employees. xml) <? xml-stylesheet type="text/css" href="cssemployeelist. css"? > <employees> <employee id="101"> <first. Name>Jean</first. Name> <last. Name>Janus</last. Name> <title>President</title> <date. Started>1997 -11 -12</date. Started> <salary>324021</salary> <department>Administration</department> <image>images/jjanus. jpg</image> </employee> <employee id="102"> <first. Name>Kitara</first. Name> <last. Name>Milleaux</last. Name> <title>Chief Executive Officer</title> <date. Started>1997 -08 -12</date. Started> <salary>329215</salary> <department>Administration</department> <image>kmilleaux. jjpg</image> </employee> <employee id="103"> <first. Name>Shelley</first. Name> <last. Name> > last. Name>Janes</last. Name <title>Chief Financial Officer</title> <date. Started >1998 -03 -16</date. Started> > <date. Started>1998 -03 -16</ <salary>232768</salary> <department>Finance</department> <image>images/sjanes. jpg </image> <image>images/sjanes. jpg</image> </employee> <employee id="104"> <first. Name >Marissa</first. Name> > <first. Name>Marissa</ <last. Name >Mendez</last. Name> > <last. Name>Mendez</ <title>Chief Technical Officer</title> <date. Started >1998 -09 -16</date. Started> > <date. Started>1998 -09 -16</ <salary>242768</salary> <department>Information Technologies</department> <image>images/mmendez. jpg </image> <image>images/mmendez. jpg</image> </employee> <employee id="105"> <first. Name >Kace</ first. Name> > <first. Name> Kace</first. Name <last. Name >Juriden</ last. Name> > <last. Name> Juriden</last. Name <title>Vice President, Marketing</title> <date. Started >1998 -11 -03</date. Started> > <date. Started>1998 -11 -03</ <salary>210359</salary> <department>Marketing</department> <image>images/kjuriden. jpg </image> <image>images/kjuriden. jpg</image> </employee> <!-- more employees, as required --> </employees> XML & CSS, by Dr. Khalil 50

Cssemployeelist. css <!-- cssemployeelist. css --> employees {display: block; visibility: visible; } employee {display: list-item; list-style-type: disc; } last. Name {display: inline; font-size: 12 pt; } first. Name {display: inline; font-size: 12 pt; } title {display: none; font-size: 12 pt; } date. Started {display: none; font-size: 12 pt; } salary {display: none; font-size: 12 pt; } department {display: none; font-size: 12 pt; } image {display: none; } / / We could set up an external style sheet (cssemployeelis. css) that will display a list of each employee, first name and last name. Note how we use the display: list-item property for the <employee > element. < This indicates that the employee node marks the scope of the list item, and that any child of that element is considered to ba a part of that list item in turn. XML & CSS, by Dr. Khalil 51

Working with Lists in XML / List items have three characteristics which define them: Ø list-style-type – describes the bullet character (disc, circle, square, decimal, …etc. ). list-style-position – tells the browser or printer whether to display the bullet indicator offset from the block of the list element (outside, the default) or inline to the element (inside ), in other ( words: Ø This is a list element for which the list-style-position is outside. • This is a list element for which The list-style-position is inside. • Ø list-style-image – used to specify a specific bullet graphic to replace the system graphics, for example: <point {list-style-image: url(image/hand. gif); list-style-type: square; } XML & CSS, by Dr. Khalil 52

Supporting Tables in CSS / The CSS 2 specification introduces a number of table properties that can let you associate a given table-like characteristic to a data structure: / table The contents are displayed as if in a table. / inline-table Indicates a table that is contained as part of the flow. / table-rowgroup Contains all of the regular rows (those not part of the column headers. / table-header Contains all of the header elements in the table (such as column -group heads). / table-footer Contains all of the footer elements in a table. -group / table-row Contains a standard row in a table. / table-cell Contains a standard cell from a row in a table. / table-caption Contains a caption that is associated with the table. XML & CSS, by Dr. Khalil 53

Example: Displaying the Employees in a Table <!-- cssemployeelist. css --> employees {display: table; } employee {display: table-row; } last. Name {display: table-cell; } first. Name {display: table-cell; } title {display: table-cell; } date. Started {display: table-cell; } salary {display: table-cell ; } department {display: table-cell; } image {display: none; } / The CSS 2 table property and its associated subproperties (such as tablerow or table-cell) are not supported by IE in any version. As such, to properly display the table contents here you’d need to transform the results into HTML using XSLT, using XSLT rather than relying on CSS to indicate table information. XML & CSS, by Dr. Khalil 54

Text and Font Manipulation font-size – 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 for it (such as small, medium, large) or relative terms (such as larger or smaller). It’s general syntax: font-size: absolute size | length | percentage Examples: body {font-size: 12 pt; } body note {font-size: 75%; } Ø font-style and font-weight – appear to give us the same capabilities as italic <I> or bold <B> respectively. The general syntax: font-style: normal | italic | oblique Font-weight: light | normal | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Ø XML & CSS, by Dr. Khalil 55

Text and Font Manipulation (Cont’d) Ø font-family and font-face – basically describes the characteristics that make a font unique. It’s general syntax: font-style: familyname[, familyname] Examples: style=“font-family: ’new century schoolbook’, serif; ” font-family: Engraves, ’Zapf Chancery’, Fantasy; Ø @font-face – provides a means to download font resource by providing a URL to the resource. It’s general syntax: @font-face {font-family: familyname; src: url(url); } XML & CSS, by Dr. Khalil 56

Text and Font Manipulation (Cont’d) Ø font-variant – gives small caps. It’s general syntax: font-variant: normal | small-caps Ø font-decoration – is useful for handling underlining and strikthrough. It’s general syntax: font-decoration: none | underline | overline | line-through | blink Ø text-transform – basically will set a string selection to initial caps, all caps, or all lowercase characters. It’s general syntax: font-transform: capitalize | uppercase | lowercase | none XML & CSS, by Dr. Khalil 57

Indentation, Padding and Margins Ø Text-indent – lets you specify the amount of space that the first line indents. It’s general syntax: text-indent: length | percentage Ø margin – provides the amount of space between a block element and the surrounding elements. It’s general syntax: margin: length | percentage | auto Ø padding – provides the amount of space between a block element and the elements that it contains. It’s general syntax: padding: length | percentage | auto XML & CSS, by Dr. Khalil 58

Alignment Ø text-align – lets you set the alignment characteristics 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 or subscript. It’s general syntax: vertical-align: sub | super XML & CSS, by Dr. Khalil 59

Aural Style Sheets / The CSS 2 specification was basically built around the integration of various media into the web browser. / The ability to have your web page read aurally can prove useful in many situations, for example: Ø Ø Ø Automobile and cell-phone access to your web sites. Sites that can be accessed by sight-impaired people. Kiosks that use a web page base and allow us to listen to one site in the background while viewing another in the foreground. XML & CSS, by Dr. Khalil 60

Example: Aural Style Sheets / @media visual { document {position: absolute; left: 0 px; top: 0 px; backgroundimage(my. Background. jpg); } title (display: block; font-size: 24 pt; font-family: Helvetica; } author (display: block; font-size: 15 pt; font-family: Helvetica; } para (display: block; font-size: 10 pt; font-family: Times Roman; } } / @media aural { document {play-during: url(background. Music. mp 3 repeat mix; } title (voice-family: ’James Earl Jones’ male; volume: medium; } author (voice-family: ’James Earl Jones’ male; volume: soft; } para (voice-family: ’Kelly Mc. Gillis’ female; volume: medium; } } XML & CSS, by Dr. Khalil 61

Thank you XML & CSS, by Dr. Khalil 62