Styles and Grace - I.T. at The University of Toledo

Download Report

Transcript Styles and Grace - I.T. at The University of Toledo

The Web With Style
Effectively Using
Cascading Style
Sheets (CSS)
1
What is in this Presentation
An introduction to the
technology
 Some features that make
Web design easier
 Frequently used capabilities
 Tips and “gotchas”
 References to take you
further

2
What are Style Sheets?

A way for web page designers to
separate the formatting of a
document from the HTML markup

A way of centrally managing the
styles for an entire web site
3
What are Style Sheets?

A way to layout web pages without
the use of complex tables and tricks

A way for users to take control of
how web pages are displayed
4
What are Style Sheets?
Database-Driven
Web Sites
Database-driven web
sites require that the
content be separated
from the style
Large sites benefit from
a centralized or
corporate style that can
be applied consistently
by anyone (everyone)
5
What are Style Sheets?
Documents
Style Sheet
Documents
with Style
6
Quick History

CSS1 released in December 1996


CSS2 released in May 1998


Around 50 properties for simple
formatting, fonts and colors
Additional 70 properties for more
advanced features like numbering,
cursors, and page breaks
Browsers are only now capable of
correctly implementing this technology
7
CSS Specifications
We use a few key styles in this presentation, the
rest can be found at:
CSS1
http://www.w3.org/TR/REC-CSS1
CSS2
http://www.w3.org/TR/REC-CSS2
8
Style Anatomy
Selector
h1 {
color: #0000FF;
font-size: 24pt;
}
Property
Declarations
Value
9
Types of Style Sheets
Each has a smaller scope …
<html>
<head>
Embedded Style
1
External Style file
.css
2
</head>
<body>
Inline Style
</boby>
</html>
3
10
External Style Sheets
mystyle.css
H1
{ color:#FF3355;
text-align:center}
h2,h3 { color: #22FFCC;
font-style: italic}
p { font-family:Arial,
Helvetica }
html code
<html>
<head>
<link rel=stylesheet
href=“mystyle.css”>
</head>
<body>
<h1>Heading</h1>
<h2>Heading</h2>
</body>
11
Embedded Style Sheets
Comment tag alerts older browsers to
<head>
ignore Styles they cannot read
<style type=“text/css”>
<!-h1 { font-family: Arial, Helvetica, Verdana;
color: blue;
text-align: center}
p { font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: red}
-->
</style>
</head>
12
Inline Style Sheets
<body >
<p style=“font-weight:bold;
background-color:blue;
text-align:center”>
This paragraph will be bold, and centered against a blue
background.
</p>
</body>
13
Calling Style Sheets

Linked (in the <HEAD>)


Embedded (in the <HEAD>)


<link rel=“stylesheet”
href=“style.css” type=“text/css”>
<style> h1 {color: #FFFFFF;} </style>
Inline (in the tag)

<p style=“color: #FFFFFF”></p>
14
Cascading Styles
A document can have more than one
style sheet defined
 Style declarations ranking

Designer
 User
 Browser


At same rank, last-defined style
declaration takes priority
15
CSS Lifesavers
Grouping Selectors
 Classes and IDs
 <DIV> and <SPAN>

Pseudo-elements
 Contextual Styles

16
Grouping Selectors

Instead of
H1 { color: #FFFF00; }
H2 { color: #FFFF00; }

Combine Rules
H1, H2 { color: #FFFF00; }
17
Classes and IDs

Classes


Allow styles for groups of elements
CSS: td.navbar { color: blue; }
HTML: <td class=“navbar”></td>
IDs

Allow styles for specific elements
CSS: #copyright { color: blue; }
HTML: <p id=“copyright”></p>
18
Style Classes
<head>
<style type=“text/css”>
Create your own section names
<!-p.norm {font-family: ‘Times New Roman’ ;
text-indent: .5in }
p.spec {font-family: Arial ;
font-style: italic ; text-indent: 1in }
-->
</style>
<body>
<p class=“norm”>Normal paragraph</p>
Apply them to HTML
<p class=“spec”>Special paragraph</p>
tags
</body>
19
Style Classes
<style type=“text/css”>
<! - .first {color: red }
-->
.first is the name of the class
</style>
<body>
<p>Welcome to your <span class=“first”>new
home</span></p>
</body>
20
DIV and SPAN


Tags designed for style sheets
DIV




Block elements (i.e., P and H1)
No blank space, just line break
e.g., div.heading1 { font-size: 24pt; }
SPAN


Inline element (i.e., A and IMG)
e.g., span.bold { font-weight: bold; }
21
Pseudo-elements


Special-case selectors
Anchors





Can use pseudo-elements with classes


a:link
a:visited
a:hover
a:active
e.g., a.navbar:active
Other pseudo-elements

:first-line, :first-letter
22
Contextual Selectors

Allow definition of styles for elements
within elements
CSS:
td.navbar a { color: #FFFFFF; }
HTML:
<td class=“navbar”>
<a href=“url”>text</a>
</td>
23
Common CSS Properties
CSS Units
 Fonts
 Colors
 Backgrounds
 Text & Alignment
 Margins & Padding

24
CSS Units


Used for specific heights and lengths
CSS supports several length units






px – Pixels – screen dots
pt – Points – font sizes
in, cm – Inches and centimeters
% - percent of the current/parent font
em – height of current font
Pixels vs. Em


For easiest/best design control – pixels
For best flexibility/accessibility – % or em
25
Fonts

font-family
Ordered list of font names
 Quote names with spaces: e.g., “Arial Black”
p.arial
{

font-family: Arial, Helvetica, sans-serif;
}

font-size
larger, smaller, or specific height
p.big { font-size: 60px; }

26
Fonts

font-style
normal or italic
p.plain { font-style: normal; }


font-weight
normal, lighter, bold, or bolder
p.bolder { font-weight: bolder; }

27
Colors

color:



Named Colors: red, blue, green
Hex: #FFCC00, #FC0
RGB values: rgb(123, 123, 123)
p.green { color: #00FF00; }

background-color:
color or transparent
p.highlight { background-color: #FFCC00; }

28
Backgrounds

background-image:


none or url(http://imageurl)
background-repeat:

repeat, repeat-x, repeat-y, no-repeat
body {
background-image: url(“bg1.gif”);
background-repeat: repeat-x;
}
29
Text

Line-height
Normal, number, length, percentage
p.wellspaced { line-height: 150%; }


Text-align
left, right, center, justify
p { text-align: justify; }

30
Text

Vertical-align
top, middle, bottom, sub, super
td.heading { vertical-align: top; }


Text-decoration
none, underline, overline, line-through
p.strikeout {
text-decoration: line-through;
}

31
Margins & Padding
Text
Text
margin padding Text
Text

Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
fro
fro
fro
fro
padding margin
Margin



Text
Text
Text
Text
The space between this and other elements
margin-top, margin-right, margin-bottom,
margin-left
Shortcut


margin: 5px 10px 5px 10px;
Values are in clockwise order
32
Margins & Padding
Text
Text
margin padding Text
Text

Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
fro
fro
fro
fro
padding margin
Padding



The space between the margin and the
element
padding-top, padding-right, padding-bottom,
padding-left
Comparable to TABLE’s cell-padding
33
Tips and Gotchas
Gosh Darn Browsers
 Some Tips
 Degrading Gracefully

34
Gosh Darn Browsers

Internet Explorer 4 & 5


Netscape 4


Very stable and complete CSS support
6.0 Browsers?


Does some of the basics but really not very
good
Opera 5


Probably the best mainstream implementation
of CSS
Netscape and IE 6 both seem to
Check CSS Bugs and Workaround site
35
Some Tips

Always define a generic font last


End font-family declarations with serif, sansserif, cursive, fantasy, or monospace
body {
font-family: Arial, Helvetica, sansserif;
}
Define font styles for BODY, P, and TD

TDs don’t inherit font sizes, and font settings
are sometimes lost after tables
body, p, td { font-size: 12pt; }
36
Just Some Tips

Use linked style sheets
Makes updates easier
 Your HTML is cleaner


Test
Different browsers
 Different platforms

37
Degrading Gracefully

Stick to using tables for layout


If style sheets are removed, the page
should still be readable


CSS layout not working 100% correctly yet
Use “simple” HTML (e.g., H1 and P)
Avoid buggy properties


Cause pages to go haywire or look
dramatically different in other browsers
See “CSS Bugs and Workarounds”
38
Print References

Cascading Style Sheets,
Second Edition: Designing
for the Web
by Hakon Wium Lie, Bert Bos, Robert
Cailliau

Cascading Style Sheets:
The Definitive Guide
by Eric A. Meyer
39
Online References

WebReview.com Style Reference

Webmonkey StyleSheet Guide

CSS Bugs and Workarounds

TopStyle Pro 2.0
http://www.webreview.com/style/
http://www.webmonkey.com/reference/stylesheet_guide/
http://css.nu/pointers/bugs.html
http://www.bradsoft.com/topstyle/
40