Cascading style sheets CSS - PowerPoint PPT Presentation

1 / 26
About This Presentation
Title:

Cascading style sheets CSS

Description:

More flexible (changing one style definition in the style sheet will ... a: hover {style when the mouse cursor is hovering over the link} rollover effect. ... – PowerPoint PPT presentation

Number of Views:35
Avg rating:3.0/5.0
Slides: 27
Provided by: luciad
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com