Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

elements_of_style

advertisement 
Elements of Style
Fort Collins, CO
The Elements
of Style
for XML
Instructor: Joseph DiVerdi, Ph.D., M.B.A.
Copyright © XTR Systems, LLC
XML View of Style
Elements of Style
Fort Collins, CO
• Marked Up Documents Contain Content
– They Do Not Contain Style
• They Do Not Describe How They Are Rendered
• Style Information Is Contained Elsewhere
– In Other (Companion) Documents
– Style Can Be Changed to Suit the Medium
• Style is Contained in CSS & XSL Documents
– XSL is Applicable to XML Applications
– CSS is Especially Suited for HTML Browsers
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
HTML View of Style
• HTML is a Markup Language
– Contains tags designed to structure documents
<H2>, <P>, <EM>
– Makes a document's content more accessible
• Hmmm, sounds like XML
• CSS is a Style Sheet Language
– Contains rules designed to render structured
documents
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
HTML View of Style
• The Browser's Job is to Render Documents
– In a Consistent, Usable Fashion
– According to the Style Rules
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Style Definition
• A Style is a Rule
– Which Specifies How to Render a Particular Tag
• HTML or XML or Other
– It is an Instruction to the Browser
Copyright © XTR Systems, LLC
Adding Styles to Web Pages
Elements of Style
Fort Collins, CO
• Inline Style
– Style information added to an individual elements
• Document-Level Style
– Style block added to <HEAD>
– Effects all specified elements in the document
• External Style Sheet
– All style information in a separate document
– Effects all specified elements in a group of
documents
Copyright © XTR Systems, LLC
Inline Style
Elements of Style
Fort Collins, CO
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 STYLE="color: blue; font-style: italic">Now is the
time for all good men to come to the aid of
their country.</H1 >
<HR>
<P STYLE="color: red; font-style: oblique">Now is the
time for all good men to come to the aid of
their country.</P>
</BODY>
</HTML>
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Document-Level Style
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!-H1 { color: green; font-family: cursive; }
P { color: dark-gray; font-family: serif; }
-->
</STYLE>
</HEAD>
<BODY>
<!-- put a bunch of body tags in the body -->
</BODY>
</HTML>
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Document-Level Style
• <STYLE></STYLE> tags constitute a
container
<STYLE TYPE="text/css">
</STYLE>
• TYPE attribute specifies the "type"
– CSS style uses the type text/css
– JavaScript style uses the type text/javascript
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Document-Level Style
• Style rules are not HTML
– Older browsers must be shielded using comments
<STYLE TYPE="text/css">
<!-H1 { color: red; font-family: cursive; }
P { color: green; font-family: serif; }
-->
</STYLE>
Copyright © XTR Systems, LLC
External Style Sheet
Elements of Style
Fort Collins, CO
<HTML>
<HEAD>
<LINK TYPE="text/css" REL=stylesheet HREF="main.css">
</HEAD>
<BODY>
<H1>
Now is the time for all good men to come to the aid of
their country.
</H1>
<P>
Now is the time for all good men to come to the aid of
their country.
</P>
</BODY>
Copyright © XTR Systems, LLC
</HTML>
Elements of Style
Fort Collins, CO
External Style Sheet
• Contents of main.css
BODY {
background-color: #99ccff;
color: black;
font-family: times, serif;
}
H1 {
background-color: #00cc99;
color: red;
font-family: verdana, arial, sans-serif;
}
• HTML does not appear in the style sheet file
Copyright © XTR Systems, LLC
Style Sheets
Elements of Style
Fort Collins, CO
• Style Sheets are tools used by publishing
professionals to manage the look, i.e., style,
of their publications
– Much desktop publishing and word processing
software support style sheets
• Style Sheets can be used to control an entire
set of documents providing a consistent
look and feel
Copyright © XTR Systems, LLC
Cascading Style Sheets
Elements of Style
Fort Collins, CO
• Cascading refers to behavior when several
sources of style information co-exist
– Passed down from higher-level sheets
– Passed down from parent to child within one
– Unless overridden by command with more weight
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Advantages of CSS
• Style and Content are separated
– HTML contains content, CSS contains style
• Greater typography and page layout control
– CSS includes many new tools
• e.g., margins, line and letter spacing, element positioning
• Smaller documents and downloads
– Style specifications in one place without repeats
• Easier site maintenance
– Multiple HTML pages linked to a single style sheet
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Disadvantages of Style Sheets
• Limited support
– Unavailable prior to IE v3.0
– Unavailable prior to Navigator v4.0
• Inconsistency of support
– Among browsers that claim they do support CSS
• Getting Better all the Time...
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Rule Syntax
• A style is a rule
– which specifies how to render an HTML tag
• Any valid tag name can be specified
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Rule Syntax
selector { property: value; }
• selector - identifies the element affected
• declaration - combined property and value
– Case insensitive but convention dictates
• Tag names are all uppercase
• Properties and values are all lowercase
– Any valid tag name can be selector
• Less its enclosing < and > characters
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Rule Syntax
selector { property: value; }
• selector - identifies the element affected
• declaration - combined property and value
BODY {
background-color: aqua;
}
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Multiple Properties Syntax
• Separate multiple properties by semicolons
selector { property1: value1; property2: value2; }
P{
color: blue;
font-family: serif;
}
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Contextual Selectors Syntax
• Contextual Selectors define a way to have a
style applied when a tag occurs within a
certain context
– when it is nested within other tags
Copyright © XTR Systems, LLC
Contextual Selectors Syntax
Elements of Style
Fort Collins, CO
selector1 selector2 { property: value; }
– Applied when selector2 occurs within selector1
H1
{ color: black; }
EM
{ color: gray; }
H1 EM { color: red; }
– H1 text will be black
– EM text will be gray
– EM text in H1 will be red
Copyright © XTR Systems, LLC
Contextual Selectors (con't)
Elements of Style
Fort Collins, CO
• Example: classic outline numbering sequence
–
–
–
–
Capital letters, e.g., A, B, C, ...
Uppercase Roman numerals, e.g., I, II, III, ...
Lowercase letters, e.g., a, b, c, ...
Arabic numerals, e.g., 1, 2, 3, ...
OL LI
{ list-style: upper-alpha }
OL OL LI
{ list-style: upper-roman }
OL OL OL LI
{ list-style: lower-alpha }
OL OL OL OL LI { list-style: decimal }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Class Attribute Selectors
• Application of style rules based on special
identifying attributes
– Classify elements by adding CLASS attribute:
<H1>Current Statement</H1>
<H1 CLASS="important">Your account is past due.</H1>
– Specify styles for particular class using:
H1.important { color: #FF0000; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Class Attribute Selectors
• Same CLASS name can be used for several
tags:
<H1 CLASS="important">Your account is past due.</H1>
<P CLASS="important">Pay attention!</P>
– Specify styles for particular class using:
H1.important { color: #FF0000; }
P.important { color: #FF0000; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Class Attribute Selectors
• Or combine all classes into a generic one:
.important { color: #FF0000; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Alternate Values Syntax
• This is a Special Case for font-family
• Separate alternate values by commas
selector { font-family: value1, value2, value3, ... ; }
H1 {
font-family: verdana, arial, sans-serif;
}
• Good Practice to end list with generic family
– serif, sans-serif, monospaced, cursive, fantasy
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Font Families in CSS
• Serif
– Proportional
• Characters each have differing widths
• Spacing flows with text
– Serif
• Characters have decorations at ends of strokes
• Traditionally thought to be easier on the eyes
– Examples
• Times, Garamond, New Century Schoolbook
This sentence is presented in the Times font.
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Font Families in CSS
• Sans serif
– Proportional
• Characters each have differing widths
• Spacing flows with text
– No Serif
• Characters do not have decorations at ends of strokes
• Traditionally thought to possess cleaner presentation
– Examples
• Helvetica, Geneva, Verdana, Arial
This sentence is presented in Verdana.
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Font Families in CSS
• Monospace
– Not Proportional
• Characters each have same width
– May or Not Have Serif
• Emulate old-fashioned typewriters
– Examples
• Courier, New Courier, ProFont
This sentence is displayed in Courier.
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Font Families in CSS
• Cursive
– Proportional
• Characters each have differing widths
– No Serif but Often Greater Decorations
• (Attempt to) Emulate Human Handwriting
– Examples
• Zapf Chancery & other Zapfs
This sentence is displayed in Zapf
Chancery.
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Font Families in CSS
• Fantasy
– Probably Proportional
• Characters each have differing widths
– No Serif but Often Greater Decorations
• This just defies description
– Examples
• Klingon
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Specifying Colors
• Several Methods for Specifying Color
• Identical to HTML Methods
• Caveat:
– CSS is not a precise layout language
– There are unavoidable differences among OSes
– There are unavoidable differences among
browsers
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Specifying Colors
• Color Specification Methods:
– Named Colors (aka Color Keywords)
– RGB Colors •
•
•
•
Using Decimal Numbers
Using Percentages
Using Hexadecimal Numbers
Using Short Hexadecimal Numbers
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Named Colors
• Named Color Choices:
aqua
gray
navy
silver
black
green
olive
teal
blue
lime
purple
white
fuschia
maroon
red
yellow
• The Original Windows VGA Color Set
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
RGB Colors
• Several equivalent number systems
–
–
–
–
Percentage:
Decimal Number:
Hexadecimal Number:
Short Hexadecimal Number:
0-100%
0-255
00-FF
0-F
• All schemes deconstruct every possible color
into varying amounts of Additive Primaries
– Red, Green, & Blue
• Each scheme uses a different numbering
scheme to define the amounts
Copyright © XTR Systems, LLC
RGB Colors
Elements of Style
Fort Collins, CO
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
RGB Colors
• Percentages:
– 0-100% Red
– 0-100% Green
– 0-100% Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
rgb( 20%, 20%, 20%); }
rgb(100%, 0%, 0%); }
rgb(100%, 40%, 0%); }
rgb(100%, 100%, 0%); }
rgb( 0%, 100%, 0%); }
rgb(100%, 0%, 100%); }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H6 { color: rgb(rrr, ggg, bbb); }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
RGB Colors
• Decimal Numbers:
– 0-255 Red
– 0-255 Green
– 0-255 Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
rgb( 51, 51, 51); }
rgb(255, 0, 0); }
rgb(255, 102, 0); }
rgb(255, 255, 0); }
rgb( 0, 255, 0); }
rgb(255, 0, 255); }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H6 { color: rgb(rrr, ggg, bbb); }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
RGB Colors
• Hexadecimal Numbers:
– 00-FF Red
– 00-FF Green
– 00-FF Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
#333333; }
#FF0000; }
#FF6600; }
#FFFF00; }
#00FF00; }
#FF00FF; }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H1 { color: #rrggbb; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
RGB Colors
• Short Hexadecimal Numbers:
– 0-F Red
– 0-F Green
– 0-F Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
#333; }
#F00; }
#F60; }
#FF0; }
#0F0; }
#F0F; }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H1 { color: #rgb; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Specifying URLs
• Background images and list item images are
specified with a URL
• This URL can be either absolute:
http://www.westciv.com/gifs/main.gif
• Or relative:
gifs/main.gif
Copyright © XTR Systems, LLC
Specifying Relative URLs
Elements of Style
Fort Collins, CO
• Relative to What?
– Style Sheet or XML document?
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Specifying Relative URLs
• Must be Relative to the Style Sheet
• Otherwise
– Style sheet would work only for documents in the
same directory as the style sheet
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Specifying Relative URLs
• A Problem:
– Some Browsers Actually Get This Wrong
• Treat the URL as Relative to the HTML Document
– Good Strategy
• Use absolute URLs in style sheets
– /gifs/main.gif
• Use URLs relative to Server Root
– /~diverdi/gifs/main.gif
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
Syntax
• URLs have a straightforward form:
BODY {
background-image: url(/~diverdi/images/background.jpeg);
color: black;
font-family: verdana, arial, sans-serif;
}
Copyright © XTR Systems, LLC
The Cascade Defined
Elements of Style
Fort Collins, CO
• More than one type of style (sheet) can
simultaneously effect presentation
• Style is hierarchical - highest to lowest weight
–
–
–
–
–
–
–
tag attributes
Inline style
Embedded style
Imported style sheets
Linked external style sheet
User style settings
Browser default settings
Copyright © XTR Systems, LLC
HTML v2.0 Style Sheet
Elements of Style
Fort Collins, CO
BODY { margin: 1em; font-family: serif; line-height: 1.1; background: white; color: black; }
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE,
BR, HR, FORM, DL { display: block; }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN { display: inline; }
LI { display: list-item; }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em; }
H5, H6 { margin-top: 1em; }
H1 { text-align: center; }
H1, H2, H4, H6 { font-weight: bold; }
H3, H5 { font-style: italic; }
H1 { font-size: xx-large; }
H2 { font-size: x-large; }
H3 { font-size: large; }
B, STRONG { font-weight: bolder; }
/* relative to the parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic;}
PRE, TT, CODE, KBD, SAMP { font-family: monospace;}
PRE { white-space: pre; }
ADDRESS { margin-left: 3em; }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em; }
Copyright © XTR Systems, LLC
Elements of Style
Fort Collins, CO
HTML v2.0 Style Sheet
BLOCKQUOTE { margin-left: 3em; margin-right: 3em; }
UL, DIR { list-style: disc; }
OL { list-style: decimal; }
MENU { margin: 0; } /* tight formatting */
LI { margin-left: 3em; }
DT { margin-bottom: 0; }
DD { margin-top: 0; margin-left: 3em; }
/* 'border-bottom' could also have been used */
HR { border-top: solid; }
A:link { color: blue; }
A:visited { color: red; }
A:active { color: lime; }
/* setting the anchor border around IMG elements requires contextual selectors */
A:link IMG { border: 2px solid blue; }
A:visited IMG { border: 2px solid red; }
A:active IMG { border: 2px solid lime; }
Copyright © XTR Systems, LLC
Related documents
Civil War Vocab
Civil War Vocab
Experian PO Box 2002 Allen, TX 75013 I dispute the reporting of the
Experian PO Box 2002 Allen, TX 75013 I dispute the reporting of the
Thank you for your interest in attending a - Tri
Thank you for your interest in attending a - Tri
8948907_187006_Resume 102015
8948907_187006_Resume 102015
Your_Solutions_LLC_-_New_Business3[1]
Your_Solutions_LLC_-_New_Business3[1]
Sarah Higgins CV - Chrysalis Center for Family Growth LLC
Sarah Higgins CV - Chrysalis Center for Family Growth LLC
Download
advertisement