View
214
Download
0
Category
Preview:
Citation preview
Creating the Presentation LayerDECO 3001 Tutorial 2 – Style
Presented by Ji Soo Yoon26 February 2004
Slides adopted from http://www.cis.upenn.edu/~matuszek/cit597-2002/Lectures/css.ppt, http://darkwing.uoregon.edu/~anthonym/cis125h, http://www.w3schools.com/xhtml/default.asp, http://escholarship.cdlib.org/rtennant/presentations/2004cil/xhtml, http://wally.cs.iupui.edu/n241-new/ and Beginning XHTML ©2000 Wrox Press
Overview
Style Sheets have been used for years in Desktop Publishing to apply typographical styles and spacing to printed media
Cascading Style Sheets (CSS) provides this functionality (and much more) for web developers
CSS is a flexible, cross-platform, standards-based language developed by the W3C
We will be concentrating on using CSS for formatting – a feature that is well-supported by browsers
Advantages
Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document and linked to from the web page
Potentially smaller documents
No need for <font> tags
Easier site maintenance
Can be used for both HTML and XML documents
Disadvantage
CSS technology is not yet uniformly supported by browsers Currently this is a major problem This will be less of an issue in the future
as more browsers that comply with the standards are developed
CSS Syntax
Style sheets are composed of "Rules" that describe the styling to be applied
CSS syntax is very simple Just a file containing “rules” – a list of selectors (to choose
tags) and descriptors (to tell what to do with them)
A CSS file is just a list of these selector/descriptor pairs Selectors may be simple HTML tags or XML tags, but
CSS also defines some ways to combine tags Descriptors are defined in CSS itself, and there is quite a
long list of them
CSS Syntax 2
The general syntax is: selector {property: value} or selector, ..., selector {
property: value; . . . property: value}
where selector is the tag to be affected (the selector is case-
sensitive if and only if the document language is case-sensitive)
property and value describe the appearance of that tag Spaces after colons and semicolons are optional A semicolon must be used between property:value pairs, but
a semicolon after the last pair is optional
CSS Examples
h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */
p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */}
a:link {color:darkred} /* an unvisited link */
a:visited {color:darkred} /* a link that has been visited */
a:active {color:red} /* a link now being visited */
a:hover {color:red} /* when the mouse hovers over it */
Selectors
As we have seen, an XML or HTML tag can be used as a simple element selector: body { background-color: #ffffff }
You can use multiple selectors: em, i {color: red}
You can repeat selectors: h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} When values disagree, the last one overrides any earlier ones
The universal selector * applies to any and all elements: * {color: blue} When values disagree, more specific selectors override general ones (so
em elements would still be red)
Selectors 2
A descendent selector chooses a tag with a specific ancestor: p code { color: brown } selects a code if it is somewhere inside a paragraph
A child selector > chooses a tag with a specific parent: h3 > em { font-weight: bold } selects an em only if its immediate parent is h3
An adjacent selector chooses an element that immediately follows another: b + i { font-size: 8pt }
Example: <b>I'm bold and</b> <i>I'm italic</i> Result will look something like: I'm bold and I'm italic
Selectors 3
A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value: Syntax: element[attribute] { ... } Example: table[border] { ... }
An attribute value selector allows you to choose elements that have a given attribute with a given value: Syntax: element[attribute="value"] { ... } Example: table[border="0"] { ... }
The Class Attributes
The class attribute allows you to have different styles for the same element In the style sheet:
p.important {font-size: 24pt; color: red}p.fineprint {font-size: 8pt}
In the XHTML:<p class="important">The end is nigh!</p> <p class="fineprint">Offer ends 1/1/97.</p>
To define a selector that applies to any element with that class, just omit the tag name (but keep the dot): .fineprint {font-size: 8pt}
Pseudo-Classes
Pseudo-classes are elements whose state (and appearance) may change over time
Syntax: element:pseudo-class {...} :link
a link which has not been visited :visited
a link which has been visited :active
a link which is currently being clicked :hover
a link which the mouse is over (but not clicked)
Pseudo-classes are allowed anywhere in CSS selectors
Note: XML doesn’t really support hyperlinks yet
Pseudo-Elements
Pseudo-elements describe “elements” that are not actually between tags in the XML document
Syntax: element:pseudo-class {...} first-letter the first character in a block-level element first-line the first line in a block-level element (depends on the
browser’s current window size)
Especially useful for XML (but not implemented in Internet Explorer): before adds material before an element
Example: author:before {content: "by "} after adds material after an element
The ID Attributes
The id attribute is defined like the class attribute, but uses # instead of . In the style sheet:
p#important {font-style: italic} or# important {font-style: italic}
In XHTML:<p id="important">
class and id can both be used, and do not need to have different names:<p class="important" id="important">
The <div> Tag
A container tag
Used to create a specially formatted division or area of a web page
Can be used to format that area and places a line break before and after the division.
Use the <div> tag when you need to format an area that is separated from the rest of the web page by line breaks <div> ensures there is a line break before and after
The <div> tag is also useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it
The <span> Tag
A container tag
The <span> tag will format an area on the page that is NOT physically separated from others by line breaks
Use the <span> tag if you need to format an area that is contained within another, such as within a paragraph
Types of CSS
Inline Styles Inline styles are coded in the body of the web page as an attribute of an
XHTML tag The style only applies to the specific element that contains it as an
attribute
Embedded Styles Embedded styles are defined in the header of a web page These style instructions apply to the entire web page document
External Styles External Styles are coded in a separate text file This text file is linked to the web page by using a <link> tag in the
header section
Imported Styles Imported Styles are similar to External Styles in that they are coded in a
separate text file They are not widely supported by browsers at this time
Inline Style Sheets
The STYLE attribute can be added to any HTML element: <html-tag style="property: value"> or <html-tag style="property: value;
property: value; ...; property: value">
Advantage: Useful if you only want a small amount of markup
Disadvantages: Mixes display information into HTML Clutters up HTML code Can’t use full range of CSS features
Inline Style Sheets 21 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.1: inline.html -->
6 <!-- Using inline styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Inline Styles</title>
11 </head>
12
13 <body>
14
15 <p>This text does not have any style applied to it.</p>
16
17 <!-- The style attribute allows you to declare -->
18 <!-- inline styles. Separate multiple styles -->
19 <!-- with a semicolon. -->
20 <p style = "font-size: 20pt">This text has the
21 <em>font-size</em> style applied to it, making it 20pt.
22 </p>
23
Embedded Style Sheets
Apply to an entire web page
In XHTML, within the <head> element: <style type="text/css"> <!-- CSS Style Sheet --></style>
Note: Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that don’t understand CSS
Embedded Style Sheets 21 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.2: declared.html -->
6 <!-- Declaring a style sheet in the header section. -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Style Sheets</title>
11
12 <!-- this begins the style sheet section -->
13 <style type = "text/css">
14
15 em { background-color: #8000ff;
16 color: white }
17
18 h1 { font-family: arial, sans-serif }
19
20 p { font-size: 14pt }
21
22 .special { color: blue }
23
24 </style>
25 </head>
26
27 <body>
28
29 <!-- this class attribute applies the .special style -->
30 <h1 class = "special">Deitel & Associates, Inc.</h1>
31
32 <p>Deitel & Associates, Inc. is an internationally
33 recognized corporate training and publishing organization
34 specializing in programming languages, Internet/World
35 Wide Web technology and object technology education.
36 Deitel & Associates, Inc. is a member of the World Wide
37 Web Consortium. The company provides courses on Java,
38 C++, Visual Basic, C, Internet and World Wide Web
39 programming, and Object Technology.</p>
40
41 <h1>Clients</h1>
42 <p class = "special"> The company's clients include many
43 <em>Fortune 1000 companies</em>, government agencies,
44 branches of the military and business organizations.
45 Through its publishing partnership with Prentice Hall,
46 Deitel & Associates, Inc. publishes leading-edge
47 programming textbooks, professional books, interactive
48 CD-ROM-based multimedia Cyber Classrooms, satellite
49 courses and World Wide Web courses.</p>
50
51 </body>
52 </html>
External Style Sheets
External Style Sheets are contained in a text file separate from the XHTML documents
Multiple web pages can link to the same external style sheet file
External Style Sheet text file is saved with the file extension ".css" and contains only style rules
Does not contain any XHTML tags
External Style Sheets 2
In XHTML, within the <head> element:<link rel=“stylesheet" type="text/css" href="Style Sheet URL">
As a PI in the prologue of an XML document:<?xml-stylesheet href="Style Sheet URL" type="text/css"?>
Note: "text/css" is the MIME type
External Style Sheets 3
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
3
4 a { text-decoration: none }
5
6 a:hover { text-decoration: underline;
7 color: red;
8 background-color: #ccffcc }
9
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
13
14 ul { margin-left: 2cm }
15
16 ul ul { text-decoration: underline;
17 margin-left: .5cm }
External Style Sheets 41 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.5: external.html -->
6 <!-- Linking external style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head>
14
15 <body>
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li>
24 <li>Whole wheat bread</li>
25 </ul>
26 </li>
27 <li>Rice</li>
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31
32 <p>
33 <a href = "http://www.food.com">Go to the Grocery store</a>
34 </p>
35
36 </body>
37 </html>
Imported Style Sheets
In XHTML, within the <head> element: <style type="text/css"> <!-- @import url(url without quotes); CSS Style Sheet --></style>
All @import statements must occur at the start of the style sheet
Order in which the style sheets are imported is important in determining how they cascade
Any rules specified in the style sheet itself override conflicting rules in the imported style sheets – cascading rule
Cascading Order
Styles will be applied to HTML in the following order:1. Browser default2. External style sheet3. Internal style sheet (inside the <head> tag)4. Inline style (inside other elements, outermost
first)
When styles conflict, the “nearest” (most recently applied) style wins
Cascading Order 2
External
StyleSheet
[call to external stylesheet]
[styles embedded inside the document]
XHTML File
1)
2)
Generalized order of precedence, all other things being equal
Cascading Order 31 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig 6.3: advanced.html -->
6 <!-- More advanced style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>More Styles</title>
11
12 <style type = "text/css">
13
14 a.nodec { text-decoration: none }
15
16 a:hover { text-decoration: underline;
17 color: red;
18 background-color: #ccffcc }
19
20 li em { color: red;
21 font-weight: bold }
22
23 ul { margin-left: 75px }
24
25 ul ul { text-decoration: underline;
26 margin-left: 15px }
27
28 </style>
29 </head>
30
31 <body>
32
33 <h1>Shopping list for <em>Monday</em>:</h1>
34
35 <ul>
36 <li>Milk</li>
37 <li>Bread
38 <ul>
39 <li>White bread</li>
40 <li>Rye bread</li>
41 <li>Whole wheat bread</li>
42 </ul>
43 </li>
44 <li>Rice</li>
45 <li>Potatoes</li>
46 <li>Pizza <em>with mushrooms</em></li>
47 </ul>
48
49 <p><a class = "nodec" href = "http://www.food.com">
50 Go to the Grocery store</a></p>
51
52 </body>
53 </html>
CSS Strategies
Always include end tags (even though browsers usually display the page, anyway) for all XHTML container tags
Develop web sites in stages Design and code the page to look "OK" or "Acceptable" Then use style sheets for extra-special effects and formatting
Use style sheet components that will degrade gracefully
Check the compatibility charts and test, test, test, test, test....
CSS Strategies 2
Use <div> and <span> tags to create logical page sections NOTE: Different browsers will display differently
Use style sheets in Intranet environments Ideal, since all users will be using the same
browser
CSS Strategies 3
CSS is designed to separate content from style Therefore, names that will be used in HTML or
(especially) in XML should describe content, not style
Example: Suppose you define span.huge {font-size: 36pt} and
you use <span class="huge"> throughout a large number of documents
Now you discover your users hate this, so you change the CSS to be span.huge {font-color: red}
Your name is inappropriate; do you change all your documents?
If you had started with span.important {font-size: 36pt}, your documents wouldn’t look so dumb
Common Mistakes
Check that you have put semicolons ‘;’ between properties
Check that you have not forgotten </style> end tag
If specifying colours by name, make sure that it is one of 16 names allowed by CSS
Need to spell “color” as in the US-English way Note: Colour will not be understood by the browsers
Common Mistakes 2
If specifying fonts, check the spelling Browsers are intolerant of spelling mistakes
Font names of more than one word should be quoted and that quotes are not allowed anywhere else
When using CSS properties make sure the target browsers support them
The Power of CSS - Gallery
CSS Zen Gardenhttp://www.csszengarden.com
Adopted from http://www.indiana.edu/~webdev/2003/submissions/contenttools/
CSS Skinning
The skin is the design placed over the skeleton structure
It’s like a mobile phone Model of phone is the skeleton Face plates are the skins You can swap face plates
CSS Skinning 2
Like a cell phone, web pages can have “face plates” (skins) that are changeable
The CSS skins have nothing to do with the XHTML markup
External CSS file
Easily modifiable
Faster Redesign
CSS Skinning 3
XHTML DIVs are like the parts of the phone (antenna, buttons, speaker, etc.)
Layout CSS is like the different models of phones (where parts are positioned)
Skin CSS is like the face plates
Font Properties and Values
font-family: inherit (same as parent) Verdana, "Courier New", ... (if the font is on the client computer) serif | sans-serif | cursive | fantasy | monospace
(Generic: your browser decides which font to use)
font-size: inherit | smaller | larger | xx-small | x-small | small | medium |
large | x-large | xx-large | 12pt
font-weight: normal | bold |bolder | lighter | 100 | 200 | ... | 700
font-style: normal | italic | oblique
Colors and Lengths
color: and background-color: aqua | black | blue | fuchsia | gray | green | lime |
maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Browser-specific names (not recommended)
These are used in measurements: em, ex, px, %
font size, x-height, pixels, percent of inherited size in, cm, mm, pt, pc
inches, centimeters, millimeters, points (1/72 of an inch), picas (1 pica = 12 points), relative to the inherited value
Text Properties and Values
text-align: left | right | center | justify
text-decoration: none | underline | overline | line-through
text-transform: none | capitalize | uppercase | lowercase
text-indent length | 10% (indents the first line of text)
white-space: normal | pre | nowrap
Recommended