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