CWP: Cascading Style Sheetsuserhome.brooklyn.cuny.edu/irudowsky/CIS53/lectures/HTML-CSS.pdf · 5...
35
1 Core Web Core Web Technolgies Technolgies Marty Hall Marty Hall Larry Brown Larry Brown Cascading Style Sheets
Transcript of CWP: Cascading Style Sheetsuserhome.brooklyn.cuny.edu/irudowsky/CIS53/lectures/HTML-CSS.pdf · 5...
1
Core Web Core Web TechnolgiesTechnolgiesMarty Hall Marty Hall Larry BrownLarry Brown
CascadingStyle Sheets
2
Agenda• Specifying style sheet rules• External and inline style specifications• Creating new HTML elements through style
sheet classes• Specifying font and text properties• Controlling foreground and background
properties• Netscape LAYERs• Creating layers through style sheets
3
Benefits of Cascading Style Sheets
• Powerful and flexible way to specify the formatting of HTML elements– Can define font, size, background color, background
image, margins, etc.• Share style sheets across multiple
documents or entire Web site• Can specify a class definition for a style,
effectively defining new HTML elements• Rules are applied in a hierarchical manner
(precedence rules)
4
Cascading Style Sheets Solve a Common Problem
• HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.– As the two major browsers - Netscape and IE - continued to
add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
• To solve this problem, the World Wide Web Consortium (W3C) created STYLES in addition to HTML 4.0.– Both Netscape 4.0 and Internet Explorer 4.0 support
Cascading Style Sheets.
5
Cascading Style Sheets Solve a Common Problem
• Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2.
• Styles are normally saved in files external to your HTML documents. – External style sheets enable you to change the appearance and
layout of all the pages in your Web, just by editing a single CSS document..
• CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. – As a Web developer you can define a style for each HTML element
and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web areupdated automatically.
6
Cascading Style Sheets• CSS, Level 1 (1996)
– Concerned with applying simple styles to HTML elements– http://www.w3.org/TR/REC-CSS1
• CSS, Level 2 (1998)– Supports media-specific style sheets (visual browsers, aural devices,
printers, braille devices)– http://www.w3.org/TR/REC-CSS2
• CSS, Level 3 (draft 2001)– Focused on modularization of the CSS specification– http://www.w3.org/TR/css3-roadmap/
• Note: – CSS1 is supported by Netscape and Internet Explorer 4.x and above– See http://www.webreview.com/style/css1/charts/mastergrid.shtml
for a summary of browser compatibility
7
Specifying Style Rules• General form of rule
selector { property: value }
orselector { property1: value1;
property2: value2;...propertyN: valueN }
• ExampleH1 { text-align: center;
color: blue }
8
Fizzics1.html, Example(no style sheet)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>New Advances in Physics</TITLE>
</HEAD><BODY><H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2>In a startling breakthrough, scientist B.O. "Gus" Fizzicshas invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>....
</BODY></HTML>
9
Fizzics1.html, Result(no style sheet)
10
Fizzics2.html, Example(with style sheet)
• Style information<HEAD><TITLE>Document Title</TITLE><STYLE TYPE="text/css"><!--BODY { background: URL(images/confetti-background.jpg) }H1 { text-align: center;
font-family: Blackout }H2 { font-family: MeppDisplayShadow }STRONG { text-decoration: underline }--></STYLE>
</HEAD>
11
Fizzics2.html, Result(with style sheet)
12
External Style Sheets
• Specify link to external style sheet in the HEAD section of the HTML document<LINK REL=STYLESHEET
HREF="Sitestyle.css" // Absolute or relative linkTYPE="text/css">
• Sitestyle.css/* Example of an external style sheet */
H1 { text-align: center;font-family: Arial
}H2 { color: #440000;
text-align: center;font-family: Arial Black, Arial, Helvetica, sans-
serif}
...
13
External Style Sheets<html><head>
<link rel=“stylesheet” type=“text/css” href="ex2.css" >
</head> <body> <h1>This is a header 1</h1><hr>
<p>You can see that the style sheet formats the text</p>
<p><a href="http://www.microsoft.com" target="_blank">This is a link</a>
</p> </body>
</html>
ex2.cssbody {background-color:
tan}h1 {color:maroon; font-
size:20pt} hr {color:navy} p {font-size:11pt; margin-
left: 15px} a:link {color:green} a:visited {color:yellow}a:hover {color:black}
a:active {color:blue}
14
Internal Style Sheet• An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head section by using the <style> tag
<head><style type="text/css">
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
</style> </head> The browser will now read the style
definitions, and format the document according to it.
• Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding the style tag in an HTML comment element <!-- and -->
15
Inline Style Specification• Use the STYLE attribute defined for each
HTML element to directly specify the style• Example
...<H1>New Advances in Physics</H1><P STYLE="margin-left: 0.5in;
margin-right: 0.5in; font-style: italic">
This paper gives the solution to threepreviously unsolved problems: turning lead into gold,antigravity, and a practical perpetual motion machine....
16
Cascading Order of Precedence• Closer styles take precedence over distant
styles– First, linked style sheets are applied– Then internal style sheets are applied– Finally applies inline styles
• Properties defined for a specific class of a tag take precedence over properties defined for a tag in general
• When multiple properties are defined for the same tag, the last property defined is applied
17
Defining Style Classes• To define an element style class proceed
the HTML element by a period and classname
// Define an "abstract" paragraph typeP.abstract { margin-left: 0.5in;
margin-right: 0.5in;font-style: italic }
• To use, supply the name of the style class in the CLASS attribute of the HTML element
<H1>New Advances in Physics</H1><P CLASS="abstract">This paper gives the solution to three previouslyunsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.
18
Defining Style Classes• To define a global style class, omit the
element name// Style available to all elements.blue { color: blue; font-weight: bold }
• To use, simple specify the style class in the CLASS attribute of the HTML element
<H2 CLASS="blue">A Blue Heading</H2>
<!-- Apply to a section of text -->This text is in the default color, but<SPAN CLASS="blue">this text is blue.</SPAN>
19
Useful Font Properties• font-weight
– Relative weight (boldness) of font– normal | lighter | bold | bolder | 100 | 200 | ... | 900
H1 { font-weight : 200 }H2 { font-weight : bolder }
• font-style– Font face type within a family– normal | italic | oblique
P { font-style : normal }TH { font-style : italic }
20
Useful Font Properties, cont.• font-size
– Either relative or absolute size of font– pt, pc, in, cm, mm | em, ex, px, % |
xx-large | x-large | large | medium | small | x-small |xx-small | smaller | larger
STRONG { font-size: 150% }P { font-size: 14pt }P { font-size: xx-large }
• font-family– Typeface family for the font
H1 { font-family: Arial }
21
CSS text rule examples
Rule Presentation
h2 {font-family:Arial; font-style:italic; color:blue}
Heading 2 in blue Arial italicised text
p {font-family:Arial; font-weight:bold; color:red}
A paragraph of bold Red text
p {background:yellow; font-family:Arial; color:red}
A paragraph of Red text on a yellow background
p {font-family:Arial; font-size:large; color:blue}
Large Blue Text
em {background:red; color:white; font-style:italic}
Text withemphasized
text
22
CampBearClaw.html, Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Camp Bear Claw</TITLE><LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css">
</HEAD><BODY><H1>Camp Bear Claw</H1>We have the following activities:<H2 CLASS="archery">Archery</H2><H2 CLASS="arts">Arts and Crafts</H2><H2 CLASS="horseback">Horseback Riding</H2><H2 CLASS="hiking">Hiking</H2><H2 CLASS="campfire">Campfire Song Times</H2><H2 CLASS="java">Java Programming</H2></BODY></HTML>
23
CampBearClaw.cssH1 { text-align: center;
font-family: Funstuff }H2.archery { font-family: ArcheryDisplay }H2.arts { font-family: ClampettsDisplay }H2.horseback { font-family: Rodeo }H2.hiking { font-family: SnowtopCaps }H2.campfire { font-family: Music Hall }H2.java { font-family: Digiface }
24
CampBearClaw.html, Result
25
Useful Text Properties• text-decoration
– Describes text additions or “decorations” that are added to the text of an element
– none | underline | overline | line-through | blinkP { text-decoration: underline }
• vertical-align– Determines how elements are positioned vertically– top | bottom | baseline | middle | sub | super | text-top |
text-bottom | %• text-align
– Determines how paragraphs are positioned horizontally– left | right | center | justify
26
Useful Text Properties, cont.• text-indent
– Specifies the indentation of the first line of the paragraph– +/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */
• line-height– Specifies the distance between two consecutive baselines
in a paragraph– normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% }
.triple { line-height: 3 } /* 3x the font size */DIV { line-height: 1.5em }
27
Bates.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>An Open Letter to the IRS</TITLE><LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css">
</HEAD><BODY BACKGROUND="images/bond-paper.jpg"><P CLASS="rhead">April 1, 2001<HR><P CLASS="rhead">William A. Bates<BR>Macrosoft Corporation<BR>Blumond, WA 12345<P CLASS="lhead">Internal Revenue Service<BR>Philadelphia, PA 67890<P><BR>Dear Sirs,<P CLASS="body">I am writing to inform you that, due to financial difficulties, ...
28
Bates.cssP { margin-top: 5px }P.rhead { text-align: right;
margin-right: 0.5in;font-family: sans-serif }
P.lhead { font-family: sans-serif }P.body { text-align: justify;
text-indent: 0.5in }P.foot { margin-left: 60%;
line-height: 300% }
29
Bates.html
30
Useful Foreground and Background Properties
• color– Color of the text or foreground color– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) |
rgb(rrr%, ggg%, bbb%)
P { color : blue }H1 { color : #00AABB }H3 { color : rgb(255, 0, 0 ) } /* red */
• background-image– none | url(filename)– Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif);}
31
Useful Foreground and Background Properties, cont.
• background-repeat– Specifies how to tile the image in the region– repeat | repeat-x | repeat-y | norepeat
BODY {background-image: url(Bluedot.gif); background-repeat: repeat-x;
}
• background– Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x }
32
Cabinets.html, Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Joe's Cabinets</TITLE><LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css">
</HEAD><BODY><CENTER><TABLE WIDTH=360 HEIGHT=199><TR><TD ALIGN="CENTER" CLASS="banner">Joe's Cabinets
</TABLE></CENTER><P>Welcome to Joe's Cabinets. We specialize in<UL><LI>Custom Cabinets<LI>Kitchen Remodeling<!-- Etc -->
</UL><!-- Etc --></BODY></HTML>
33
Cabinets.css.banner { background: url(images/boards.jpg) repeat-x;
font-size: 50pt;font-family: Arial Rounded MT Bold }
34
Cabinets.html, Result
35
Appendix, Length Units
Unit Description cm Centimeters (absolute unit) em The height of the current font (relative unit) ex The height of the letter “x” in the current font (relative unit) in Inches (absolute unit) mm Millimeters (absolute unit) pc Picas; 6 picas per inch; 12 points per pica (absolute unit) pt Points; 72 points per inch (absolute unit) px Pixels (relative unit)
