2. What we will learn today
Why we use CSS
Three ways to use CSS in an XHTML
document
How to write a style declaration
How to target XHTML elements for styling
How to change the style of that element
How to style text
3. Why CSS?
Separation of content from markup
Cleaner code
Easier to manage style changes
4. Why not Dreamweaver or
FrontPage?
They produce messy code
Don’t always do what you want
Hard to troubleshoot problems
You are NOT in control
5. What is CSS?
A rule that defines a particular style that is
applied to you XHTML markup
A rule can define
Font-size of the text of paragraphs
Thickness of a border around an image
Position of a headline
Color of a background
Etc.
6. Three ways to style
Inline Styles
Embedded Styles
Linked
7. Inline
<p style="font-size: 25pt; font-weight:
bold; font-style: italic; color: red;">By
adding inline CSS styling to this
paragraph, we can override the default
styles.</p>
8. Inline Styles
Inline styles have a narrow scope
Not much better than using ‘font’ tags
for everything
Should generally be AVOIDED
9. Embedded
<head>
<title>Inline Style Example</title>
<style type="text/css">
h1 {font-size: 2em; font-weight:bold;}
p { color:blue; }
</style>
</head>
<body>
<h1>First level heading tag</h1>
<p>Here is the blue paragraph to styled
by the embedded stylesheet.</p>
</body>
</html>
10. Embedded
Scope limited to the page
Page styles win out over external
style sheets, but they lose out to
inline styles
13. Linked
Style sheet
Separates our markup and styles
Can be linked to multiple pages
Make changes across an entire site
Create different styles for print or
handheld devices
15. Anatomy of a CSS rule
Selector Declaration
p {color: red}
Property Value
16. Anatomy of a CSS rule
Selector Declaration
h1 {font-size: 10px}
Property Value
17. Grouping declarations
p {color:red}
p {font-size:12px}
p {line-height:15px}
Multiple declarations can be contained within a rule
p {color:red; font-size:12px; line-height:15px;}
23. Classes and IDs
Give us the ability to assign styles
without regard for the document
hierarchy
example
24. Classes
Can names can be used multiple
times in a document
Is represented in the selector by a
period ‘.’
25. IDs
An ID name can only be used ONCE
in any html document
Is represented in the selector by a
hash ‘#’
Otherwise work the same as a class
Example
26. When to use Classes vs. IDs
Try to used tag and descendent
selectors as much as possible
Use classes when you can’t use a
tag/descendent, and you need to
target multiple elements on a page
IDs are typically used to target entire
sections of a page, usually in a ‘div’
tag.
27. Universal Selector
Represents all elements
* {color:green;}
Universal Selector
p * em {font-weight: bold;}
28. Selector Summary
Tag Selector
Descendent Selector
Class and ID Selectors
Universal Selector
Child Selector -- IDWIMIE
35. Styling Fonts
First rule of fonts in web design:
You can’t use the fonts you want.
Sorry.
Times, Arial, Verdana, Courier
36. Win XP and Mac OS X
Arial Franklin Gothic Tahoma
Arial Black Georgia Times New
Roman
Arial Narrow Impact Trebuchet MS
Century Gothic Monotype Corsiva Verdana
Comic Sans MS Palatino Webdings
Courier New Symbol
39. Sizing fonts
Three types of values to size fonts:
Absolute
Pixels, inches, etc.
Relative
Percentages or ems
Keywords
x-small, small, large, x-large, etc.
40. Sizing with ems
body {font-family: verdana, arial, sans-
serif; font-size 100%;}
p {font-size: 1em;}
42. Font Property Shorthand
p {font-weight: bold; font-style: italic;
font-variant: small-caps; font-size: 1em;
font-family: verdana, arial sans-serif;}
p {font: bold italic small-caps 1em
verdana, arial sans-serif;}
43. Text properties
Line-height
p {line-height: 1.2;}
p {font: 1em/1.3; verdana, arial, sans-serif;}
Creates space between the lines of a block of text.
Text-align
h1 {text-align: center;}
p {text-align: justify;}
Sets overall spacing between words.
Text-indent
p {text-indent: 3em;}
Sets the start position of the text box in relation to its containing element
44. Text properties
Text-Decoration
.retailprice {text-decoration: strikethrough}
a:link {text-decoration: none}
Allows you to set a type of decoration to your text. Values include:
underline, overline, strikethrough, and blink.
Text-Transform
p.yelling {text-transform: capitalize;}
Changes capitalization of text within an element. Values include uppercase,
lowercase, capitalize, none.
45. Text properties
Letter-spacing
p {text-indent: 3em;}
Sets overall spacing between letter. Print typographers refer to this as
‘Tracking’
Word-Spacing
p {text-indent: 3em;}
Sets overall spacing between words.
Vertical-align
span.raised {font-size: .4em; vertical-align: 50%}
Moves type up or down with respect to the baseline.
