Scribd Logo
Upload

Welcome to Scribd!

  • Css Presentation

    Uploaded by

    conspiracykc
    57 views25 pages
    Cascading Style Sheets (CSS) allow separation of document content from document presentation through styles that define how elements are displayed. CSS was developed by the World Wide Web Consortium to create a consistent approach to style web documents. CSS rules contain selectors and declarations, where declarations have properties and values separated by a colon. There are different methods for linking or embedding stylesheets in HTML documents.

    Original Description:

    Original Title

    css presentation

    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
    Cascading Style Sheets (CSS) allow separation of document content from document presentation through styles that define how elements are displayed. CSS was developed by the World Wide Web Consortium to create a consistent approach to style web documents. CSS rules contain selectors and declarations, where declarations have properties and values separated by a colon. There are different methods for linking or embedding stylesheets in HTML documents.

    Copyright:

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

    Css Presentation

    Uploaded by

    conspiracykc
    Cascading Style Sheets (CSS) allow separation of document content from document presentation through styles that define how elements are displayed. CSS was developed by the World Wide Web Consortium to create a consistent approach to style web documents. CSS rules contain selectors and declarations, where declarations have properties and values separated by a colon. There are different methods for linking or embedding stylesheets in HTML documents.

    Copyright:

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

    Cascading Style SHEETS

    Dynamic HTML is focused on making the web more


    interactive.

    W3C World Wide Web Consortium


    http://www.w3.org
    non-partisan organization for web standard

    Microsoft Dynamic HTML Netscape Dynamic HTML


    - cascading style sheet - cascading style sheets
    - document object model and - layers
    extensive scripting - absolute positioning via CSS
    - absolute positioning via and Layers
    cascading style sheets - canvas mode
    - multimedia controls with - dynamic fonts
    Internet Client Side SDK (Software
    Dev’t Kit)
    - dynamic tables including data
    binding with Internet Client Side
    SDK
    1. CSS stands for Cascading Style Sheets
    2. Styles define how to display HTML elements
    -Its most common application is to style
    web pages written in HTML and XHTML.
    -CSS is designed primarily to enable the
    separation of document content (written
    in HTML or a similar markup language)
    from document presentation, including
    elements such as the layout, colors, and
    fonts.
    I.2 Cascading Style Sheets were developed as
    a means for creating a consistent approach to
    providing style information for web
    documents.

    The World Wide Web Consortium (W3C) created


    CSS in 1994.
    Lie-Cascading HTML Style Sheets(CHSS)
    Bos-Stream-based Style Sheet Proposal(SSP)
    CSS rule can be summarized as
    1.Each has a selector and declaration
    2.Each declaration has a property and value
    3.Each declaration is surrounded by brackets
    4.Each property and value is separated by colon
    5.Selector separated by spaces are combined to narrow the selection
    6.Selectors separated by commas share the same rule
    7.Multiple declarations are separated by semicolons.

    Linking to Style Sheets. There are several ways you can do depending on
    what you need to do. Following are methods used for linking in or adding
    styles.
    1.Link to an external style sheet from your HTML document
    2.Embed a style sheet within your HTML document
    3.Add styles in line with your HTML document
    4.Import one style sheets into another style sheets
    1. Link to an external style sheet from your HTML document. Catering all styles
    in a separate text file and store it in your HTML pages. Save your style sheet
    files with .css extension and link it under the <HEAD> tag using <LINK> tag.

    <HEAD>
    <LINK REL=stylesheet href=“style1.css” type=“text/css”>
    </HEAD>

    2. Embed a style sheet within your HTML document.

    <HTML>
    <HEAD>
    <style text=“text/css”>
    <!-- body { background : white; font-family: helvetica }
    p i { font-size: 14pt }
    -->
    </style>
    </HEAD>
    </HTML>
    3. Add styles in line with your HTML document. You use the same
    style <STYLE> tag with embedded styles, but you put it within the
    declaration of the tag.

    <H1 style = “color:blue; margin-left : 0.7in”>

    4. Import one style sheets into another style sheets. Add the import
    statement in the file.

    body { background : white; font-family : helvetica }


    p i { font-size: 14pt }
    @import url(style1.css)
    I.3 CSS Syntax
    A CSS rule has two main parts: a selector,
    and one or more declarations:

    -The selector is normally the HTML element


    you want to style.
    -Each declaration consists of a property and a
    value.
    -The property is the style attribute you want to
    change. Each property has a value.
    CSS SYNTAX Example
    -CSS declarations always ends with a
    semicolon, and declaration groups are
    surrounded by curly brackets:
    p {color:red;text-align:center;}
    To make the CSS more readable:
    p
    {
    color:red;
    text-align:center;
    }
    I.4 CSS Comments
     A CSS comment begins with "/*", and ends

    with "*/", like this:


    p
    {
    text-align:center;
    /*This is another comment*/
    color:black;
    font-family:arial;
    }
    II.1 CSS Backgrounds
    II.1 EXAMPLES

    A. Background Color
    body {background-color:#b0c4de;}
    The background color can be specified by:
     name - a color name, like "red"
     RGB - an RGB value, like "rgb(255,0,0)"
     Hex - a hex value, like "#ff0000"

    B. Background Image
    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    II.3 FONTS
     CSS Font Families
    In CSS, there are two types of font family names:
     generic family - a group of font families with a

    similar look (like "Serif" or "Monospace")


     font family - a specific font family (like "Times New

    Roman" or "Arial")
    Generic Family Font Family Description
    Serif Times New Roman Serif fonts have
    Georgia small lines at the
    ends on some
    characters
    EX: Ai
    Sans-serif "Sans" means
    without - these
    Arial
    fonts do not have
    Verdana
    the lines at the ends
    of characters
    EX: Ai
    Note: If the name of a font family is more than one
    word, it must be in quotation marks, like font-
    family: "Times New Roman".
    Ex:
    p{font-family:"Times New Roman", Times, serif;}

     Font Style
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}
     Font Size
    Always use the proper HTML tags, like <h1> -
    <h6> for headings and <p> for paragraphs.
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}
    II.4 Styling Links

    The four links states are:


     a:link - a normal, unvisited link
     a:visited - a link the user has visited
     a:hover - a link when the user mouses over it
     a:active - a link the moment it is clicked

    EX:
    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */

     a:hover MUST come after a:link and a:visited


     a:active MUST come after a:hover

    *Can have text background and color


    II.5 LIST
    In HTML, there are two types of lists:
     unordered lists - the list items are marked with
    bullets
     ordered lists - the list items are marked with
    numbers or letters

    Different List Item Markers


    The type of list item marker is specified with the list-
    style-type property:
     Example

    ul.a {list-style-type: circle;}


    ul.b {list-style-type: square;}
    ol.c {list-style-type: upper-roman;}
    ol.d {list-style-type: lower-alpha;}
    III. BOX MODELS
    III. Box
    div.ex
    {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:0px;
    }

     Margin - Clears an area around the border. The margin


    does not have a background color, and it is completely
    transparent
     Border - A border that lies around the padding and
    content. The border is affected by the background color
    of the box
     Padding - Clears an area around the content. The
    padding is affected by the background color of the box
     Content - The content of the box, where text and
    images appear
    III.3 Outline...
    III.4 Margins
     The margin clears an area around an element (outside
    the border). The margin does not have a background
    color, and is completely transparent.
     The top, right, bottom, and left margin can be changed

    independently using separate properties. A shorthand


    margin property can also be used, to change all margins
    at once.
    In CSS, it is possible to specify different margins for
    different sides:
     Example
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
    CLASSES AND IDs
    Classes enables you to create sub-sets of attributes to act as a specific
    selectors.

    p .cour { color : blue ; font-family : courier }

    To activate them simply


    <p class=“cour”> Styled in courier </p>

    Similar to classes, ID can be used to define a style or rule.

    #74p { color : maroon }

    <H1 id=“74p”>Maroon</H1>
    <P> and more about colors here <B id=74p>maroon</B>.</P>
    Thank YOU!
    Hope you enjoy reading my presentation…

    Congratulations, you are ready embedding


    scripting language into your HTML page…

    Good Luck and happy reading again!

    You might also like