CSC309S Tutorial Css & XHTML Outline: Tianhan Wang

CSC309S Tutorial Outline
Link HTML with Style Sheets

CSS & XHTML CSS
Class/ID selectors, Pseudo-class/element, Color values,
Length units, Text, Font, Lists, Padding/border/margin,
Floating/clearing
Link CSS to XML
XHTML
Tianhan Wang
Links, Frames lists, Tables, Forms
http://www.cs.toronto.edu/~tianhan/TA/CSC309S/
January 27, 2003
1 CSC309 Tutorial --CSS & XHTML 2 Spring 2003
Link HTML with Style Sheets

(1) External style sheets
<link rel="stylesheet" type="text/css” href="external.css"/>
(2) Internal style sheets

<style type="text/css">
h1 {text-align: left; h1 {text-align: center;
color: green; color: red;
font-size: 150%
font-size: 150%}
}
</style>
(3) Inline styles

<h1 style="text-align: right; color: yellow">
This is an inline style.
</h1>
CSC309 Tutorial --CSS & XHTML 3 Spring 2003 CSC309 Tutorial --CSS & XHTML 4 Spring 2003
Specify Style Rules Class Selectors
General form Define different styles for the same element
selector { property: value } h1.red {color: red;}

or h1.green {color: green}
selector { property1: value1;
property2: value2; <h1 class="red">This line is red. </h1>
... <h1 class="green">This line is green. </h1>
property3: value3}
Used by any element without element name
Grouping
.blue {color: blue}
selector 1, selector 2, ..., selector n
{ <h1 class="blue">This line is blue. <h1>
property: value <p class="blue">This paragraph is blue.</p>
}
For Evaluation Only.

Copyright(C) by Foxit Software Company,2005-2007
Edited by Foxit Reader
ID Selectors Pseudo-class & Pseudo-element
Selectors
<html> <html>
<head> <head>
<style type="text/css"> <style type="text/css">
p#emph {font-weight: bold; a:link {color: blue}
font-size: 150%} a:visited {color: red}
p#large {font-size: 300%} a:active {color: green}
</style>
</head>
<body>
p.line:first-line {font-size: 200%}
<p id="emph"> This line will be boldfaced. </p> p.letter:first-letter {font-size: 300%}
<p> This line will not be boldfaced. </p> </style></head>
<p id=“large”> The font of this line will be larger. </p> <body>
</body> <p class="line">In this paragraph, the first line has a larger size than
</html> others.</p>
<p class="letter">Here, the first letter has a larger size.</p>
Use ‘#’ in ID selectors instead of ‘.’ which is used in class selectors. </body>
Classes may be assigned to any number of elements, while IDs are supposed to be
</html>
used only once.
Color Values Length Units
Named colors: Absolute length units
aqua black blue fuchsia gray green lime navy inch (in)
olive purple red silver teal white yellow centimeters (cm) -- 1 cm = 0.394 in or 1 in = 2.54 cm
millimeters (mm) -- 1 cm = 10 mm
Color by RGB:
points (pt) -- 1 in = 72 pt
(1) by hexadecimal numbers
#ffffff /* white */ #000000 /*black */ picas (pc) -- 1 pc = 12 pt
#ff0000 /* red */ #00ff00 /* green */ #0000ff /* blue */
(2) by decimal numbers Relative lengths units: relative to another length property
rgb(255, 255, 255) /* white */ rgb(0, 0, 0) /* black */ em: em-height, the height of the element's font, e.g. 1.5em
(3) by percentage ex: x-height, the height of the letter “x”, e.g., 1.5ex
rgb(100%, 100%, 100%) /* white */ rgb(0%, 0%, 0%) /* black */ px: pixels (varies in size based on the screen resolution), e.g. 200px
Color equivalence
e.g.,
Percentage units: relative to the element's font size
white == #ffffff == rgb(255, 255, 255) == rgb(100%,100%, 100%) %: e.g. 30%
black == #000000 == rgb(0,0,0) == rgb(0%, 0%, 0%)
red == #ff0000 == rgb(250, 0, 0) == rgb(100%, 0%, 0%)
Background Text
<html> <html>
<head> <head>
<style type="text/css"> <style type="text/css">
body h1{
{ color: green;
background-image: url("microcrest.gif"); text-decoration: underline;
background-repeat: no-repeat; text-align: right;
background-position: center center; text-indent: 2cm
background-color: #ffffff }
} a{text-decoration: none;
h1{color: green} color: blue}
</style></head> h2{text-decoration: line-through}
<body> </style></head>
<h1> An example of <body>
backgound style</h1> This <a href="t.html>LINK</a> has no underline.
</body> <h1>This line: underlined</h1> <h2>Next line: line-through</h2>
</html> </body>
</html>
Font Lists
<html> u1.square {list-style-type: square}
<head>
<style type="text/css"> u1.circle{list-style-type: circle}
p.c1{ u1.disc{list-style-type: disc}
font-family: times;
font-size: 200%;
font-style: italic;
ol.decimal {list-style-type: decimal}
font-weight: bold ol.lroman {list-style-type: lroman}
} ol.uroman {list-style-type: uroman}
p.c2 { font-size: 150%}
</style></head>
ol.lalpha {list-style-type: lalpha}
<body> ol.ualpha {list-style-type: ualpha}
<p class="c1">This is line 1</h1>
<p class="c2">This is line 2</h2>
<p>This is line 3</p>
u{ list-style-image: url{("listimage.jpg")}
</body>
</html>
Padding/Border/Margin Floating & Clearing

<html><head><style type="text/css"> <html><head>
p.b1 { border-style: solid; border-color: red; <style type="text/css">
border-bottom-width: 2;} img.lf {float: left; height: 30; width: 50}
img.lc {clear: left}
p.b2 { border-style: double; border-color: green;
p.f { float: right; border-style: solid;
padding: 10} width: 70; padding: 10}
p.b3 { border-style: solid; </style></head>
padding: 10; margin: 10} <body>
p.b4 { border-style: solid; <img class="lf" src="microcrest.gif" />
padding: 30; margin: 10} <p>Image and text elements that appear in another
p.b5 { border-style: solid; element are called floating elements, which
padding: 10; margin: 30} will be displayed on the left or right side of
the following document.</p>
</style></head>
<img class="lc" src="microcrest.gif" />
<body> <p>Use the clear property with a particular element
<p class="b1">paragraph 1</p> <hr /> to prevent a previous floating element from being
<p class="b2">paragraph 2</p> <hr /> displayed alongside it.</p>
<p class="b3">paragraph 3</p> <hr /> <p class="f">This is a float paragraph.</p>
<p class="b4">paragraph 4</p> <hr /> <p>In this paragraph, the image (actually a paragraph) is
<p class="b5">paragraph 5</p> <hr /> floating to the right. The left text wraps around this element.</p>
</body></html> </body></html>
Link CSS to XML css Link CSS to XML xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
book author
<?xml-stylesheet type="text/css" href=”book.css"?>
{ {
<!DOCTYPE bookDatabase SYSTEM "book.dtd">
display: block; display: inline; <bookDatabase>
font-size: 150% color: blue; <book bookID="ISBN-0-13-xxx">
} } <author>&EH;</author>
<content>
content description <chapter number="1">XML Structure, Syntax</chapter>
{ { <description>
display: block; display: block; <section>XML Fundamentals</section>
</description>
border: solid; margin-top: 1in;
</content>
margin: 2cm; margin-bottom: 1in; <content>
padding: 1em; } <chapter number="2">Document Type Definitions</chapter>
} <description>
section <section>Element Declarations</section>
chapter { <summary>summary of the chapter 2</summary>
{ display: block; </description>
display: block; font-size; 200% </content>
</book>
} }
CSC309 Tutorial --CSS & XHTML 17 Spring 2003
<bookDatabase>
CSC309 Tutorial --CSS & XHTML 18 Spring 2003
XHTML
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML elements must be properly nested

XHTML documents must be well-formed
Tag names must be in lowercase
All XHTML elements must be closed
Attribute values must be quoted
Wrong: <br>, <hr>, <ol><li>item one</ol>

Correct: <br />, <hr />, <ol><li>item one</li></ol>
Wrong: <input checked>

Correct: <input checked="checked" />
A simple XHTML document Links
<?xml version="1.0" encoding="UTF-8"?> <a href="http://www.../course.html">absolute url</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN” <a href="course.html">relative url</a>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> <a href="course.html#end">link to the end of the paragraphy</a>
<html> define a name anchor: <a name="end" />
<head>
<title>simple document</title> <a href="mailto:tianhan@cs.toronto.edu"> email me</a>
</head>
<body> <a href="course.html"> <img src="flower.gif" alt="link to course page" />
<p>a simple paragraph</p> an image link</a>
</body>
</html> <a href="course.html" target="_blank">open a new window</a>
<a href="course.html" target="_top">link to the top window/a>
Frames Lists html

<html> <html><head>
… <style type="text/css">
ul.level1 {list-style-type: square}
<frameset rows="75%,25%"> ul.level2 {list-style-type: circle}
<frame src="r1.html" name=“topFrame” /> ol {list-style-type: decimal}
<frameset cols="100,*"> </style> </head>
<frame src="r2c1.html" scrolling="no" /> <body>
<frame src="r2c2.html" scrolling="auto" /> <ul class="level1">
</frameset> <li>AAA</li>
</frameset> <ul class="level2">
... <li>aaa</li><li>bbb</li><li>ccc</li>
</html> </ul>
<li>BBB</li>
<ol><li>xxx</li><li>yyy</li><li>zzz</li>
</ol>
</ul>
</body></html>
Tables Forms
<html><head> <html><body>
<style type="text/css"> <form name="input" action="formAction.asp" method="get">
td {text-align: center; Enter your first names:
vertical-align: top; <input type="text" name="FirstName" /><br />
padding: 15} Enter your last name:
</style></head> <input type="text" name="LastName" /><br />
<body> <input type="submit" value="Submit">
<table border="2" cellspacing="20"> </form>
<tr> <td colspan="2">AAA</td> </tr> <p>Click the "Submit" button to send your inputs</p>
<tr> </body>
<td rowspan="2">BBBBB</td> </html>
<td>CCC</td>
</tr>
<tr> <td>DDDDDDDD</td> </tr>
</table>
</body>
</html>

CSC309S Tutorial Css & XHTML Outline: Tianhan Wang

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSC309S Tutorial Css & XHTML Outline: Tianhan Wang

Uploaded by

Copyright:

Available Formats

CSC309S Tutorial Outline

Link HTML with Style Sheets

1 CSC309 Tutorial --CSS & XHTML 2 Spring 2003

Link HTML with Style Sheets

(2) Internal style sheets

(3) Inline styles

selector { property: value } h1.red {color: red;}

For Evaluation Only.

Padding/Border/Margin Floating & Clearing

XHTML elements must be properly nested

Wrong: <br>, <hr>, <ol><li>item one</ol>

Wrong: <input checked>

Frames Lists html

You might also like