Cascading Style Sheets CSS: PixelLevel Control with HTML Ease

1
Cascading Style Sheets (CSS) Pixel-Level
Control with HTML Ease
Lisa Bartle, Reference Librarian Cal. State
University, San Bernardino LBartle_at_csusb.edu 909-5
37-7552 An Infopeople Workshop
2
Introductions

• Participants
• Name
• Position
• What you hope to do with CSS

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
3
Goals for This Class

• Introduce CSS and 23 properties
• Benefits of CSS over straight HTML
• Introduce free CSS tools

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
4
CSS Zen Garden
http//www.csszengarden.com/ One content, many
layouts.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
5
What is CSS?

• A text file used with an HTML file that defines
  rules for how the HTML will look
• A kind of style sheet
• A list of rules telling the HTML how to display
• One of at least two style sheets that defines the
  presentation of the HTML content.

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
6
HTML Alone vs CSS

• HTML and CSS are not competitors so much as
  allies.
• HTML for style is becoming defunct.
• HTML is for content.
• CSS is for style.

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
7
CSS Benefits

• Easy to learn
• Better control of presentation to user
• Easy updating of multiple pages
• Increase in pages loading speeds
• Better accessibility for disabled users

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
8
Thinking Inside the Box
http//weblog.dion.nu/
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
9
CSS Galleries
CSS galleries are sites where CSS designs are
displayed for admiration and imitation.

• CCS Beauty (http//www.cssbeauty.com/gallery/)
• CSS Drive (http//www.cssdrive.com/)
• CSS Website (http//www.css-website.com)

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
10
CSS Rule Structure
A CSS rule is made up of a selector and a
declaration.

• selector
• property value

A declaration is made up of a property and a
value.
Carriage returns and spaces are ignored.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
11
A Sample of Selectors
Body property value H1 property
value H2 property value P
property value
A selector, here in red, is often an element of
HTML.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
12
A Sample of Properties and Values
Body background purple H1 color green
H2 font-size large P color FF0000
/hexadecimal for red/ P font-family Arial

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
13
Comments in CSS

• Explain the purpose of the coding
• Help others read the code
• Help you when youve forgotten what it all means
• Starts with / and ends with /

/ Purple and yellow make a good look. / /
Change header size. /
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
14
Standard 17 CSS Colors

• Navy
• Olive
• Orange
• Purple
• Red
• Silver
• Teal
• White
• Yellow

• Aqua
• Black
• Blue
• Fuchsia
• Gray
• Green
• Lime
• Maroon

Also on your Quick Reference sheet!
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
15
Class Page Layout
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
16
Divs in HTML
A div is a self-contained element that can hold
whatever we put inside it.
content id"title"content content iv id"news"content id"menu"content contentdiv
Divs in HTML file match Divs in CSS file.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
17
Divs in CSS
container property value title
property value menu property value
main property value news property
value footer property value
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
18
Box Properties

• Background-color
• Width
• Padding
• Margin

• Border-width
• Border-color
• Border-style

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
19
Background-Color
The background-color property defines the color
of an elements background.
container background-color blue title
background-color white menu
background-color red main
background-color green news
background-color purple footer
background-color black
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
20
Relative Positioning
Relative positioning is scaleable, so is
preferred for Web presentation.
Percent width25 or height25 Pixels
width100px or height500px
Em width .5em or height 3em
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
21
Grouping, Part 1
Group the same selector with different
declarations together on one line.
H1 color black H1 font-weight bold H1
background white
H1 color black font-weight bold background
white
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
22
Grouping, Part 2
Group different selectors with the same
declarations on one line.
H1 color yellow H2 color yellow H3
color yellow
H1, H2, H3 color yellow
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
23
Width
Width defines the width of an element.
container background-color blue width90
menu background-color red width 15
main background-color green width 85
news background-color purple width 12
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
24
Float (left, right)
Float makes elements float to the right or left
of the screen, positioned where they are in the
HTML. Floating permits word wrapping.
menu background-color red width 15 float
left news background-color purple width
10 float right
main background-color green width 85
float right
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
25
Clear (left, right, both)
The clear property disallows floating elements to
the right, left, or both right and left. A
companion property to float.
footer background-color black clear both
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
26
Border Properties

• Border-style
• None
• Solid
• Double
• Dotted
• Dashed
• Groove
• Ridge
• Inset
• Outset

• Border-color
• Blue
• ff0000
• rgb(250,0,255)

• Border-width
• Thin
• Medium
• Thick

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
27
Borders, Examples
You can define the entire border or only the top,
bottom, left, or right. You can define the border
using one declaration.
Border-width medium Border-style
outset Border-color lime Border-bottom-color
teal Border-right-width thin Border-top-style
dashed
Border thick outset silver
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
28
Margin, Border, Padding
Standard image of margins, borders, and padding.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
29
Padding
Padding is the space between the text/content and
the border. You can use padding for all around
the element or padding-right, padding-left,
padding-top, and padding-bottom.
Padding 1em
Padding-left 1em
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
30
Margin
Margin is the space around an element. You can
use margin for all around the element or you may
use margin-left, margin-right, margin-top, and
margin-bottom.
Margin 1em
Margin-right 1em
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
31
Text Properties

• Color
• Letter-spacing
• Word-spacing
• Text-align
• Font
• Text-Transform
• Text-Decoration

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
32
Letter-Spacing
The letter-spacing property creates more white
space between letters in words.
H1 color red
H1 color red letter-spacing 5px
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
33
Word-Spacing
The word-spacing property creates more white
space between words.
H1 color FF0000 letter-spacing 5px
H1 color FF0000 letter-spacing 5px
word-spacing 15px
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
34
Text-Align
The text-align property can center, justify, or
align text to the right or left.
H1 color FF0000 letter-spacing 5px
word-spacing 15px
H1 color FF0000 letter-spacing 5px
word-spacing 15px text-align center
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
35
Font
The font property defines the family, size,
style, weight, and variants of fonts.
Font-family (Times New Roman, Courier, Arial,
Helvetica, serif, sans-serif, fantasy, cursive,
monospace) Font-size (percentage, small medium,
large, x-small, xx-small, x-large,
xx-large) Font-style (normal, italic) Font-weight
(normal, bold)
Font italic bold serif
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
36
Text-Transform
The text-transform property allows switching
between uppercase, lowercase, and capitalized
words without regard for how the words are typed
in HTML.
H3 text-transformcapitalize
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
37
Text-Decoration
The text-decoration property allows the text to
be underlined, overlined, or line-throughed.
h2 text-decoration line-through
h2 text-decoration underline
h2 text-decoration overline
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
38
Links
The links property defines how inactive, hovered,
active, and visited links appear to the user.
alink color silver avisited color
yellow aactive color green ahover color
orange background black font-weight bold
font-size 150
You may use all the font properties for links,
too, and the background property.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
39
Including Images

• Properties for working with images include
• Background-image
• Background-repeat
• Background-position
• Background-attachment

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
40
Background-Image
The background-image property sets an image in
the background of an element.
main background-imageurl(mountainsandsky.jpg)

• Background images and colors are layered.
• If not transparent, the last one listed is
  visible.

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
41
Background-Repeat
The background-repeat property sets an image in
the background of an element and tiles, or
repeats, it. Tiling is the default.
main background-imageurl(fairytransparent.gif)
background-repeatno-repeat
repeat

• Possible Values
• Repeat
• Repeat-x (horizontal)
• Repeat-y (vertical)
• No-repeat

no-repeat
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
42
Layering
Background colors and images are layered like
sheets of paper one on top of the other. Remove
background colors and you will see your image.
container width90 /background-color
blue / title Padding 1em
/background-color white / menu width 15
float left Padding 1em /background-color
red /
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
43
Image Positioning

• Image positioning is accomplished using two
  properties
• Background-position
• Background-attachment

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
44
Background-Position
The background-position property positions the
image using either combined keywords top, bottom,
left, right, and center length values or
percentage values.
Background-position right top
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
45
Background-Attachment
The background-attachment property fixes or
scrolls an image in the browser window. Values
include fixed and scroll.
Background-attachment fixed
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
46
Cool Tools

• CSS Galleries
• Color Generators
• Layout Templates
• Font Comparison
• CSS Web development tools

See your Resources for CSS handout.
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
47
Best Sites to Learn More

• www.w3schools.com/css/
• www.glish.com/css/
• www.html.net/tutorials/css/
• www.w3schools.com/css/css_reference.asp

Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease
48
Evaluation Time
Please go to infopeople.org/wseval.html and
complete the evaluation.
Thank you!
Cascading Style Sheets (CSS) Pixel-Level Control
with HTML Ease