Web Page Design- Content Analysis
wostinabin2
Week4-Lectureslides-20200617.zipChapter 04.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Resource Material
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
2
2
Chapter 4
Applying CSS Styles to Webpages
3
Objectives
Explain the importance of separating design from content
Describe Cascading Style Sheets (CSS)
Define inline, embedded, and external styles and their order of precedence
Describe a CSS rule and its syntax
Explain the difference between a selector, property, and value
Chapter 4: Applying CSS Styles to Webpages
4
Objectives (continued)
Create styles that use text and color properties
Explain the difference between inline and block content
Describe the CSS box model and how to apply margins, padding, and borders
Create an external style sheet and link it to an HTML page
Chapter 4: Applying CSS Styles to Webpages
5
Objectives (continued 1)
Create styles that use padding, border, and margin properties
Float an image
Create styles that use list properties
Add comments to an external style sheet
Validate a CSS file
Chapter 4: Applying CSS Styles to Webpages
6
Using Cascading Style Sheets
Style – It is a rule that defines the appearance of an element on a webpage
Style sheet – It is the set of CSS style rules
Style sheets provide a means to separate style from content because it gives the flexibility to redesign or rebrand a website
A single CSS style sheet file containing the defined styles can be attached to several webpages to apply the styles to all the attached pages
Chapter 4: Applying CSS Styles to Webpages
7
Inline Styles
Inline style – It is used to add a style to the start tag for an element, such as a heading or paragraph, using the style attribute
Chapter 4: Applying CSS Styles to Webpages
8
8
Embedded Style Sheets
An embedded style sheet, also called an internal style sheet, includes the style sheet within the opening <head> and closing </head> tags of the HTML document
Chapter 4: Applying CSS Styles to Webpages
9
9
External Style Sheets
An external style sheet – It is a CSS file that contains all of the styles that can be applied to more than one page in a website
External style sheets are also called linked style sheets
An external style sheet is a text file with the .css extension
To apply an external style sheet, link it (or attach it) to a webpage using a link in the head section of the webpage
Chapter 4: Applying CSS Styles to Webpages
10
External Style Sheets (continued)
External style sheet provides flexibility to quickly change webpage formats because the styles used in it are applied to every page linked to it
Changing the look of an entire website is sometimes called reskinning the website
Chapter 4: Applying CSS Styles to Webpages
11
11
Style Sheet Precedence
Style sheets are said to “cascade” because each type of style has a specified level of precedence (or priority) in relationship to the others
CSS properties can be inherited from a parent element through a principle called inheritance
If a selector has more than one CSS rule, specificity determines which CSS rule to apply
Chapter 4: Applying CSS Styles to Webpages
12
Style Sheet Precedence
A typical example of an inherited property is the color property. Given the style rules:
Chapter 4: Applying CSS Styles to Webpages
13
Style Sheet Precedence
Chapter 4: Applying CSS Styles to Webpages
14
CSS Basics
Each CSS rule consists of a selector and a declaration
Chapter 4: Applying CSS Styles to Webpages
15
15
CSS Basics (continued)
Selector – It is the part of the statement that identifies what to style
Any HTML5 element such as body, header, nav, main, or footer may be a selector
A selector may also be the value of an id or class attribute
The declaration defines the exact formatting of the style
Chapter 4: Applying CSS Styles to Webpages
16
CSS Basics (continued 1)
A declaration consists of a property and a value, separated by a colon and followed by a semicolon
The property identifies the style quality or characteristic to apply, such as
color (text color)
background-color
text-indent
border-width
font-style
Chapter 4: Applying CSS Styles to Webpages
17
CSS Basics (continued 2)
For each property, the declaration includes a related value that identifies the particular property value to apply
Chapter 4: Applying CSS Styles to Webpages
18
CSS Basics (continued 3)
Chapter 4: Applying CSS Styles to Webpages
19
19
CSS Text Properties
Chapter 4: Applying CSS Styles to Webpages
20
20
CSS Text Properties (continued)
Fallback values – They are the additional values provided for the font-family property in case the browser does not support the primary font
CSS measures font sizes using many measurement units, including pixels, points, and ems, and by keyword or percentage
Chapter 4: Applying CSS Styles to Webpages
21
21
CSS Text Properties (continued 1)
Chapter 4: Applying CSS Styles to Webpages
22
22
CSS Colors
HTML uses color names or codes to designate color values
Two types of color codes can be used with CSS:
Hexadecimal
RGB
Hexadecimal values consist of a six-digit number code that corresponds to RGB (Red, Green, Blue) color values
Chapter 4: Applying CSS Styles to Webpages
23
CSS Colors (continued)
To use a color in a style rule declaration, use the color value as the property value
For example, to style a background color as gray use, background-color: #808080;
Chapter 4: Applying CSS Styles to Webpages
24
24
Understanding Inline Elements and Block Elements
HTML elements are positioned on the webpage as a block or as inline content
A block element appears as a block because it starts and ends with a new line, such as the main element or a paragraph element
Inline elements are displayed without line breaks so they flow within the same line
Inline content always appears within block elements
Chapter 4: Applying CSS Styles to Webpages
25
CSS Box Model
Each block element such as a header, nav, main, and footer element is displayed in a browser as a box with content
The CSS box model describes content boxes on a webpage
Chapter 4: Applying CSS Styles to Webpages
26
26
CSS Box Model (continued)
Each content box can have margins, borders, and padding
The margin provides passive white space between block elements or between the top or bottom of a webpage
The border separates the padding and the margin of the block element
Padding is the passive white space between the content and the border of a block element
Chapter 4: Applying CSS Styles to Webpages
27
CSS Box Model (continued 1)
Chapter 4: Applying CSS Styles to Webpages
28
28
Selectors
A style rule begins with a selector, which specifies the element to style
A selector can be
an HTML element name
an id attribute value
a class attribute value
An id or a class selector is used to apply styles to p elements
Chapter 4: Applying CSS Styles to Webpages
29
Selectors (continued)
An id selector uses the id attribute value of an HTML element to select a single element
For example, to style the div id="container" element, use #container as the selector
#container {
border: solid 2px;
}
Chapter 4: Applying CSS Styles to Webpages
30
Selectors (continued 1)
A class selector is used to select elements that include a certain class attribute
For example, to style class="mobile", use .mobile as the selector
.mobile {
font-size: 10pt;
}
Chapter 4: Applying CSS Styles to Webpages
31
Selectors (continued 2)
A descendant selector is used to create style that applies to an element contained within another element
For example, the following style rule sets the list-style property to none for list items in an unordered list included in the navigation area:
nav ul li {
list-style: none;
}
Chapter 4: Applying CSS Styles to Webpages
32
To Create a CSS File and a Style Rule for the Body Element
Chapter 4: Applying CSS Styles to Webpages
33
33
Linking an HTML Document to a CSS File
After creating a CSS file, link it to all the webpages that will use its styles
Insert a link element on the HTML page within the <head> and </head> tags
The link element uses two attributes:
rel
href
The rel attribute uses the stylesheet value to indicate that the document is linked to a style sheet
Chapter 4: Applying CSS Styles to Webpages
34
Linking an HTML Document to a CSS File (continued)
The href attribute value specifies the file path or file name of the CSS file
Following is an example of a link to a style sheet named styles.css and stored in the css folder:
<link rel="stylesheet" href="css/styles.css">
The type="text/css" attribute and value is also commonly used within a link element to reference a CSS file
Chapter 4: Applying CSS Styles to Webpages
35
Aligning Webpage Content
One way to align webpage content is to use the text-align property, which applies to block elements
The text-align property can use left (the default), center, right, or justify as its value
For example, the following rule centers an h1 element:
h1 {
text-align: center;
}
Chapter 4: Applying CSS Styles to Webpages
36
To Center Content
To center all of the elements of a webpage using a single style rule, set the left and right margins to auto
In addition, set the width to 80% so that the elements do not span 100 percent of the browser window
Chapter 4: Applying CSS Styles to Webpages
37
Creating Style Rules for Structural Elements
The header section appears at the top of a webpage and thus needs formatting that makes the header contents stand out and attract visitors to the page
The nav section should be formatted differently from the other structural elements as it should be prominent and easy to find on the webpage
The main section should be formatted using the display property
Chapter 4: Applying CSS Styles to Webpages
38
Creating Style Rules for Structural Elements (continued)
To apply text and box model properties to the main section and have them appear as intended, the display property is used
Create a style rule that formats the footer section by defining the font size, text alignment, and top margin of the footer element
Chapter 4: Applying CSS Styles to Webpages
39
To Create a Style Rule for the Header Element
Chapter 4: Applying CSS Styles to Webpages
40
40
To Create a Style Rule for the Nav Element
Chapter 4: Applying CSS Styles to Webpages
41
41
To Create a Style Rule for the Main Element
Chapter 4: Applying CSS Styles to Webpages
42
42
To Create a Style Rule for the Footer Element
Chapter 4: Applying CSS Styles to Webpages
43
43
Creating Style Rules for Classes
Consider the following example:
<img class="equip" src="images/equipment1.jpg" alt="Weight Equipment" height="195" width="260">
The img element displays the equipment1.jpg image
The first attribute and value, class="equip", assigns this element to the equip class
Including the class="equip" attribute and value in each img element helps format all the elements assigned to the equip class with a single style rule
Chapter 4: Applying CSS Styles to Webpages
44
Creating Style Rules for Classes (continued)
For example, the following style rule adds 20 pixels of padding to the right side of elements in the equip class:
.equip {
padding-right: 20px;
}
Chapter 4: Applying CSS Styles to Webpages
45
Creating Style Rules for Classes (continued 1)
To indicate a class name as a selector, include a period (.) before the class name
Float property – It positions an element to the right or left of other elements
Clear property – It removes the float effect from a webpage
Chapter 4: Applying CSS Styles to Webpages
46
Using CSS List Properties
The CSS list-style properties are used to control the appearance of numbered and bulleted lists
Lists marked with the <ul> and </ul> tags display a solid bullet before each list item
Lists marked with the <ol> and </ol> tags display Arabic numerals (1, 2, 3, and so on) before the list items
For example,
ul {
list-style-type: square;
}
Chapter 4: Applying CSS Styles to Webpages
47
Using CSS List Properties (continued)
The default value for the list-style-position property is outside, which displays the list item with a bullet or number outside of the list’s content block as in the following text:
1. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Chapter 4: Applying CSS Styles to Webpages
48
Using CSS List Properties (continued 2)
Using inside as the value displays the bullet or number inside the list’s content block, as in the following text:
Morbi odio nisl, facilisis non
egestas a, tristique vitae neque.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Chapter 4: Applying CSS Styles to Webpages
49
Adding Comments to CSS Files
Comments provide additional information about the area where the styles are applied or other helpful explanations, such as what the styles do
The syntax for a comment is as follows:
/* Place your comment here */
Chapter 4: Applying CSS Styles to Webpages
50
To Validate the CSS File
The following steps validate a CSS file
Open the browser and type http://jigsaw.w3.org/css-validator/ in the address bar to display the W3C CSS Validation Service page
Tap or click the By file upload tab to display the Validate by file upload information
Tap or click the Browse button to display the Choose File to Upload dialog box
Navigate to your css folder to find the styles.css file (Figure 4–41)
Chapter 4: Applying CSS Styles to Webpages
51
To Validate the CSS File (continued)
Chapter 4: Applying CSS Styles to Webpages
52
52
To Validate the CSS File (continued 1)
Tap or click the styles.css document to select it
Tap or click the Open button to upload the selected file to the W3C CSS validator
Tap or click the Check button to send the document through the validator and display the validation results page (Figure 4–42)
Chapter 4: Applying CSS Styles to Webpages
53
To Validate the CSS File (continued 2)
Chapter 4: Applying CSS Styles to Webpages
54
54
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
55
55
Chapter E4 Week 4.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Client server internet models and applications
Chapter E4
Network Overview
3
Network
two or more computers connected together for the
purpose of communicating and sharing resources
The Client/Server Model
4
Client/Server can describe a relationship between two computer programs – the "client" and the "server".
Client
requests some type of service (such as a file or
database access) from the server.
Server
fulfills the request and transmits the results to the client
over a network
The Client/Server Model
5
The Internet Client/Server Model
Client: Web Browser
Server: Web Server
Internet Protocols
6
Protocols
› Rules that describe the methods used for clients and servers to communicate with each other over a network.
There is no single protocol that makes the
Internet and Web work.
A number of protocols with specific
functions are needed.
Common Internet Protocols
7
Official Communication Protocol: TCP/IP
Specialized Protocols:
File Transfer: FTP
E-mail: SMTP, POP3, IMAP
Websites: HTTP
HTTP Hypertext Transfer Protocol
8
A set of rules for exchanging files such as text, graphic images, sound, video, and other multimedia files on the Web.
Web browsers send HTTP requests for web pages and their associated files.
Web servers send HTTP responses back to the web browsers.
HTTP Request
HTTP Response
IP Address
9
Each device connected to the Internet has a
unique numeric IP address.
These addresses consist of a set of four groups of numbers, called octets.
74.125.73.106 will get you Google!
An IP address may correspond to a domain name.
Domain Name
10
Locates an organization or other entity on the Internet
Domain Name System
Divides the Internet into logical groups and
understandable names
Associates unique computer IP Addresses with the text-based domain names you type into a web browser
Browser: http://google.com
IP Address: 74.125.73.106
Uniform Resource Indicator
11
URL
Uniform Resource Locator
Represents the address of a resource
on the Internet.
Top-Level Domain Name
12
A top-level domain (TLD) identifies the right- most part of the domain name.
Some generic TLDs:
.com, .org, .net, .mil, .gov, .edu, .int, .aero,
.asia, .cat, .jobs, .name, .biz, .museum, .info,
.coop, .pro, .travel
County Code TLDs
13
Two character codes originally intended to indicate the geographical location (country) of the web site.
In practice, it is fairly easy to obtain a domain name with a country code TLD that is not local to the registrant.
Examples:
.tv, .ws, .au, .jp, .uk
Domain Name System
The Domain Name System (DNS) associates
Domain Names with IP addresses.
23
23
Domain Name
IP Address
Use TPC/IP
send HTTP Request
Web
Server
Web Browser
requests web page
Use TCP/IP
to send HTTP Responses
with web page files & images
Web Browser
displays web page
DNS
Markup Languages
SGML – Standard Generalized Markup
Language
› A standard for specifying a markup language or
tag set
HTML – Hypertext Markup Language
› The set of markup symbols or codes placed in a file intended for display on a web browser.
Element or tag – individual markup code
Attribute – modifies the purpose of a tag
15
Markup Languages (2)
16
XML – eXtensible Markup Language
A text-based language designed to describe, deliver,
and exchange structured information.
It is not intended to replace HTML –
it is intended to extend the power of HTML by
separating data from presentation.
Markup Languages (3)
17
XHTML – eXtensible Hypertext Markup Language
Developed by the W3C as the reformulation of HTML 4.0
as an application of XML.
It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML.
Markup Languages (4)
18
HTML 5
› The next version of HTML 4 and XHTML 1
Currently in draft status
Incorporates features of both HTML and XHTML
Adds new elements
Eliminates some elements
Intended to be backward compatible
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
19
19
CSS Advanced Concepts.pptx
Cascading Style Sheets
1
C S S
What is CSS?
A simple mechanism for controlling the style of a Web document without compromising its structure.
It allows you to separate visual design elements (layout, fonts, colors, margins, and so on) from the contents of a Web page.
Allows for faster downloads, streamlined site maintenance, and global control of design attributes across multiple pages.
2
CSS vs. just HTML
What can we do with CSS that we can’t do with HTML?
Control of backgrounds.
Set font size to the exact height you want.
Highlight words, entire paragraphs, headings or even individual letters with background colors.
Overlap words and make logo-type headers without making images.
Precise positioning.
Linked style sheets to control the look of a whole website from one single location.
And more.
3
How to write CSS?
Selector
HTML element tags (examples: p, h2, body, img, table)
class and ID names
Property (examples: color, font-size)
Value (examples: red, 14pt)
4
How to write CSS:
The basic syntax of a CSS rule:
selector {property 1: value 1; property 2: value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before each value!
5
Three ways to include CSS:
Local (Inline)
Global (Embedded, or Internal)
Linked (External)
6
1. Local
Inline style sheet.
Placed inside tags.
Specific to a single instance of an html tag on a page.
Must be used instead of <font> tags to specify font size, color, and typeface and to define margins, etc.
Use to override an external or embedded style specification.
7
Local (inline)
Example
<p style="font-size: 10pt; color: red; font-weight: bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>
8
On the browser:
2. Global
Embedded or internal style sheet
Applicable to an entire document
Styles are defined within the <style> </style> tag, which is placed in the header of the html file (i.e., within <head> and </head>).
9
Global (Internal)
Example:
<html> <head> <title>Title</title> <style type="text/css"> <!--[STYLE INFORMATION GOES HERE] --> </style> </head>
<body> [DOCUMENT BODY GOES HERE] </body>
</html>
10
3. Linked
External style sheet
Styles are saved in a separate file, with the extension .css
This single stylesheet can be used to define the look of multiple pages.
11
Linked (External)
Example
12
p {font-family: verdana, sans-serif; font-size: 12pt; color: red}
h1 {font-family: serif; font-size: 14pt; color: green}
h2 {font-family: serif; font-size: 11pt; color: blue}
Save this text file as whatever.css
In TextPad,Notepad, etc.…
Linked (External)
Example (continued)
To apply the stylesheet “whatever.css“ to an HTML document, call it in from the header:
<head> <link rel="stylesheet" href=“whatever.css" type="text/css">
</head>
13
Inheritance: which style prevails when several are present?
Inline (local) overrides internal (global)
Internal (global) overrides external (linked).
14
Cascading
The way styles will be used when there is more than one style specified for an HTML element:
Browser default
External Style Sheet (Linked) (in an external .css file)
Internal Style Sheet (Global, or embedded) (inside the <head> tag)
Inline Style (Local) (inside HTML element)
An inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in the browser (default value).
15
Let’s try this now!
<h1 style=“text-align: center; font-weight:bold; color: blue”> Styling with CSS! </h1>
<p style="font-size: 10pt; color: red; font-weight: bold; font-family: Arial, Helvetica, sans-serif“ >
Write whatever you want here </p>
16
Grouping properties
Separate properties with a semi-colon
Example:
p {text-align:center;color:red; font- family:Arial; font-style:italic}
17
Grouping selectors
Separate selectors with a comma
Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
Separate selectors with a space
Example:
p li { color: red }
(only items within a list and a paragraph tag will be red)
18
The class Selector
With a class selector you can define different styles for the same type of HTML element
Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-aligned, italic, and red. </p>
<p class=“blue"> This paragraph will be center-aligned and blue. </p>
19
The class Selector
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have this class.
Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem" will be center-aligned and italic.
20
The class Selector
Example (continued)
Both elements below will follow the rules in the ".poem“ class:
<h1 class=“poem"> This heading will be center-aligned and italic </h1>
<p class=“poem"> This paragraph will also be center-aligned and italic. </p>
21
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt} h1 {font-family: serif; font-size: 30pt} h2 {font-family: serif; font-size: 24pt} .boldred {color: red; font-weight: bold} .green {color: green} .tinyblue {color: blue; font-size: 8pt}
</style>
The tags and classes can then be used in combination:
<h1 class=“boldred">This is rendered as 30-point red serif bold text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif bold text.</p>
22
Applying styles to portions of a document:
<div>
A division tag: to “package” a block of document into one unit. It defines a block element.
Causes a line break, like <br> and <p>.
<span>
“Wraps” a portion of text into a unit, but doesn't cause a line break. Allows styles to be applied to an 'elemental' region (such as a portion of a paragraph).
23
Example
<p><span class="foo">This text is rendered as foo-style</span> and this is not. </p>
<div class="foo"> <p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well. </div>
24
List of style Selectors and their Properties and Values:
From WDG:
http://www.htmlhelp.com/reference/css/properties.html
25
Properties - Font
font-family
Name, or serif, sans-serif, cursive, monospace
font-style
normal, italic
font-weight
normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size
absolute-size, relative-size, length, percentage
font-variant
small-caps
26
Properties - Text
text-decoration
underline, line-through
text-transform
capitalize, uppercase, lowercase, none
text-align
left, right, center, justify
text-indent
<length>, <percentage>
27
Properties - Position
position
absolute, relative
top
<length>, <percentage>, auto
left
<length>, <percentage>, auto
Z-index
<number>, auto
28
A few more details about positioning
29
Positioning
Upper left corner corresponds to (0,0)
The value of top, bottom, right, left can be expressed in:
Length (measured in px, em, etc…)
Percentage of the parent’s width
30
(0,0)
Y
X
The z-index
stacking order is called the z-index.
If elements overlap each other, the one with the higher z-index appears on top.
Example:
.topElement {position: absolute; z-index=2; top:0px; left:0px; font-size:36pt; color:red}
31
CSS Examples:
<h1 style="color: white; position: absolute; bottom: 50px; left: 50px; z-index: 2"> Text in front.</h1>
Positioning: Example
Stacking: Example
Shadowing: Example
32
(0,0)
Y
X
Using Boxes and Positioning for layout
33
In a box:
Margins are always transparent.
Borders come in various styles.
Background settings:
the area just inside the borders
includes both the padding and content areas.
34
Examples
img { border-style: ridge;
border-width: 20px;
border-color:red green blue purple}
35
h1 {background-color: #CC66FF;
width: 50%;
padding: 20px}
H1,50% ,purple background
Border values
36
Backgrounds
background-color
Hex
background-image
URL(image.jpg)
background-repeat
No-repeat, repeat-x, repeat-y
background-attachment
Fixed, scroll
background-position
Top, left
p { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif) }
37
Background repeat examples:
38
Scroll Bar Color
Example:
<style>
body { color:black;
background-color:#a0a0a0;
scrollbar-face-color:#903030;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#C0B0B0;
scrollbar-shadow-color:rgb(0,0,0)}
</style>
CSS generator for scrollbars: http://www.spectrum-research.com/V2/generators/scrollbar.asp
39
Link Style
a:link {color: #FFFFFF; text-decoration: none}
a:visited {color: #808080; text-decoration: none}
a:hover {color: red; text-decoration: none}
40
Cursor
The cursor property specifies the type of cursor to be displayed when pointing on an element.
Crosshair, hand, move, text, wait, etc.
Complete demo (cursor styles): http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor
41
