Learn about Cascading Style Sheets

1
Learn about Cascading Style Sheets

• LACUNY Web Management Roundtable
• October 21, 2005
• http//www.lehman.edu/provost/library/CSS/CSS.ppt

2
CSS Separate Style From Structure of a Web Page

• Specify point size and font of text
• Set margins within a web page
• Create a distinctive style for individual web
  pages or sets of web pages
• Format style to one element of a web page or to a
  numerous pages
• Control color of different elements of a web
  page
• Etc.

3
Font Appearance of an Element

• HTML code
• ltH3 align"center"gt ltfont face"times new roman,
  times, serif" color"800000"gtspecial
• Collectionslt/agtlt/fontgtlt/h3gt
• CSS rule
• H1
• Font-family times new roman, 'serif'
• Color 800000
• Text-align center

4
Understanding Style Rules

• The style characteristics for an HTML element are
  expressed by Style Rules .
• A set of style rules is called a Style Sheet.
• Style rules are contained in the ltSTYLEgt element
  in the documents ltHEADgt section.

ltHeadgt ltStyle typetext/cssgt P colorblue
font-size 24pt lt/Stylegt lt/Headgt
5
Understanding Style Rules

• A Style Rule is composed of two parts a selector
  and a declaration.
• TH color red.
• The Selector indicates the element to which the
  rule is applied.
• The Declaration determines the property values of
  a selector.

Declaration
Selector
6
Understanding Style Rules

• The Property specifies a characteristic, such as
  color, font-family, position, and is followed by
  a colon ().
• The Value expresses specification of a property,
  such as red for color, arial for font family, 12
  pt for font-size, and is followed by a semicolon
  ().
• P color red

Property
Value
7
Using the ltSTYLEgt Element

• The ltSTYLEgt element is always positioned in the
  ltHEADgt section of the document.
• The ltSTYLEgt element always contains ltTYPEgt
  attribute. The value text/css defines the style
  language as Cascading Style Sheets.

ltHeadgt ltStyle typetext/cssgt P colorblue
font-size 24pt lt/Stylegt lt/Headgt
8
Using External Style Sheet

• Style Rules can be expressed in an external Style
  Sheet - a text document that doesnt contain any
  HTML code. There is no ltSTYLEgt element in an
  external style sheet.
• External Style Sheet has a .css extension.
• http//www.lehman.edu/provost/library/CSS/style_1.
  htm

h1, h2, h3 font-family verdana, arial, 'sans
serif' color 9933FF text-align center
9
Linking to an External Style Sheet

• To link a Web page to an external style sheet a
  ltLINKgt element should be added within ltHEADgt
  element of a document with the URL to a style
  sheet. It tells the browser to find a specified
  style sheet.

ltHeadgt ltTitlegtDemo_1lt/Titlegt ltStyle
typetext/cssgt ltLink hrefstyle_1.css
Relstylsheetgt lt/Stylegt lt/Headgt
10
Linking to an External Style Sheet
HREF attribute states the relative URL to the
style sheet
The REL attribute describes the relationship
between the current document and the document
identified by the href attribute
ltHeadgt ltTitlegtDemo_1lt/Titlegt ltStyle
typetext/cssgt ltLink hrefstyle1.css
Relstylsheetgt lt/Stylegt lt/Headgt
11
Using the Class Attribute Selector

• CLASS is an HTML attribute that assigns a class
  name to any HTML element on a Web page.
• Can be used to identify which style sheet rules
  should be applied for the particular element of a
  Web page

Class Selector
Element
A.navlink colorFF3300 text-decoration none
12
Using the Class Attribute Selector

• A class name is created by declaring a style rule
  and adding (.) flag character indicating that the
  selector is a class selector.
• Add it to HTML code of a Web page by using the
  CLASS attribute.

A.navlink colorFF3300 text-decoration none
lta href"http//www.eric.org" class"nav"gtERIClt/agt
13
Example 1http//www.lehman.edu/provost/library/CS
S/demo_1.htm

• CSS Style Sheet
• http//www.lehman.edu/provost/library/CSS/style_1.
  htm

14
Example 2http//www.lehman.edu/provost/library/CS
S/demo_2.htm

• CSS Style Sheet
• http//www.lehman.edu/provost/library/CSS/style_2.
  htm

15
Example 3http//www.lehman.edu/provost/library/CS
S/demo_3.htm

• CSS Style Sheet
• http//www.lehman.edu/provost/library/CSS/style_3.
  htm

16
Lehman College Library Web Site
http//www.lehman.edu/provost/library//http//ww
w.lehman.edu/provost/library/CSS/style.htm
17
Lehman College Library Web Site

• CSS
• A.navlink color 990000 font-size 12px
  line-height 14px font-family arial, verdana,
  geneva, helvetica text-decoration none
  A.navvisited color CC3333 font-size 12px
  line-height 14px font-family arial, verdana,
  geneva, helvetica text-decoration none
• HTML
• In the ltHeadgt element
• ltlink rel"stylesheet" href"Welcome_files/style"
  type"text/css"gt
• In the ltBodygt element
• lttd align"center" height"25"gtlta class"nav"
  href"http//mail.lehman.edu"gtCheck your Lehman
  e-mail accountlt/agt
• lt/tdgt

18
Useful Resources

• Schengili-Roberts, Keith. Core CSS Cascading
  Style Sheets. 2nd ed. Upper Saddle River, NJ
  Prentice Hall PTR, 2004.
• Sklar, Joel. Designing Web Pages with Cascading
  Style Sheets. Course Technology, Incorporated,
  2001.
• W3C http//www.w3.org/Style/CSS/
• WDG Web Design Group lthttp//www.htmlhelp.com/refe
  rence/css/gt