Cascading Style Sheets CSS

1
Cascading Style Sheets - CSS

• Web Publishing Design
• Fairport High School

2
What is a CSS?

• Wouldn't it be nice if you could say to all
  browsers that enter your page
• "This is how I want you to handle my text."
• specify all H3 commands arial font.
• specify all paragraphs indent a half inch.
• specify a distance between your lines.

3
Implementing the CSS

• You can put a separate style sheet on each page.
• or
• You can create one style sheet and link all your
  pages to it

4
One Style Sheet one page

• This is the way style sheets are being used most
  often.
• To see a couple in action
• USA Today or ESPN.
• Both use style sheets on their pages.

5
Style Sheet Rules

• It must be within the ltHEADgt and lt/HEADgt
  commands.
• The text must be surrounded by
• ltSTYLE TYPE"text/css"gt and lt/STYLEgt
• The style sheet is text so if you just type it on
  the page, it will show up.
• In addition to the style commands above, surround
  the text with lt--! and --gt Those commands make
  the text invisible.

6
Style Sheet

• ltHEADgt
• ltSTYLE TYPE-"text/css"gt
• lt--!
• Style Sheet information goes in here...
• --gt
• lt/STYLEgt
• lt/HEADgt

7
Basic Format

• TAG definition definition definition
• H2 font-size 16pt font-style italic
  font-family arial
• Notice the thing before the definition is a ""
  not a parentheses or a "".
• Notice the spaces! You don't have to leave them,
  but it helps to be able to read your style sheets
  later.
• Don't forget the semi-colons.
• Notice each definition is separated by a
  semi-colon, but the definition contains a colon!
  You're not limited either.

8
What HTML Tags Can I Define?

• You can define any HTML tag.
• Most commonly used
• H1 through H6
• P
• BODY
• Alink (That denotes the unvisited link)
• Avisited (That denotes the visited link)
• DIV (That denotes a division of the page)

9
The Definitions the 28 The FONT/TEXT
Definitions

• font-family
• Denotes typeface.
• H2 font-family arial
• font-style
• Denotes the style of the text.Use normal,
  italic, or oblique for commands.
• H3 font-style small caps
• font-size
• Denotes the size of the text.Specify in points
  (pt), inches (in), centimeters (cm), pixels (px),
  or percentage ().
• H4 font-size 20pt

10
The Definitions the 28 The FONT/TEXT
Definitions

• font-weight
• Denotes text presence.Specify in extra-light,
  light, demi-light, medium, bold, demi-bold, or
  extra-bold.
• Alink font-weight demi-light
• font-variant
• Denotes a variant from the norm.Specify normal
  and small-caps
• H2 font-variant small-caps
• text-align
• Justifies the alignment of text.Specify as left,
  center, or right
• H1 text-align center

11
The Definitions the 28 The FONT/TEXT
Definitions

• text-decoration
• Lets you decorate the text (duh).Specify as
  italic, blink, underline, line-through, overline,
  or none.
• Avisited text-decoration blink
• text-indent
• Denotes margins. Most often used with the ltPgt.
  Make sure you use lt/P also!gtSpecify in inches
  (in), centimeters (cm), or pixels (px).
• P text-indent 1in
• word-spacing
• Denotes the amount of spaces between words.
  Specify in points (pt), inches (in), centimeters
  (cm), pixels (px), or percentage ().
• P word-spacing 10px

12
The Definitions the 28 The FONT/TEXT
Definitions

• letter-spacing
• Denotes space between letters.Specify in points
  (pt), inches (in), centimeters (cm), pixels (px),
  or percentage ().
• P letter-spacing 2pt
• text-transform
• Denotes a transformation of the text.Specify
  capitalize, uppercase, lowercase.
• B text-transform uppercase
• color
• Denotes color of text.See here for a few color
  codes. If you use the six digit hex codes, make
  sure you place a hash mark () in front.
• H3 color FFFFFF

13
The Definitions the 28The MARGIN/BACKGROUND
Commands

• Note! When used with the "BODY" tag these
  commands affect the entire page!
• margin-left
• margin-right
• margin-top
• Denotes space around the "page".Specify in
  points (pt), inches (in), centimeters (cm), or
  pixels (px).
• BODY margin-left 2in
• P margin-right 12cm
• BODY margin-top 45px

14
The Definitions the 28The MARGIN/BACKGROUND
Commands

• margin
• Denotes all three margin commands above in one
  command.The pattern follows top, right, and then
  left.
• P margin 3in 4cm 12px (note no commas or
  semi-colons)
• line-height
• Denotes space between lines of text.Specify in
  points (pt), inches (in), centimeters (cm), or
  pixels (px), or percentage ().
• TEXT line-height 10px
• background-color
• Denotes page's background color.Specify the
  color in hex or word codes, or use "transparant"
• BODY background-color ffffff

15
The Definitions the 28The MARGIN/BACKGROUND
Commands

• background-image
• Denotes the background image for pages.Specify
  the image you want through that image's URL.
• BODY background-image http//www.page.com/dog.jp
  g
• background-repeat
• Denotes how the image will tile.Specify
  repeat-x, repeat-y, or no-repeat.
• BODY background-repeat repeat-y
• background-attachment
• Denotes how the image will react to a
  scroll.Specify scroll, or fixed.
• BODYbackground-attachment fixed

16
The Definitions the 28The Positioning/Division
Definitions

• position
• Denotes the placement of an image or a division
  of the page.Specify absolute for specific
  placement, or relative for a relative placement
  to other images.
• ltIMG STYLE"positionabsolute" SRC"joe.jpg"gt
• left
• Denotes amount of space allowed from the left of
  the browser screen when positioning an
  item.Specify in points (pt), inches (in),
  centimeters (cm), pixels (px), or percentage ().
  
• ltIMG STYLE"positionabsolute LEFT 20px"
  SRC"joe.jpg"gt
• top
• Denotes amount of space allowed from the top of
  the browser screen when positioning an
  item.Specify in points (pt), inches (in),
  centimeters (cm), pixels (px), or percentage ().
  
• ltIMG STYLE"positionabsolute LEFT 20px TOP
  200pt" SRC"joe.jpg"gt

17
The Definitions the 28The Positioning/Division
Definitions

• width
• Denotes width of image or page division.Specify
  in points (pt), inches (in), centimeters (cm),
  pixels (px), or percentage ().
• ltIMG STYLE"positionabsolute WIDTH 80px LEFT
  20px TOP 200pt" SRC"joe.jpg"gt
• height
• Denotes height of image or page division.Specify
  in points (pt), inches (in), centimeters (cm),
  pixels (px), or percentage ().
• ltIMG STYLE"positionabsolute HEIGHT 55px
  WIDTH80px LEFT 20px TOP 200pt"
  SRC"joe.jpg"gt
• overflow
• If the item is too large for the height and width
  specified, this tells the page what to do with
  the overflow.Specify visible, hidden, or scroll.
  
• ltIMG STYLE"positionabsolute overflow hidden
  WIDTH 80px LEFT 20px TOP 200pt"
  SRC"joe.jpg"gt

18
The Definitions the 28The Positioning/Division
Definitions

• z-index
• Denotes an item's position in the layering
  structure. The lower the number, the lower the
  layer. An image marker with a 20 would go overtop
  of an image marked with a 10. Specify by number.
  
• ltIMG STYLE"positionabsolute Z-INDEX 10
  overflow hidden WIDTH 80px LEFT 20px TOP
  200pt" SRC"joe.jpg"gt-
• For a full list of Style Sheet Commands, visit
  either of these great sites
• C-Net's Table of Style Sheet Commands
• and there's always the World Wide Web
  Consortium's
• Style Site

19
Example

• ltSTYLE TYPE-"type/css"gt
• lt!--BODY background FFFFFFAlink color
  80FF00Avisited color FF00FFH1
  font-size 24pt font-family arialH2
  font-size 18pt font-family braggadocioH3
  font-size14pt font-family desdemona
• --gt
• lt/STYLEgt

20
ltSTYLE TYPE-"type/css"gt lt!--BODY background
FFFFFF Alink color 80FF00 Avisited
color FF00FF H1 font-size 36pt
font-family verdana H2 font-size 24pt
font-family "comic sans ms" H3 font
size14pt font-family chiller --gt lt/STYLEgt
21
What If I Want The Same Tag Handled Different
Ways?

• What you do it assign different "classes" of
  tags.
• H3.first font-size 20pt color FF00FF
• H3.scnd font size 18pt color DD00FF
•      See what I did? I labeled the H commands
  separately by adding a dot and then a suffix. I
  used "first" for the first type and "scnd" for
  the second type.
• ltH3 CLASS"first"gtThis will be affected as
  outlined in "H3.first"lt/H3gtltH3 CLASS"scnd"gtThis
  will be affected as outlined in "H3.scnd"lt/H3gt

22
One Style Sheet--Many Pages

• First off, create a style sheet as you did above.
  This will be the only thing on the page. No
  ltHEADgt commands this time. You will make the file
  so that if I wanted, I could just copy and paste
  what you have right into my own ltHEADgt commands.
  Which is just about what you will be asking the
  computer to do.      The Style Sheet will be a
  simple text file with a .css suffix. Let's say
  you name your style sheet "fred". Its name would
  become "fred.css". The suffix is required for
  browsers to recognize it as a style sheet rather
  than a simple mesh of letters.
• Place this command on your page to call for the
  Style Sheet
• ltLINK RELstylesheet HREF"http//www.your.page/fr
  ed.css" TYPE"text/css"gt
• Here's what's happening
• LINK tells the browser something must be linked
  to the page.
• RELstylesheet tells the browser that this linked
  thing is relative to this page as a style sheet.
• HREF"---" denotes where the browser will find
  the style sheet.
• TYPE"text/css" tells the browser that what it is
  reading is text that will act as a Cascading
  Style Sheet. If the document isn't text with a
  .css suffix - no dice.
• Every page that contains this command will be
  affected by the one style sheet you created and
  placed in your directory. One sheet - many pages.