Cascading Style Sheets (CSS)

1
Cascading Style Sheets (CSS)

• By John Sullivan, Ph.D.

2
History and Support of CSS

• Style sheets are the way publishing professionals
  manage the overall look of their publications
  backgrounds, fonts, colors, and etc.
• 1996, the World Wide Web Consortium (W3C) put
  together a draft proposal defining CSS for HTML
  1998 the W3C extended the original specification
  to create CSS2
• CSS2 was released in 1998.
• CSS3 the latest standard is being developed.

3
History and Support of CSS

• One principle of design theory is to separate the
  content of a document from its design.
• A style defines the appearance of a document
  element.
• The collection of styles for a Web page or
  Website is known as a style sheet.
• Style sheets use a common language and syntax.

4
The Elements of Styles

• A style is nothing more than a rule that tells
  the browser how to render a particular tags
  contents.
• Each tag has a number of style properties
  associated with it
• A rule defines a specific value for one or more
  properties of a tag

5
Benefits of Style Sheets

• Use as a design tool.
• Makes website more flexible.
• Easier to maintain and modify.
• More aesthetically interesting.
• Consistent look.

6
Web Sites with Information on Cascading Style
Sheets
This figure displays websites that provide more
information about the compliance of browsers with
CSS1 and CSS2, and for information about the
standards themselves.
7
Style Types

• There are three ways of employing CSS in Web
  pages
• inline styles in which styles are added to each
  tag within the HTML file. The style affects that
  particular tag but does not affect other tags in
  the document.
• embedded or global styles applied to an entire
  HTML file, allowing the Web designer to modify
  the appearance of any tag in the document.
• linked or external style sheets placed in an
  external file and linked with pages in the Web
  site, allowing the Web designer to modify the
  appearance of tags in several documents
• Which approach you choose depends on the Web
  sites design..

8
Disadvantages

• Not completed supported by browsers
• Compatibility
• Takes time to learn how to use

9
The Anatomy of a Style

• The style is made up of a tag name (H1, p, ol,
  etc)
• And
• One or more definitions that determine how the
  elements marked with the tag should be displayed.
  
• H1 font-size 12pt colorred or
• ltbody stylebackgroundbluegt
• Some properties can be grouped
• font bold 12pt Andy
• font-size 12pt font-weight bold font-family
  Andy

10
Inline Styles The style Attribute

• Simplest
• Just include a style attribute with the tag along
  with a list of properties and their values.
• lth1 stylecolor blue font-style italicgtIm
  so Blue!!lt/h1gt
• Style type called inline because it occurs with
  the tag as it appears in document.
• Difficult to maintain since they are scattered
  throughout document.

11
Another Example Inserting an Inline Style
This figure shows how to insert an inline style.
12
Heading with New Style
This figure shows the heading with the new style.
13
Document-Level Style Sheets

• Place a list of presentation rules within the
  head of a document.
• Enclosed with their own ltstylegt and lt/stylegt end
  tags,
• Document-level style sheets affect all the same
  tags within the document
• Except for tags that contain an overriding inline
  style attribute.
• Must appear within the ltheadgt of a document.

14
Document-level Style Example

• ltheadgt
• lttitlegtAll True Redlt/titlegt
• ltstyle typetext/cssgt
• lt!
• / make all level 1 headers blue /
• H1 color green font-style italic
• ?
• lt/stylegt
• lt/headgt
• ltbodygt
• lth1gtIm so Green!!lt/h1gt..
• lth1gtI am Gra--eeen!, toooo!lth1gt

15
The Type Attribute

• CSS are all type text/css
• JavaScript use the type text/JavaScript
• Media attribute
• ltstyle typetext/css mediascreen,printgt
• Tells the browser that your document is layed out
  using CSS for display on both print pages and on
  a computer or other intelligent display screen.

16
External Style Sheets

• External style sheets give you the power to
  influence the display styles not only of all
  related tags in a single document, but for
  multiple Web pages. Recommended when dealing
  with more than one Web page
• For example
• H1 color blue font-style italic
• We can tell the browser to read the contents of
  the gen_style.css file, which will in turn color
  all the lth1gt tag contents blue and render the
  text in italic
• You can load external style sheets into your
  document in two different ways linked and
  imported

17
FrontPage and External Style Sheets

• Create an external style sheet
• Creating a cascading style sheet is a great way
  to ensure consistency of style in your web and
  save you time as well. When you link pages in
  your web to an external style sheet, applying a
  style from that style sheet is easy Click that
  style in the Style box. If you want to modify a
  style, you change it in one place  the external
  style sheet  and the change is automatically
  reflected in all of the linked pages.
• On the File menu, point to New, and then click
  Page.
• Click the Style Sheets tab, click the type of
  style sheet you want to create, and then click
  OK. Microsoft FrontPage creates a new style sheet
  page with a .css file name extension and opens it
  for editing in Page view.

18
Linked external style sheets

• ltheadgt
• lttitlegtStyle linkedlt/titlegt
• ltlink relstylesheet typetext/css
• Hrefhttp//rvcc2.raritanval.edu/styles/gen_styles
  .css
• TitleThe Blues
• lt/headgt
• ltbodygt
• lth1gtIm so bluuuuooo!lt/h1gt
• lth1gt I am ba-looooo, tooooo!lt/h1gt
• ltlinkgt tag creates relationship with href
  attribute is style sheet and its contents conform
  to CSS2 standard, as indicated by type attribute
  Must be in ltheadgt

19
Imported external style sheets

• ltheadgt
• lttitlegtImported style sheetlt/titlegt
• ltstylegt
• lt!
• _at_import url (http//rvcc2.raritanval.edu/styles/ge
  n_styles.css)
• _at_import http//rvcc2.raritanval.edu/styles/gen_st
  yles.css
• Body background url (backgrounds/marble.gif)
• ?
• lt/stylegt
• lt/headgt
• _at_import at-rule expects a single URL parameter
• _at_import at-rule must appear before any
  conventional style rules

20
Limitations of Current Browsers

• IE4 and Netscape4 support the ltlinkgt tag to apply
  an external style sheet to a document. Neither
  Netscape Navigator nor IE support multiple
  ltlinkgted style sheets
• Unless you have a compelling reason to use
  _at_import, you are probably better off using the
  ltlinkgt tag.
• The _at_import command has limited browser support.

21
Style Syntax

• Basics the style rule is made up of at least
  three basic parts
• Selector name of the markup element that the
  style rule affects.
• Followed by curly brackets enclosed
• - Semicolon separated list of one or more
  styles
• Selector property1value1 Property2value1
  value2 value3
• For instance,
• H1 colorgreen
• Properties require at least one value, but may
  include two or more values
• Not case sensitive

22
Multiple Selectors

• When separated by commas, all elements named in
  the selector list are affected by the property
  values in the style rule.
• H1, h2, h3, h4, h5, h6 text-align center
• Same as
• H1 text-align center
• H2 text-align center
• Etc.

23
Contextual Selectors

• Contextual selector list of tags in the order in
  which they should be nested in your document,
  outermost tag first. When the nesting order is
  encountered by the browser, the style properties
  will be applied.

24
Style Properties

• Property Values
• 5 kinds of property values, keywords, length
  values, percentage values, URLs and colors.
• Keyword
• Underline and line-through
• Length Property Values
• Forget not recognized by most yet
• Percentage Property values
• Line-height 120
• URL
• url (service//server.com/pathname)
• Color
• RGB (red, green, blue)

25
Defining Styles of Classes

• You can divide your Web page into groups or
  categories and apply a different style to each.
• ltheadgtltstylegt
• P.intro text-indent0font italic bold
• lt/stylegtlt/headgt
• ltbodygt
• ltp classintrogt John Sullivan teaches .
  lt/stylegt

26
Working with ids and Classes

• A pseudo-class is a classification of an element
  based on its status or its use.
• in the example of the rollover effect, the status
  was the condition of the hypertext link
• the element itself, a hypertext link with the
  pointer located over it, is called a
  pseudo-element
• CSS introduces additional pseudo-classes,
  including the first-line pseudo-class and the
  first-letter pseudo-class, which are used for
  formatting the first line and first letter of a
  block of text, respectively.

27
Applying a Style to a Pseudo-Class
This figure shows how to apply a style to a
pseudo-class and what it would like in the
browser.
28
The class Attribute

• Many browsers do not support the first-letter and
  first-line pseudo-classes yet.
• The only pseudo-classes widely supported are the
  four hypertext link conditions.
• You can create customized classes by adding the
  class attribute to HTML tags.
• The syntax for creating a class is
• lttag classclass_namegt
• tag is the HTML tag
• class_name is the name of the class

29
Applying a Style to a Pseudo-Class
This figure demonstrates creating an inline style
for the h1 heading with the class name First
Header. This technique is useful when you have
multiple Web pages in which you want the first
heading in each page to be formatted in the same
way.
30
The id Attribute

• Closely related to the class attribute is the id
  attribute, which applies an id to a specific
  element in the document.
• The id attribute must be unique there can not be
  more than one tag with the same id value.
• The syntax for creating an id is
• lttag idid_namegt
• tag is the HTML tag
• id_name is an id name assigned to the tag
• The class and id attribute are useful HTML
  features to use with CSS to define styles for
  specific content without using inline styles.

31
Creating a Class for Monthly Specials
This figure shows how to create a class for
monthly specials.
32
Working with Container Elements

• HTML supports two types of container types
• the ltspangt tag, which is used to contain inline
  elements such as individual letters, words,
  phrases, or inline images
• the ltdivgt tag, which is used to group blocks of
  text such as paragraphs, block quotes, headings,
  or lists. Collectively, these text blocks are
  known as block-level elements

33
Using the ltdivgt Tag
This figure shows an example in which a heading
and a paragraph have been enclosed in a ltdivgt
container. The ltdivgt tag does not actually
format the block-level elements it merely groups
them as a unit. For this reason, the ltdivgt tag
always includes either a class or id attribute
that identifies that group.
34
Using the ltdivgt and ltspangt Tags
This figure shows an example of how the ltspangt
tag can be used to format a selection of text
within a paragraph. A ltdivgt tag is used to
format the entire paragraph. You almost always
include an id or class attribute with the ltspangt
tag.
35
Font Properties

• H1 font-family Helvetica, Univers, sans-serif
• Looks for Helvetica then Univers, if not than use
  generic sans-serif
• Enclose font names that contain spaces
• P font-family Times, New Century Schoolbook,
  Palatino, serif
• If extra set of double quotations
• ltp stylefont-family Times, New Century
  Schoolbook, Palatino, serifgt
• Font-size property
• P font-size 12 pt
• P font-size 120
• P font-size 2pt

36
The Font Property

• For more than one font-related property
• P font-family Times, Garamond, serif
  font-weight bold font-size 12pt line-height
  14 pt
• Use comprehensive font property
• P font bold 12pt/14pt Times, Garamond, serif
• The font style, weight, and variant attributes
  must be specified first, followed by the font
  size and line height separated by a slash
  character, and ending with a list of font
  families.

37
Color and Background Properties

• Background color property
• ltli stylebackground-color bluegt
• Table header
• Th background-color black color white

38
Which Type of Style Sheet and When

• You may be better off defining
• ltstyle typetext/css
• lt!
• p. Centered text-align center
• Em.blue color blue
• - gt
• lt/stylegt
• And later using
• ltp classcenteredgt
• ltem classbluegt
• Instead of
• ltp stypetext-align centergt
• ltem stylecolor bluegt

39
Adding Comments to Style Rules

• In your style sheet, be it internal or external,
  type / to begin your comments.
• Type the comments
• Type / to signal the end of the comments

40
Embedding Fonts on a Page

• 1. Type _at_font-face
• 2. font-family Sunnyside
• 3. srcurl(font.eot)
• 4. to complete the _at_font-face rule
• Tips
• You cant use any font as the source for embedded
  font. You have to use a special format of the
  font. IE requires fonts to be in the eot.
  Format.
• You can convert them with a program called WEFT
  at www.microsoft.com/typography/web/embedding/weft
  3/

41
Creating a Rollover Effect
This figure shows the rollover effect.
42
The End of CSS

• By John Sullivan, Ph.D.