XML and CSS
 | CSS = Cascading Style Sheet |
| CSS is the W3C
standard for controlling the visual appearance of web pages (HTML) |
| Three basic types of style sheets: |
- Inline - via the style attribute; tags are
modified on a case-by-case basis throughout a document. e.g., <h1
style="color: blue; font-style: italic">Text </h1>
- Document-level - styles are defined by a
<style> tag in the head.
- External - link tag is used to identify a
separate file with style information.
| Style syntax:
 | 3 parts of a style "rule" -
- tag selector (e.g., H1, P)
- curly brace {}
- semi-colon separated list of one or more
style property:value declarations (e.g., align:center)
|
|
| They are not case sensitive. |
| e.g., tag-selector {prop1: value ; prop2: value1
value2 value3; ...} |
| Multiple tag selectors can be used. e.g., H1,
H2, H3 {text-align: center} |
| Style classes -
| Regular - based on
primary document objects, e.g., H1, H2, P , specific tags are
identified, e.g., P.abstract {font-style: italic} ....
<p class=abstract> |
| Generic - create a generic class that can be used
anywhere., e.g. .italic {font-style:
italic} .... <p class=italic> |
|
| Style properties - 53 properties that can be used
control how the browser presents content. Uses property values (5
types): keywords, length values, percentage values, URLs, and colors. |
CSS Style Attributes
| The following are typical of CSS formatting |
| Fonts
| family (e.g., font-family:Arial) |
| size, font-size: 24 |
| style, font-style: italic |
| weight, font-weight: bold |
| text decoration, text-decoration: underline |
| color, color: red ... color:#040588 ...
color:rgb(255,255,255) |
|
| Text
| word spacing, word-spacing: 10pt |
| letter spacing, letter-spacing: 3pt |
| alignment, text-align: justify |
|
Using CSS with XML...
| Use the following... |
<?xml version='1.0'?>
<?xml-stylesheet href='cssfilename.css' type='text/css'?>
<element>
| Generally...
| All elements should be defined in the stylesheet. |
| Be careful to verify the operation of the CSS to catch conflicting
styles |
|
| Examples... |
books
{
display: block;
margin-left: 1%;
font: normal normal normal 10 san-serif;
border: solid 5px;
padding: 4 px;
}
publishers
{
display: block;
margin-left: 3%;
font: normal normal normal 10 san-serif;
border: solid 4px;
padding: 4 px;
}
titles
{
display: block;
margin-left: 5%;
font: normal normal normal 10 san-serif;
border: solid 3px;
padding: 4 px;
}
|