1. Cascading Style Sheets
Robin Burke
IT 130

2. Outline Style vs content CSS Syntax CSS properties Selectors Fonts
Alignment
Color
Selectors

3. What is a style? An association between Not Some exceptions
a set of display properties
a logical unit of HTML content
Not
document content
Some exceptions
numbered lists, captions, etc.
Not what but how

4. Result HTML defines structure
Layout and display decisions encoded in the stylesheet
stylesheets can be device-specific
Designer can easily change page format without affecting HTML
Loose coupling between content decisions and style decisions

5. Associating style with HTML
Within HTML elements
Within HTML "head" element
Separate file

6. Syntax of CSS Series of style declarations Each declaration Example
selector { property:value; }
Example
h1 { font-color: blue; }
Multiple property/values pairs possible
h1 { font-color: blue; font-weight: bold; }
selector
attribute
value

7. Examples in-line style embedded style linked style
style attribute in element
style=" ...style declaration here... "
embedded style
<style>
... multiple style declarations here...
</style>
linked style
<link href=" ...stylesheet url here... " rel="stylesheet" type="text/css">
separate file has style information

8. Style inheritance Styles are inherited by containment Meaning
unless otherwise specified
an element has the same style as its container
more or less
To change the whole document
change the style for the body element

9. Examples

10. CSS Properties Many, many CSS properties
Not all implemented in browsers
We will talk about common ones
fonts
colors
not positioning
Reference material essential!

11. Fonts Fonts are very complex Multi-dimensional platform-specific
copyrighted
different standards
Multi-dimensional
size
weight
style
ornament
family

12. Font families Categories Specific fonts serif sans-serif monospace
cursive
Specific fonts
Times Roman
Arial
Courier

13. font-family styles Best practice Examples
PC font, Mac font, generic font;
Examples
font-family: Arial, Helvetica, sans-serif;
font-family: Times Roman, serif;

14. Font sizes Options Examples Try to use built-in sizes if possible
Relative
Absolute
Units
in, px, em, pt, pc
Examples
font-size: larger
font-size: 12 pt
font-size: 50 px
font-size: small
Try to use built-in sizes if possible
small (absolute)
larger (relative)
more flexible for device variety

15. Spacing Can control letter and line spacing letter-spacing
word-spacing
line-height

16. Alignment text-align vertical-align horizontal alignment
like "align" attribute
vertical-align
like "valign" attribute
but more possibilities

17. Other font style choices
text-weight
controls boldness
text-decoration
underlining, strike-through
text-transform
uppercase, lowercase
font-variant
small-caps
font-style
italic

18. Colors What can be colored? Options text background links color names
"blue", "yellow"
what if I have a different color

19. Specifying colors HTML 3.2 introduced the color attribute
Colors are built from primary components
red, green, blue
To get a specific color
say how much of each component you want
0-255
Example
red=0, green=0, blue=255 (bright blue)
red=0, green=0, blue=177 (darker blue)
BUT
how to turn into an attribute

20. Color encoding Simplest idea Better idea? Actual HTML implementation
<p red="0" green="0" blue="107">
too wordy
Better idea?
<p color="00107">
ambiguous
<p color=" ">
possible, but not part of standard
some values illegal
Actual HTML implementation
<p color="#00006B">
huh?

21. Hexidecimal encoding A number system with 16 digits Examples In hex
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Examples
6B = 6* = 107
B1 = 11* = 177
FF = 15* = 255
In hex
0-255 decimal = 00-FF
<p color="#00006B">

22. Web color HTML 4.0 uses CSS predefined name hex triplet
color attribute in some elements
CSS
or rgb expression
rgb (0, 0, 107)
color property

23. Links links can have state-dependent colors link – unvisited
visited – visited
active – while being clicked
hover – while the cursor is there

24. Link colors
Handled via "pseudo-classes" relative to the anchor a element
a:link
a:visited
Example
a:link { color: red; }
a:visited { color: blue; }

25. Link color example a:link { color: red; }
a:visited { color: blue; text-decoration: none; }
a:active { font-weight: bolder; }
a:hover { color: green; }

26. Background color
In HTML, only certain elements can have colored backgrounds
whole page
table components
In CSS, background of any element
Example
<p style="background-color: red;">

27. Background images Background images With CSS limited in HTML
either large or tiled
With CSS
Total control over the background image

28. Example
Background options

29. Selectors what element(s) a style is applied to any html element name
element relationships
a b
b is a child of a
pseudo-classes
a:visited
designer-defined classes

30. Types of selectors element names element containment pseudo-classes
h1 { font-family: Courier, monospace; }
element containment
table tr th a { font-decoration: none; }
pseudo-classes
a:visited { color: blue; }

31. Lists can choose different kinds of bullets
can control nesting behavior with selectors
Example

32. Classes Selectors with user-defined behavior Inside HTML element
usually in conjunction with HTML element
Inside HTML element
class attribute
In CSS
selector = element_name.class_name
Also .class_name for same class in different elements
Example
yes/no list items

33. Classes While writing HTML While writing CSS
Identify different areas of page requiring different treatment
Come up with descriptive class names for each
Insert class attribute in HTML elements
While writing CSS
create styles for each class
associate with appropriate class selector

34. Id Also a selector Example but unique to a single element
#sidebar { background-color: grey; }

35. Generic blocks How to identify a chunk of content Two options Example
that is not an HTML element already
Two options
paragraph-like? Use "div"
block format
word-like? Use "span"
in-line format
Example

36. Homework #3 Create a stylesheet and have two pages use it
Third page (with embedded stylesheet) links to the two pages
Four files
favorite1.html, favorite2.html, hwk3.css, hwk3.html