Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Week 5

    Hochgeladen von

    api-218675166
    38 Ansichten13 Seiten
    CSS is a separate language from HTML It is used to enhance the display of HTML Specs for css are defined by the w3c Types of Style Sheets Inline Add a style to an individual element such as a heading or paragraph embedded external which is best? External Styles sheets Cascade to all elements in all pages that to them Override external and embedded style sheets external style sheets Inline Styles utilize the style attribute which can be used on any element.

    Originalbeschreibung:

    Originaltitel

    week5

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PPT, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    CSS is a separate language from HTML It is used to enhance the display of HTML Specs for css are defined by the w3c Types of Style Sheets Inline Add a style to an individual element such as a heading or paragraph embedded external which is best? External Styles sheets Cascade to all elements in all pages that to them Override external and embedded style sheets external style sheets Inline Styles utilize the style attribute which can be used on any element.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    38 Ansichten13 Seiten

    Week 5

    Hochgeladen von

    api-218675166
    CSS is a separate language from HTML It is used to enhance the display of HTML Specs for css are defined by the w3c Types of Style Sheets Inline Add a style to an individual element such as a heading or paragraph embedded external which is best? External Styles sheets Cascade to all elements in all pages that to them Override external and embedded style sheets external style sheets Inline Styles utilize the style attribute which can be used on any element.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PPT, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 13

    Cascading Style Sheets

    Styles and Style Sheets

    Style

    A rule that defines the appearance of an element on a web page


    A series of styles that define the appearance of a web page or an entire web site

    Style Sheet

    Examples: font-family, font-size, margins, link specs

    CSS Cascading Style Sheets


    CSS is a separate language from HTML It is used to enhance the display of HTML Specs for CSS are defined by the w3c

    Types of Style Sheets

    Inline

    Add a style to an individual element such as a heading or paragraph Utilize the style attribute of the element
    Add a style sheet within the <head> </head> element to define styles for a single page Utilize the <style> </style> element. Stylesheet in an external text file with .css extension Utilize the <link /> element within the <head> element

    Embedded

    External

    Which is best?

    External style sheets are best

    Can be reused across an entire web site to maintain common look and feel Isolates changes to appearance to a single, separate file Keeps web pages specific to functionality and css files specific to style (modularity is good!)

    Why 3? Cascading and Overriding

    External styles sheets

    Cascade to all elements in all pages that <link /> to them Override external style sheets Cascade to a single pages elements Override external & embedded style sheets

    Embedded style sheets

    Inline style sheets

    *Therefore, all 3 can be used in a single page!

    Style Syntax

    A style consists of a selector and a declaration


    font-family: Garamond; font-color: Red; [selector]: [declaration]; Separate the selector from the declaration with a colon Separate each style with a semicolon Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla or Netscape.

    Inline Styles

    Utilize the style attribute which can be used on any element


    <p style=font-family:Times;fontcolor:red;font-weight:bold;>Blah blah blah</p> <table style=border-color:red;borderstyle:dotted;> <td style=background-color:blue;

    Embedded Styles
    Utilize the <style> element within the <head> <style type=text/css> <!---p {text-indent: 8pt} a { text-decoration: none; font-family: Verdana; font-size: 14pt} a:hover {background: navy; color: white} ---> </style>

    External Styles

    Instead of <style> in the <head>, utilize <link /> in the head and write the CSS code in an external file.

    <link rel=stylesheet type=text/css href=mystyles.css />

    Grouping

    You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be green:

    h1,h2,h3,h4,h5,h6 { color: green }

    Classes

    You can define custom styles and give them class names, which can then be utilized with the class attribute in your html

    <table class=specialtable> <p class=errorRed> ---.specialtable {background-color:red} .specialtable th {font-weight:bold} .specialtable td {font-style:italic} p.errorRed {font-color:red} Class styles begin with a period. You can use or omit the element name to the left of the period

    <span> and <div> elements

    The <span> element allows you to apply styles or classes to anything within them. It will override external and embedded styles, but be overridden if any elements within the <span> specify their own styles. The <div> element does the same, but also includes an id attribute that is referenced by DHTML to show, hide, and position the div on the page. Note: <div> acts like <p> in that it puts whitespace around the item, whereas <span> does not.

    Das könnte Ihnen auch gefallen