Cascading Style Sheets CSS

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

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

XML Content/Presentation Paradigm • The Content/Presentation paradigm is one of the most pervasive patterns in XML. • At its root, the concept means that you separate data from the way that the data is displayed. • 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

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

W3C and CSS • The W3C 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. • CSS1 defined the association between specific CSS property names and their visual appearance. • CSS2, 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 CSS2 Specification (http://www.w3.org/TR/1998/REC-CSS2). XML & CSS, by Dr. Khalil

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

The style Attribute • 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 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

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 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: <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> XML & CSS, by Dr. Khalil

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

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

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> XML & CSS, by Dr. Khalil

<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 Overriding Styles with Style Element XML & CSS, by Dr. Khalil

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> A Class Act in HTML XML & CSS, by Dr. Khalil

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:-.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> A Class Act in HTML (Cont’d) XML & CSS, by Dr. Khalil

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> XML & CSS, by Dr. Khalil

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> XML & CSS, by Dr. Khalil

<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 – inheritselector2.html XML & CSS, by Dr. Khalil

<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> Inheriting Selectors (inheritselector3.html) XML & CSS, by Dr. Khalil

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-style-image: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 {background-color:blue;color:white} A:visited {background-color:navy;color:gray} :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 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> Pseudo-Classes XML & CSS, by Dr. Khalil

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: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 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? Romeo? Wherefore art thou, Romeo?</P> Pseudo-Classes (Cont’d) XML & CSS, by Dr. Khalil

<LINK> Can be used to load style sheets, 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. 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: <STYLE> @import url(notes.css) </STYLE> External Styles in HTML XML & CSS, by Dr. Khalil

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

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=stylesheetURL?> • 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

Create an XML document (notesTest1.xml) which contains a number of different note 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> The document contains a reference to an XML style sheet notes1.css, which is nearly identical to the HTML file 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 XML & CSS, by Dr. Khalil

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 liketype, which would codify the exact type ofnote that we are talking about (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> The CSS for this is something that can’t readily be expressed using the HTML notation. Fortunately, the CSS2 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:.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;} Creating an External Style Sheet in XML (Cont’d) XML & CSS, by Dr. Khalil

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=“#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> XML & CSS, by Dr. Khalil

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. • CSS2 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

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): <!– 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;} } XML & CSS, by Dr. Khalil

Media Groups • In addition to the media type, we can also specify media groups, as follows: • continuous orpaged. 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:-.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;} XML & CSS, by Dr. Khalil

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;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> XML & CSS, by Dr. Khalil

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

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-row- Contains all of the regular rows (those not part of the column group 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

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>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, 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

Example: Working With Display (midnightRain.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:24pt;} author {display:block;font-size:18pt;} email {display:none;} body {display:block;font-size:10pt;} para {font-size:11pt;display:block;} </style> XML & CSS, by Dr. Khalil

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> H1 {color:red;background-color:white;} </style> XML & CSS, by Dr. Khalil

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 5px 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

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

<?xml-stylesheet type="text/css" href="#internalstyles" ?> <document> <style id="internalstyles"> annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none; font-family:Arial;} annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none; font-family:Arial} para {font-size:11pt;display:block;} style {display:none;} </style> <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 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> <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 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> </document> Example: Building Borders in XML (borders.xml) XML & CSS, by Dr. Khalil

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>  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> XML & CSS, by Dr. Khalil

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

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: <h1 style=“background-url(mybackground.jpg);{background-repeat:no-repeat;background-position:top center;”>Here’s a test.</h1> XML & CSS, by Dr. Khalil

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: <h1 style=“background:blue url(mybackground.jpg) no-repeat scroll top center”>Here’s a test.</h1> XML & CSS, by Dr. Khalil

<?xml-stylesheet type="text/css" href="#internalstyles" ?>  <document> <style id="internalstyles"> annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none;font-family:Arial} annotation {border:solid 3px green;font-size:12pt; display:block;border-left:none;border-right:none;font-family:Arial} para {font-size:11pt;display:block;} style {display:none;} background {background-image:url(BGTile.jpg); background-repeat-x:no;background-repeat-y:yes; width:128px;height:100%;position:absolute;left:0px;top:0px;} body {margin-left:136px;position:absolute;} </style> <background/> <body> <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> <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 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> Creating XML Web Page Background (rainWithBG.xml) XML & CSS, by Dr. Khalil

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

Positioning Schemes (Cont’d) • Once you set up the positioning mode, you can position an element from 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

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, 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

Example: Simple Drop Caps (DropCaps.html) <HTML> <HEAD> <TITLE>DropCaps</TITLE> <STYLE> P {border:solid 5px #C0C0C0;} </STYLE> </HEAD> <BODY> <H3>Drop Caps</H3> <STYLE> P:first-letter {float:left;font-size:36pt;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

Example: Sidebars (sidebars.xml) <?xml-stylesheet type="text/css" href="#internalstyles"?>  <document> <style id="internalstyles"> style {display:none;} style {display:none;} document {display:block;} heading {display:block;font-size:24pt;font-family:Times Roman;} p {display:block:font-size:11pt;position:relative;} sidebar {display:block;float:right;width:250px;border:inset 3pt gray; background-color:#C0C0FF;padding:3px; } sidebar heading {display:block;font-size:18pt;font-family:Helvetica;} sidebar p {display:block;font-size:9pt;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 CSS2 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

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 CSS2 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

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

Cascading Style Sheets CSS

Cascading Style Sheets CSS

Presentation Transcript

CSS : Cascading Style Sheets

CSS - Cascading Style Sheets

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets CSS

CSS Cascading Style Sheets

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

CSS: Cascading Style Sheets

CSS - cascading style sheets