Cascading Style Sheets
-
Upload
aspen-terrell -
Category
Documents
-
view
23 -
download
0
description
Transcript of Cascading Style Sheets
![Page 1: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/1.jpg)
Cascading Style Sheets
Eugenia FernandezIUPUI
![Page 2: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/2.jpg)
CSS Purpose CSS allow you to specify the style
in which your XML elements are displayed.
CSS were originally designed for use with HTML, but work for XML as well.
Supports the separation of structure from presentation.
![Page 3: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/3.jpg)
CSS Versions CSS1
Adopted by W3C in December 1996 CSS2
Became a W3C Recommendation in May 1998
Adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
CSS3 Currently under development
![Page 4: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/4.jpg)
Browser Support for CSS Currently most browsers support
CSS1. Few support CSS2. For a review of what is supported
by each browser, go to WebReview.coms Style Sheet Reference Guide
![Page 5: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/5.jpg)
Creating a Stylesheet A stylesheet is a text document
with a .css extension that contains a list of style rules.
You can create a stylesheet using Notepad FrontPage Visual InterDev (GUI Interface)
![Page 6: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/6.jpg)
Linking a Stylesheet
To attach a stylesheet to an XML document, add the following processing instruction:
<?xml-stylesheet type="text/css" href="employees.css"?>
![Page 7: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/7.jpg)
CSS Syntax A style sheet is made up of style
rules. Each style rule has this syntax:
selector { declaration } The selector identifies which XML
element the rule applies to. The declaration specifies how the
element’s content is to be displayed.
![Page 8: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/8.jpg)
Declarations A declaration has two parts:
a property a value
e.g. color: red; font-size: 14pt; Properties and values are separated
by : Declarations end with a ; Valid properties and values are given
in the CSS specification.
![Page 9: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/9.jpg)
Flow & Box Objects A browser normally places text and
elements on the screen in the order they appear in the XML document. These elements flow from the top of the screen to the bottom.
Every element has a rectangular box drawn around it. The content of the element is displayed in its box.
![Page 10: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/10.jpg)
Inheritance Flow objects inherit properties from their
parents. XML documents have a hierarchical
structure. Any property specified for a parent element
is automatically inherited by its child elements.
Rules attached to client elements override inherited properties, i.e., more specific rules override more general rules.
![Page 11: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/11.jpg)
Box Properties
margin (transparent)
padding
element contents
border
element width
box width
![Page 12: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/12.jpg)
Types of Boxes Block
has line break before and after it, i.e. appears on its own line
Inline no line breaks, i.e., appears in single
line
![Page 13: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/13.jpg)
Box Properties display margin padding border
border-style, border-width, border-color width height
Useful for images, but can be used with text
![Page 14: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/14.jpg)
Color & Background Properties
foreground color background color background image
![Page 15: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/15.jpg)
Font Properties font-style font-variant: small-caps font-weight font-size font-family
list several in case not available on the client, separate by commas
font shorthand for font-style font-variant font-
weight font-size, line-height and font-family, in that order.
![Page 16: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/16.jpg)
Text Properties text-align vertical-align
text-indent line-height
word-spacing addition to the default space between words
letter-spacing addition to the default space between
characters text-decoration
underline | overline | line-through | blink text-transform
capitalize | uppercase | lowercase | none
![Page 17: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/17.jpg)
Property Values: Length Used for widths, heights, and sizes
em: relative height of element’s font ex: relative to height of letter “x” px: pixels in: inches cm: centimeters mm: millimeters pt: points, where point is 1/72 inch pc: picas, 1 pica = 12 points
![Page 18: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/18.jpg)
Property Values: Color Hexadecimal RGB value
e.g. #00FF00 RGB values with integers or %
Integer range 0-255 e.g., rgb(0,0,255)
Percentage range 0%-100% e.g., rgb(0%, 0%, 255)
Keywords e.g., black, maroon, green, navy, silver, red,
lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua
![Page 19: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/19.jpg)
Property Values Percentage
Used for width, height and position Format
50%
URL Used for images Format
url(image.gif)
![Page 20: Cascading Style Sheets](https://reader038.fdocuments.in/reader038/viewer/2022110100/56812a51550346895d8d9a85/html5/thumbnails/20.jpg)
The End