Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    Ict 9 Lesson 18

    Uploaded by

    Cara Balanaa
    The document discusses different ways to style HTML elements using internal style sheets, inline style sheets, and span tags. It provides the syntax for each and explains that internal style sheets use <style> tags in the head, inline style sheets apply styles directly to tags using the style attribute, and span tags are used to style specific text on a page. The document also covers using CSS to style multimedia elements like images, audio, and video, describing properties like height, width, border, opacity, and centering elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Ict 9 Lesson 18

    Uploaded by

    Cara Balanaa
    11 views23 pages
    The document discusses different ways to style HTML elements using internal style sheets, inline style sheets, and span tags. It provides the syntax for each and explains that internal style sheets use <style> tags in the head, inline style sheets apply styles directly to tags using the style attribute, and span tags are used to style specific text on a page. The document also covers using CSS to style multimedia elements like images, audio, and video, describing properties like height, width, border, opacity, and centering elements.

    Original Description:

    okiz, done! :)

    Original Title

    ICT-9-LESSON-18

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses different ways to style HTML elements using internal style sheets, inline style sheets, and span tags. It provides the syntax for each and explains that internal style sheets use <style> tags in the head, inline style sheets apply styles directly to tags using the style attribute, and span tags are used to style specific text on a page. The document also covers using CSS to style multimedia elements like images, audio, and video, describing properties like height, width, border, opacity, and centering elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    11 views23 pages

    Ict 9 Lesson 18

    Uploaded by

    Cara Balanaa
    The document discusses different ways to style HTML elements using internal style sheets, inline style sheets, and span tags. It provides the syntax for each and explains that internal style sheets use <style> tags in the head, inline style sheets apply styles directly to tags using the style attribute, and span tags are used to style specific text on a page. The document also covers using CSS to style multimedia elements like images, audio, and video, describing properties like height, width, border, opacity, and centering elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 23

    LESSON 18

    Styling Html with Internal Style Sheet,


    Inline Style Sheet, and Span Tag
    LEARNING OBJECTIVES
    create an input using syntaxes and describe the
    function of internal style sheet, inline style sheet
    and span tag.
    UNIQUE DESIGNS
    • In sections and elements can be applied using
    internal style sheet, inline style sheet, and span
    tag. These are placed within the HTML tag.
    INTERNAL STYLE SHEET
    • It executes codes that are placed in the
    head section of an HTML file.

    SYNTAX:
    <style> selector{property: value;} </style>
    INTERNAL STYLE SHEET
    INLINE STYLE SHEET
    It applies a style to a particular tag only.
    SYNTAX: <tag style=”property:value;”></tag>
    INLINE STYLE SHEET
    SPAN TAG
    It is a special tag used to style elements on the web page.
    It is more specific compared to internal and inline CSS.
    SYNTAX: <span style=”property:value;”></span>
    SPAN TAG
    HIERARCHY TAG
    CSS is intended to apply multiple
    styles to a website. The website
    efficiently designed loads faster,
    wherein same styles are applied to
    several elements without repeating
    the styles statements in the program
    codes.
    Order of Precedence
    When using selectors, CSS follows the order where the last selector is
    the highest priority: element selector, class selector, and ID selector.

    Element (element) Selector


    It selects all elements according to the element name.

    Class (class) Selector


    It selects all elements with a certain class attribute.
    When using selectors, CSS follows the order where the last selector is
    the highest priority: element selector, class selector, and ID selector.

    ID (id) Selector
    It selects the id attribute of an HTML element to find a
    certain element.
    MULTIMEDIA ELEMENTS
    Multimedia is any interactive content that uses a
    combination of various forms like sound or audio,
    image, video, and animation.
    These are the multimedia elements that we can work on:

    SIZE
    The height and width properties set the size of an image. The
    values can be in px or %.
    Syntax for height: img{height: value;}
    Syntax for width: img{width: value;}
    These are the multimedia elements that we can work on:

    BORDER
    It displays an image with borders. The values follow this order:
    width, style, and color.
    Syntax: img{border: width style color;}
    The values of the border can also be individually used. We specify the
    following properties and their values:
    These are the multimedia elements that we can work on:

    ROUNDED CORNERS
    It displays an image with rounded corners. The values can be in px
    or %.
    Syntax: img{border-radius: value;}
    These are the multimedia elements that we can work on:

    DISPLAY AT THE CENTER


    These properties are used to set the image at the center of the
    browser.
    These are the multimedia elements that we can work on:

    OPACITY OR TRANSPARENCY
    It displays an image in fade effect. The values can be from 0.0 to -
    1.0. the default value is 1. Lower values are more transparent.
    Syntax: img{opacity: value;}
    These are the multimedia elements that we can work on:

    STYLE AUDIO AND VIDEO


    Almost all properties for styling images can also be used for audio
    and video. We usually use the width and height properties for the
    audio controls.

    CSS: HTML
    These are the multimedia elements that we can work on:

    STYLE AUDIO AND VIDEO


    The properties for images are also applicable to videos.

    HTML
    CSS:
    THANK YOU!
    SEE YOU IN
    NEXT LESSON

    You might also like