Cascading Style Sheets

1
Using HTML and JavaScript to Develop Website

• Cascading Style Sheets

Cascading Style Sheets sound intimidating. In
reality, however, CSS is one of the most
convenient tools available to Web developers
Rachel Andrew. "The CSS Anthology 101 Essential
Tips, Tricks Hacks"
2
What we are talking about

• We will look at
• What are CSS
• Advantages and disadvantages
• Types of CSS
• Look at embedded CSS
• Look at external CSS
• Using Selectors
• Using Classes
• Positioning Items
• Border
• Margin
• Padding
• Creating a 2 column layout
• Creating Navigation Items

3
What are cascade style sheets?

• When HTML has a fundamental problem
• it does not separate page content from
  presentation
• Not a good solution to
• Share a style (e.g., color scheme) among many
  pages at a site
• Layout a site forced to use tables within
  tables (within tables)
• The W3C created cascade style sheets to allow
  seaperate display format from document content.

4
Web Page with and without CSS
CSS controls text size, style, color. Line
spacing, graphic spacing, and many other things
Every page within the site, has same text color
and look and feel
This layout used stylesheets and tables. Much of
this could have been done without tables.
5
Cascading Style Sheets!

• The basic idea Separate style information from
  text content
• What do they do?
• Specify a common set of styles and spacing
  instructions for elements on a page.
• E.g., a web site with 5 different pages, might
  use style sheets to specify things like
• Common size for headers,
• default font type,
• background images or colors,
• margin sizes and
• and other page styles.

6
CSS Advantages/disadvantages

• Some advantages of using CSS
• Control - Offers greater page layout controls for
  all pages at a site. E.g., can specify margin,
  indents, line spacing, element positioning, font
  size, etc.
• Style Separate From Document Structure
• Smaller Size? - Can decrease document size -
  E.g., (reducing the number of FONT tags)
• Maintainability - Easier site maintenance
• Disadvantages
•  Browser Support - Not supported in browsers
  earlier than I.E. 3.0 or Netscape 4.0.
• Browser Implementation - IE and Netscape
  implement the standard differently.

Netscape and IE implement many elements slightly
different so need testing with both browsers.
7
What we are talking about

• We will look at
• What are CSS
• Advantages and disadvantages
• Types of CSS
• Look at embedded CSS
• Look at external CSS
• Using Selectors
• Using Classes
• All About Properties
• A big properties example

8
Basic CSS Syntax

• Place style info at top of HTML document
• H1 Color red
• font-size 24pt
• H2 Color green
• font-size 12pt
• Notice use of 2 selectors with general syntax
  selectorpropertyvalue 

Specifies to make all ltH1gt tags red text and size
24pt.
propertyvalue - identifies a stylistic property
to be defined with some value. Includes things
like color red, font-site 12pt, font-face
Verdana.
Selector - identifies the element to be affected.
Includes things like H1, H2, P, EM, LI EM.
9
Types of Style Sheets

• Still, style sheets can be used in 3 different
  ways
• Inline Styles - Put the style information in-line
  the text of the document.
• Would specify the style for a particular line of
  text in the document. (highest precedence).
• Embedded Styles - Embed the style sheet on the
  top of the document.
• For example, would specify the default color for
  all items in this web page.
• External Styles - Collect the style information
  in an external file and link them into all the
  needed files at your site.
• For example, would provide a file that has all
  style information (like color of headers) and
  include or link that file into all pages of your
  site.

Note Style sheets are typically used as a
separate file. Then every page that wants that
style links to the sheet.
Note Its called cascading style sheets because
inline style specs override,
embedded style specs override, external
style specifications
10
1 - Inline style sheet information

• ltbodygt
• lth2 style"color red text-transform
  uppercase"gt
• An Unusual Headinglt/h2gt
• lth2gt A Normal Heading lt/h2gt
• lt/bodygt

Can specify style sheet info inline with the HTML
Note Most people seldom use inline style
specification. It overrides all other style
specifications and therefore effects their
control.
11
2 - Embedded example

• Place style info at top of HTML document
•  ltHTMLgt
• ltHEADgt
• ltSTYLE TYPE"text/css"gt
• I Color red
• H2 Color green
• font-size 12pt
• lt/STYLEgt
• ltTITLEgt Sample web Page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH2gt Sample Web Page lt/H2gt
• This is a sample web Page with ltigt emphasislt/igt
  added.
• lt/bodygtlt/htmlgt
•  

Note the style tag, used in head section.
12
3 - External (or linked) Style Sheets
This line loads in file stylesheet.css

• HTML file looks like
• ltHTMLgtltHEADgt
• ltLINK REL"STYLESHEET" HREF"stylesheet.css"
  TYPE"text/css"gt
• ltTITLEgt This is a sample web Page with emphasis
  addedlt/TITLEgt lt/HEADgtltBODYgt
• ltH1gt Interesting Example!! lt/H1gt
• Writing ltIgtinterestinglt/Igt Web Pages is not that
  hard ltIgtiflt/Igt you know
• the ltBgt HTML lt/Bgt language.
• ltH2gt A Short Quote lt/H2gt
• Here is what JFK said . . .
• ltPgt
• Now is the time for all good men to come to the
  aid of our country. lt/BODYgtlt/HTMLgt
• External file called stylesheet.css
• H1 Color red
• font-size 28pt
• H2 Color green
• font-size 22pt
• P margin-left 44pt

stylesheet.css contains only these lines. Make
sure it has no blank lines and use .css suffix!
13
What we are talking about

• We will look at
• What are CSS
• Advantages and disadvantages
• Types of CSS
• Look at embedded CSS
• Look at external CSS
• Using Selectors
• Using Classes
• All About Properties
• A big properties example

14
Using CSS Selectors

• Type Selectors Can use lots of different HTML
  elements
• For example,
•       H1 Color red  font-size 36pt
      H2 Color green  font-size 24pt
      P margin-left 44pt     EM, I color
  green
• B color red font-size 18pt
• H1 Color red font-size 24pt
• H2 Color green font-size 12pt
• EM Color red

15
Specifying Properties in Shorthand

• So far specify properties one at a time
• h1 font-weight bold font-size 12pt
  line-height 14pt font-family Helvetica
  
• Can also specify same with the following
• h1 font bold 12pt/14pt Helvetica

16
Specifying a Page Default . . .

• Use the selector to specify a default for page
• color red font-size 15pt

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt color
red font-size 15pt lt/stylegt ltTITLEgt ID
Example lt/TITLEgt lt/HEADgtltBODYgt ltPgt There are 3
ways to define style sheets ltolgt ltligt ltbgtInline
styles.lt/bgt These are aadded to the HTML
tags ltligt ltbgt Internal stylesheets lt/bgt defined
at beginning of document.lt/divgt ltligt ltbgt External
stylesheetslt/bgt defined in ltigtan external
filelt/igt. lt/olgt lt/bodygtlt/htmlgt
17
Properties - font-family

• font-family - specifies a family of fonts to use
• Values list of fonts to use
• Applies to all elements
• Example
• P font-family  Veranda, sans-serif
• Notes
•  There are 5 possible font-families it is like
  specifying a generic name. It is a good idea to
  make one of these last in the list
• sans-serif (e.g., halvetica or arial)
• monospaces (e.g., courier or new courier)
• cursive (e.g., Zapf-chancery)
• serif (e.g., Times)
• fantasy (e.g., western, impact, or some other
  display oriented font)

18
Properties - font-style

• font-style - specifies between the normal
  (default), italic, and or oblique font-face
  within a font-family. (oblique is slanted text,
  italic is slanted with more cursive characters.)
• Values normal italic oblique
• Applies to all elements
• Example
• H1 font-style italic
• Notes Bold is part of the font-weight not
  font-style.

19
Properties - font-weight

• font-weight  - specifies the weight or boldness
  of the font to use.
• Values normal bold bolder lighter 100
  200 300 400 500 600 700 800 900
• Applies to all elements
• Example
• STRONG font-weight 700
• Notes Allows either a descriptive tag (normal,
  bold, bolder or lighter) or a number.  Normal is
  the default 400.  Typical bold is 700. Not all
  numbers may be supported within a particular
  font-family and browser have inconsistent support
  of this feature

20
Properties - font-size

• font-size  - specifies a size of font to use
• Values absolute size relative size length
  percentage
• Applies to all elements
• As can be seen from above can be specified 3
  different ways
• Absolute size
• Values xx-small x-small small medium
  large x-large xx-large
• Example H1 font-size x-large
• Notes These are descriptive terms that reference
  a table of sizes kept in the browser.
• Relative Sizes
• Values larger smaller
• Example H1 font-size larger
• Notes specifies size relative to the parent
  object.
• Length Sizes
• Values number em ex px pc mm cm in
  
• Example H1 font-size 24pt

21
Font-size cont - Length sizes can be specified
differently
Code Unit Description
px Pixel Number of pixels relative to the monitor resolution
pt Point A unit of measuring type (from publishing) equal to 72 pts 1 inch
pc Pica A unit of measurement  from publishing. 1 pts or 1/6 inch
em Em A relative measurement equal the with of the capital M in the current font
ex Ex A relative measurement for the height of the width of the letter X in the current font. 
in Inches Measures in inches
mm Millimeter Measures in millimeters
cm Centimeter Measures in centimeter
22
Properties - font-color

• color - specifies the color of the element.
• Values color_name RGB Hex Value RGB New
  Values
• Applies to all element
• Notes As can be seen from above, specify 1 or 3
  ways
• color_name Use 1 of the 16 color names.
• values - aqua, gray, navy, silver, ...
• Example
• STRONG font-style italic color purple
• RGB values Use hex value that fill in the RGB
  values.
• values - 000000, ...,  FFFFFF
• Example
• STRONG font-style italic color FF00FF
• RGB New Values
• values - rgb(255,0, 255) or rgb(100, 0, 100)
• Example
• STRONG font-style italic color  rgb(255, 0,
  255)
• STRONG font-style italic color  rgb( 100,
  0, 100)

23
Properties line-height

• line-height - sets height of lines.
• Values normal number length percentage
• Applies to all element
• Notes As can be seen from above, specify 1 or 3
  ways
• Examples
• P ( line-height 1.2
• P line-height 1.2em
• P line-height 120

24
Properties text-indent

• text-indent - specifies the amount of indentation
  from the far left. 
• Values length percentage
• Applies to block level elements
• Notes As can be seen from above, specify length
  or percent of normal text
• Examples
•  P text-indent 3em

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt P
text-indent 3em lt/stylegt ltTITLEgt Indent
Example lt/TITLEgt lt/HEADgtltBODYgt This is a example
of a of a sentence. ltPgt A new paragraph. This
is new paragraph. lt/BODYgtlt/HTMLgt
25
Properties background color

• background-color - specify the color or RGB value
  for background color.
• Values color name RGB value
• Applies to all element
• Notes Sets the background color of the element.
• Examples
• P.warning background-color red
• STRONG font-weight 900 background-color
  silver

ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt STRONG
font-weight 900 background-color
silver lt/stylegt ltTITLEgt Background example
lt/TITLEgt lt/HEADgtltBODYgt This is a example of a
ltstronggt Very strong section lt/stronggt. lt/BODYgt lt
/HTMLgt
26
Properties background color

• background-image - specify the background image
  for an element.
• Values URL
• Applies to body tag
• Notes Sets the background image for element.
• Examples
• BODY background-image URL(back.gif)

Clearly this means with a CSS with this one tag,
I can link into all my HTML documents and get
common background.
27
Classes In CSS

• Classes enable creation of special categories of
  properties per tag
• Can call classes on demand
• For example make some ltH1gt tags look one way and
  others a different way.
• E.g., suppose this is in a file called
  stylesheet3.css
• H1 color green  
• H1.important font 36pt "Comic Sans" Color
  Blue
• H1.normal font 24pt "Arial" Color red

The first part denotes the HTML element.
Defines the element and property to set.
The second part denotes the name or label for
the element.
28
Using the class .

• Once linked to this style sheet. Have to
  different ways to create H1 elements
• ltH1 CLASS"important"gt Check It Out! lt/H1gt
• This is an important header
• ltH1 CLASS"normal"gt lt/H1gt

Note you can also write a default class with
no name .red colorred This can be used in
multiple places as such ltdiv classredgt or ltb
classredgt
29
Class Example . . .
ltHTMLgt ltHEADgt ltSTYLE TYPE"text/css"gt H1
color green H1.important font
36pt "Comic Sans" Color Blue H1.normal
font 24pt "Arial" Color red lt/stylegt ltTITLEgt
This is a sample web Page with emphaisis
addedlt/TITLEgt lt/HEADgt ltBODYgt ltH1gt Normal H1
lt/H1gt ltH1 CLASS"important"gt Check It Out!
lt/H1gt This is an important header ltH1
CLASS"normal"gt Very Interesting Indeed
lt/H1gt This is a less important header.
lt/BODYgt lt/HTMLgt
Regular H1 tags use this
Define H1.important and H1.normal classes
ltH1gt
ltH1.importantgt
ltH1.normalgt
30
Using ID selectors

• Allows you to override style properties  
• B.important colorblue font 24ptgt
• redColor red
• B font-weight 700
• I color green font 36pt "Comic Sans"
• So you could write the following
• ltB idredgt
• ltI idredgt
• ltB idred classimportantgt
• ltdiv idredgt

(By Specification only use once per html
element) but this is poorly enforced.
Specifies anything with idred becomes color red
31
ID Example . . .

• ltHTMLgtltHEADgt
• ltSTYLE TYPE"text/css"gt
• B.important font 18pt
• red Color red font8pt
• b color green
• lt/stylegt
• ltTITLEgt ID Example lt/TITLEgt
• lt/HEADgtltBODYgt
• There are ways to define style sheets
• ltolgt
• ltligt
• ltbgtInline styles.lt/bgt These are aadded to the
  HTML tags
• ltligt
• ltb id"red"gt Internal stylesheets lt/bgt defined
  at beginning of document.lt/divgt
• ltligt
• ltb class'important'gt External stylesheetslt/bgt
  defined in an external file.
• lt/olgt
• lt/bodygtlt/htmlgt

Note The rules on ID are not consistently
enforced on all browsers. (Some allow gt 1 ID use
per document, others overlap differently)
Color from ID
Color from default definition
Size18 from important
32
Selectors - Special Built-in Classes AKA Pseudo
classes

• There is a set of classes that are special
  built-in.
•  For example, are 4 common ones used with ltagt.
          Alink color red         Avisited
  color maroon
• Aactive color lime
• Ahover colorgreen

Not visited yet
As being clicked
While cursor is over link
ltHTMLgtltHEADgt ltSTYLE TYPE"text/css"gt AHover
colorred lt/stylegt ltTITLEgt Indent Example
lt/TITLEgt lt/HEADgtltBODYgt Welcome to my site lta
href""gt home lt/agt lta href""gt contact lt/agt
lta href""gt questions lt/agt
lt/BODYgtlt/HTMLgt
When put cursor over link it changes color
33
Objectives . . .

• How to create tables
• Basic lttablegt, lttrgt, lttdgt tags
• Some arguments with table
• Height, width, border
• Special tricks
• Cell text alignment
• Padding the columns and Rows
• Spanning Columns and Rows
• Special Examples
• Creating page layouts

34
Hands on Assignment

• Create an external style sheet that will change
  the following HTML to look like the following
  (note the background color is c6c6c6)

ltHTMLgtltHEADgt ltLINK REL"STYLESHEET"
HREF"labstylesheet.css" TYPE"text/css"gt ltTITLEgt
This is a sample web Page with emphaisis
addedlt/TITLEgt lt/HEADgtltBODYgt Welcome to my
page Note that the default color is blue lth1gt
all h1 have different style lt/h1gt lth2gt While
using h2 we have complete control of everything
lt/h2gt lt/bodygt lt/htmlgt
35
One possible Solution
font-color blue background "c6c6c6"
H1 Color red font-size 12pt
H2 Color green font-size 10pt P
margin-left 44pt
36
Do Only This lab . . .
ltBODYgt ltdiv classbigcentergt First Annual CSS
Test Results lt/divgt lttable classt1gt ltthgt No
lt/thgt ltthgt Name lt/thgt ltthgt Score lt/thgt ltthgt
Commentslt/thgt lttr classyellowgt lttdgt 1 lt/tdgt
lttdgt George lt/tdgt lttdgt 56 lt/tdgt
lttdgtMissed Lab 1. Got a 60 on Test.lt/tdgt lt/trgt ltt
r classgreygt lttdgt 1 lt/tdgt lttdgt John
Smithson lt/tdgt lttdgt100lt/tdgt lttdgtPerfect
Score. Great Job.lt/tdgt lt/trgt lttr classyellowgt
lttdgt 1 lt/tdgt lttdgt Maggie Maylt/tdgt
lttdgt89lt/tdgt lttdgtVery close to an A. Should
have completed last HW on time.lt/tdgt lt/trgtlt/tablegt
lt/bodygtlt/htmlgt
Use the following html to create a page that
looks like the Following (Use embedded CSS)
Align center, size 36px.
Border2 width100
37
One Possible Solution . . .
HTMLgtltHEADgt ltSTYLE TYPE"text/css"gt .bigcenter
font-size 36px color grey
text-align center .yellow background
yellow padding-top 36px .grey background
c6c6c6 padding-top 36px .t1
backgrounddddddd border 2 width 100
lt/stylegt ltTITLEgt Table Lab lt/TITLEgt lt/HEADgtltBODY
gt ltdiv classbigcentergt First Annual CSS Test
Results lt/divgt lttable classt1gt ltthgt No lt/thgt
ltthgt Name lt/thgt ltthgt Score lt/thgt ltthgt
Commentslt/thgt lttr classyellowgt lttdgt 1 lt/tdgt
lttdgt George lt/tdgt lttdgt 56 lt/tdgt
lttdgtMissed Lab 1. Got a 60 on Test.lt/tdgt lt/trgt ltt
r classgreygt lttdgt 1 lt/tdgt lttdgt John
Smithson lt/tdgt lttdgt100lt/tdgt lttdgtPerfect
Score. Great Job.lt/tdgt lt/trgt lttr classyellowgt
lttdgt 1 lt/tdgt lttdgt Maggie Maylt/tdgt
lttdgt89lt/tdgt lttdgtVery close to an A. Should
have completed last HW on time.lt/tdgt lt/trgtlt/tablegt
lt/bodygtlt/htmlgt