Scribd Logo
Upload

Welcome to Scribd!

  • Css 3

    Uploaded by

    api-26084493
    241 views18 pages
    A set of Style Rules is called a Style Sheet. A style rule is composed of two parts: a selector and a declaration. The Value "text / css" defines the style language as cascading style sheets.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    A set of Style Rules is called a Style Sheet. A style rule is composed of two parts: a selector and a declaration. The Value "text / css" defines the style language as cascading style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    241 views18 pages

    Css 3

    Uploaded by

    api-26084493
    A set of Style Rules is called a Style Sheet. A style rule is composed of two parts: a selector and a declaration. The Value "text / css" defines the style language as cascading style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    Learn about Cascading

    Style Sheets
    LACUNY Web Management Roundtable
    October 21, 2005

    http://www.lehman.edu/provost/library/CSS/CSS.ppt
    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.

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 2


    Font Appearance of an Element
    • HTML code
    <H3 align="center"> <font face="times
    new roman, times, serif"
    color="#800000">SPECIAL
    COLLECTION</a></font></h3>

    • CSS rule
    H3
    {
    Font-family: times new roman, 'serif';
    Color: #800000;
    Text-align: center;
    }

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 3


    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.
    Sheet
    • Style rules are contained in the <STYLE>
    element in the document’s <HEAD> section.
    <Head>
    <Style type=“text/css”>
    P
    {color:blue; font-size: 24pt;}
    </Style>
    </Head>
    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 4
    Understanding Style Rules
    • A Style Rule is composed of two parts: a selector
    and a declaration.
    Declaration
    Selector

    TH {color: red;}.
    • The Selector indicates the element to which the
    rule is applied.
    • The Declaration determines the property values
    of a selector.
    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 5
    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 (;).
    Property Value

    P {color: red;}

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 6


    Using the <STYLE> Element
    • The <STYLE> element is always positioned in
    the <HEAD> section of the document.
    • The <STYLE> element always contains <TYPE>
    attribute. The value “text/css” defines the style
    language as Cascading Style Sheets.
    <Head>
    <Style type=“text/css”>
    P {color:blue; font-size: 24pt;}
    </Style>
    </Head>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 7


    Using External Style Sheet
    • Style Rules can be expressed in an external Style
    Sheet - a text document that doesn’t contain any
    HTML code. There is no <STYLE> 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;}
    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 8
    Linking to an External Style
    Sheet
    • To link a Web page to an external style sheet a
    <LINK> element should be added within
    <HEAD> element of a document with the URL
    to a style sheet. It tells the browser to find a
    specified style sheet.
    <Head>
    <Title>Demo_1</Title>
    <Style type=“text/css”>
    <Link href=“style_1.css” Rel=“stylsheet”>
    </Style>
    </Head>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 9


    Linking to an External Style
    Sheet
    HREF attribute The REL attribute describes
    states the relative the relationship between the
    URL to the style current document and the
    sheet document identified by the
    href attribute

    <Head>
    <Title>Demo_1</Title>
    <Style type=“text/css”>
    <Link href=“style1.css” Rel=“stylsheet”>
    </Style>
    </Head>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 10


    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
    Element Class
    Selector

    A.nav:link {color:#FF3300; text-decoration: none;}

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 11


    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.
    A.nav:link {color:#FF3300; text-decoration: none;}

    • Add it to HTML code of a Web page by using the


    CLASS attribute.
    <a href="http://www.eric.org" class="nav">ERIC</a>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 12


    Example 1
    http://www.lehman.edu/provost/library/CSS/demo_1.htm

    CSS Style Sheet


    http://www.lehman.edu/provost/library/CSS/style_1.htm

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 13


    Example 2
    http://www.lehman.edu/provost/library/CSS/demo_2.htm

    CSS Style Sheet


    http://www.lehman.edu/provost/library/CSS/style_2.htm

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 14


    Example 3
    http://www.lehman.edu/provost/library/CSS/demo_3.htm

    CSS Style Sheet


    http://www.lehman.edu/provost/library/CSS/style_3.htm

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 15


    Lehman College Library Web Site
    http://www.lehman.edu/provost/library//
    http://www.lehman.edu/provost/library/CSS/style.htm

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 16


    Lehman College Library Web Site

    CSS
    A.nav:link { color: #990000; font-size: 12px; line-height: 14px; font-family:
    arial, verdana, geneva, helvetica; text-decoration: none; }
    A.nav:visited { color: #CC3333; font-size: 12px; line-height: 14px; font-
    family: arial, verdana, geneva, helvetica; text-decoration: none; }

    HTML
    In the <Head> element
    <link rel="stylesheet" href="Welcome_files/style" type="text/css">
    In the <Body> element
    <td align="center" height="25"><a class="nav"
    href="http://mail.lehman.edu">Check your Lehman e-mail account</a>

    </td>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 17


    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 <http://
    www.htmlhelp.com/reference/css/>

    October 21, 2005 LACUNY Web Roundtable galina.letnikova@lehman.cuny.edu 18

    You might also like