Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 2 CSS Selectors Div Span and Link

    Uploaded by

    Christopher Olaya
    7 views29 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    7 views29 pages

    Lesson 2 CSS Selectors Div Span and Link

    Uploaded by

    Christopher Olaya

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 29

    UNDERSTANDING CSS:

    Thinking Inside the Box


    Selectors, Div, Span, Link
    The key to understanding how CSS works
    is to imagine that there is an invisible box
    around every HTML element.
    In this example, block level elements are
    shown with red borders, and inline elements
    have green borders.
    The <body> element creates the first box,
    then the <h1>, <h2>, <p>, <i>, and <a>
    elements each create their own boxes
    within it.
    • Using CSS, you could add a
    border around any of the
    boxes, specify its width and
    height, or add a background
    color. You could also control
    text inside a box — for
    example, its color, size, and
    the typeface used.
    CSS works by associating rules
    with HTML elements. These rules
    govern how the content of
    specified elements should be
    displayed.
    A CSS rule contains two parts: a
    selector and a declaration.
    CSS Structure
    Curly Braces

    Colon

    Selector p { Semi Colon

    color: red;
    } Value

    Property

    Declaration
    Block
    CSS Structure
    Selectors indicate which element the rule
    applies to. The same rule can apply to more
    than one element if you separate the element
    names with commas.

    Declarations indicate how the elements


    referred to in the selector should be styled.
    Declarations are split into two
    parts (a property and a value), and are
    separated by a colon.
    CSS Structure
    CSS declarations sit inside curly brackets and
    each is made up of two parts: a property and a
    value, separated by a colon. You can specify
    several properties in one declaration, each
    separated by a semi-colon.
    Div Tag
    • Div divides the contents of a web page
    into individual sections. This allows you to
    apply styles to different sections of your
    Web Page. It is a generic way of adding
    structure to an HTML document.
    • Div tag is a block level element and is,
    therefore usually is applied to block HTML
    and should not be used within a
    paragraph. In most browsers, a div tag
    will provide line spacing before and after
    a block element.
    Example of Div Tag
    Output
    Span Tag
    • Span Tag is a generic way of adding
    structure to an HTML Document. Span is
    applied to an inline element. It is used to
    emphasize words or sentences within a
    paragraph.
    Example of Span tag
    Output
    Example of Div and Span
    Output
    Assignment:
    1. What are Classes and Class
    Selector? Give some example
    2. What are ID selector? Give an
    example
    3. What is Pseudo-Classes for
    Links?
    Transitional Page
    www.animationfactory.com

    Backdrops:
    - These are full sized
    backdrops, just scale them up!
    - Can be Copy-Pasted out of
    Templates for use anywhere!
    Display Property
    • CSS display property allows you to
    control how an element is displayed.
    • Block level element is laid out vertically.
    As you can see, a new paragraph begins
    with a new line after the end of another
    paragraph.
    • Inline level element is laid out horizontally
    and will only proceed to the next line
    when the end of the line is reached.
    Display Property
    Kind Description Example
    Block Level Laid out vertically <p> block
    Elements <p> block
    Inline Level Laid out <em> element <b> element
    Elements Horizontally
    The following code, without the display
    property, will give the result as shown below.
    <html>
    <head>
    <title>Display Property</title>
    <style type=“text/css”>
    <!--
    p.blue { color: blue; }
    h1#red { color: red; }
    -->
    </style>
    </head>
    <h1 id=“red”> Visual Guide Series</h1>
    <p class=“blue”>Cretive Design CS5</p>
    <p class=“blue”>Web Design</p>
    <p>Animation and Multimedia</p>
    </body>
    </html>
    The following code, without the display property, will give the
    result as shown below.
    Property for Display
    Property Keyword Description
    display: Inline Inline display or horizontal layout
    display: block Block display or vertical layout
    display: list-item Display as a list item <li>
    display: none No box or the element has no effect
    on the layout
    display: inherit Inherit value from parent
    Adding the inline display attribute inside the
    CSS style results in a browser output as shown.
    <html>
    <head>
    <title>Display Property</title>
    <style type=“text/css”>
    <!--
    p.blue { color: blue; }
    h1#red { color: red; }
    p {display: inline; }
    -->
    </style>
    </head>
    <h1 id=“red”> Visual Guide Series</h1>
    <p class=“blue”>Cretive Design CS5</p>
    <p class=“blue”>Web Design</p>
    <p>Animation and Multimedia</p>
    </body></html>
    Result:

    You might also like