Cascading style sheets CSS

1
Cascading style sheets - CSS

• Separate the content from the style!
• More flexible (changing one style definition in
  the style sheet will change the entire site)
• Consistent design
• Less work for larger sites (more overhead)
• CSS1-96 supported by IE 4, Netscape 4
• CSS2-98 supported by IE 5, Netscape 6

2
Cascading Style Sheets (CSS)

• Like HTML, style sheets must use a common
  language and follow common rules. This language
  is known as Cascading Style Sheets, or more
  simply, CSS.
• CSS has been developed by the WWW Consortium
  (www.w3c.org), the same organization that
  develops standards for HTML.
• CSS is designed to augment HTML, not replace it.
• CSS is a whole new way of formatting Web pages.
• CSS provides several tools not available with
  standard HTML.

3
Type of style rules

• Inline style
• adds styles to each individual tag within the
  HTML file (single section)
• Embedded or global style
• a style is applied to the entire HTML file. The
  style declarations are in the header (web page)
• Linked or external style
• links the HTML file to a text file containing the
  style declaration. Gives a consistent look across
  pages (web site)

4
Inline style (in body)
lttag styleattribute1value1 attribute2value2
gt

• ltbodygtlth3 stylefont-familyArial, Times
  font-styleitalic colorgreengt
• This is H3, Arial, italic and green
• lt/h3gt
• lth3gtThis is simply H3lt/h3gt
• lt/bodygt

This is H3, Arial, italic and green This is
simply H3
5
Embedded style sheet (in header)
ltstylegt selector attribute1value1
attribute2value2 lt/stylegt

• ltheadgtltstylegt h3 font-familyArial
  font-styleitalic colorgreenlt/stylegt
• lt/headgtltbodygt
• lth3gtThis is H3, Arial, italic and greenlt/h3gt
• lth3gtAnd so is this H3lt/h3gt
• lt/bodygt

This is H3, Arial, italic and green And so is this
6
External style sheet (in header)

• Create a text file containing all style
  declarations
• File should have extension .css such as
  mystyle.css
• Link, or import that file to the HTML file using
  special tags in the header.

ltlink hrefURL relstylesheet typetext/cssgt
mystyle.css
OR
_at_import or multiple LINK tags allow you to use
more than one style sheet in the same document
ltstylegt _at_import url(mystyle.css)lt/stylegt
7
Using CSS Style Types

• If you need to format a single section in a Web
  page, youd probably use an inline style.
• An embedded style is applied to various sections
  within a Web page
• Create styles that apply to an entire Web site by
  creating a text file containing style
  declarations.
• Most style sheets have the extension .css,
  though this is not a requirement.
• Within a style sheet, you dont need ltstylegt
  tags, just the style declarations.

8
Setting fonts and attributes

• SAFE Font-families

Times New Roman, ? text
Arial, Helvetica, ? headings
Courier New ? text
9
Using Font Families

• To choose a font-family, use
• font-family font1, font2,.
• Examples
• bodyfont-family Times New Roman, serif
• pfont-family Arial, Helvetica, San-serif
• A browser will display the body text using the
  first font available in the list above.
• Helpful to use a generic family name as the last
  option.

10
Font-size style definition font-size size

• h1font-family Arial, sans-serif font-size
  28pt
• Size can be expressed as
• Absolute units cm, mm, pt, in.
• Relative units px, em, ex.
• A percentage (of font-size of parental element)
• Keywords (absolute) xx-small, x-small,small,
  medium, large, x-large, xx-large
• Keywords (relative) smaller, larger (relative
  to the font-size of the parental element)

11
Font styles and weights

• font-style style_type
• style_type ? normal, italic or oblique
• font-weight weight
• weight can be
• a value from 100(lightest) to 900 (boldest) in
  intervals of 100.
• normal or bold
• lighter or bolder (relative to the parental
  element)

12
Aligning Test

• text-alignalignment
• Alignment ? left, center, right or justify (like
  in MS words)
• Examples

h1,h2,h3,h4,h5,h6 font-family
Arial,sans-serif text-aligncenter
font-weight700
pfont-family Times new roman,serif
text-alignjustify
13
Combining styles

• A linked style sheet can help you maintain a
  consistent look and feel throughout your Web site
• If you want a certain page to have additional
  styles, you can include styles in the head of
  that particular HTML document
• If you want just one section of a page to look
  different, you might use the inline styles with a
  ltdivgt or ltspangt tag.

14
Combining styles

• The _at_import tag must be the first element within
  the STYLE tag
• Embedded style declarations should come after the
  _at_import commands
• If two style sheets define competing style, the
  innermost style sheet wins

Style precedence inline gt global gt external gt
browser
15
CSS control of Lists

• Style declarations for list elements
• (applicable to ltulgt, ltolgt and ltligt tags).
• list-style-type type
• disc, circle, square, none (ltolgt or ltulgt)
• decimal (decimal-leading-zero is not a
  valid value)
• lower-roman, upper-roman
• lower-alpha, upper-alpha
• In IE, specify an image for use as a label (ltolgt
  or ltulgt)
• list-style-image url(image)
• warnings
• does not work in Netscape 4.0
• nested lists will automatically inherit this
  image unless you
• set the list-style-image attribute to none
• Change the position of the labels (semi works in
  IE)
• list-style-position inside (outside is the
  default)

16
Defining colors in CSS

• Color names (names supported by HTML are also
  supported by CSS)
• body color teal
• Hexadecimal form
• body color 008080
• RGB color values
• body color rgb(0,128,128)
• RGB color percentages
• body color rgb(0,50,50)

17
Background color

• Background colors can be applied to almost any
  element in a Web page not just the page itself.

H1 background-color rgb(204,102,255)
This is an H1 headers with a purple background
18
More background styles

• Background-image url (file.jpg)
• Background-attachment scroll fixed (to allow
  the image to scroll with the element or not)
• Background-repeat repeat repeat_x repeat_y
  no-repeat (controls how the image is tiled)

19
(No Transcript)
20
Using class and ID as selectors

• An HTML tag can be a selector but sometimes you
  want to be more specific. For example you have a
  huge table and you want to format the rows in 4
  different ways. Using TR as a selector will allow
  you only one style definition
• Instead you can define a class and then attach it
  to any HTML tag, without limiting the tag itself
  to a particular style

21
Using classes as selectors

• Define a class (in the header) by
• giving it a name preceded by a period
• adding the standard style definitions inside

ltstyle typetxt/cssgt .bright
font-weightbold colorredlt/stylegt

• Apply the class to any HTML tag

ltstrong classbrightgt text lt/stronggtlth1
classbrightgt text lt/h1gt
22
More on classes

• Define a class for a specific tag by
• Attaching to the tag selector a dot and the class
  name
• Adding the standard style definition within
• This particular class can only be applied to the
  tag used in its definition

ltstyle typetxt/cssgt h1.bright
font-weightbold colorredlt/stylegt
bright can be used only for h1
23
Hyperlink pseudo-class

• a link style for never visited links
• a visited style for visited links
• a active style for link that is currently being
  clicked
• a hover style when the mouse cursor is hovering
  over the link rollover effect.

ahover colorred text-transformuppercase
font-weightbold
24
The ltdivgt tag

• This HTML tag does not format content
• It creates a container for block-level elements
• You can assign a CLASS (or ID) to the container

ltulgtltdiv classbrightgt ltligt First item
ltligt Second itemlt/divgt ltligtThird
elementlt/ulgt
The ltspangt tag is used to mark inline elements
like letters, words or phrases
25
Block-level element boxes

• HTML tags that can be treated as block-level
  elements
• lth1gt-lth6gt, ltpgt, lthrgt
• ltblockquotegt
• ltulgt,ltolgt, ltligt
• ltdivgt (Use this as a block container)
• ltbodygt
• ltimggt
• You can move them around the page, apply borders
  and background colors to them etc.

26
Formatting block-level elements
Block-level element
padding
margin
border

• The size of margins, border and padding are set
  with the margin, padding, and border properties
  respectively
• The padding area uses the same background as the
  element itself
• Margins are always transparent