Scribd Logo
Upload

Welcome to Scribd!

  • ACFrOgCS8hMFK ccWaCp57DbFfd3MBKKJbmDIPVZNYajNOOFoe3lzNaNPBw5BPa23D0 zh8MzUX748KNwiNWi339fOwLcnW9tBbOSHjMOhDfrpxmy5OQuiT5DVK8JdkJeBIsHgUr 7KKva77bBrU

    Uploaded by

    Kishan
    3 views18 pages

    Original Title

    ACFrOgCS8hMFK_ccWaCp57DbFfd3MBKKJbmDIPVZNYajNOOFoe3lzNaNPBw5BPa23D0_zh8MzUX748KNwiNWi339fOwLcnW9tBbOSHjMOhDfrpxmy5OQuiT5DVK8JdkJeBIsHgUr_7KKva77bBrU

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views18 pages

    ACFrOgCS8hMFK ccWaCp57DbFfd3MBKKJbmDIPVZNYajNOOFoe3lzNaNPBw5BPa23D0 zh8MzUX748KNwiNWi339fOwLcnW9tBbOSHjMOhDfrpxmy5OQuiT5DVK8JdkJeBIsHgUr 7KKva77bBrU

    Uploaded by

    Kishan

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    CSS

    1
    4.1 Introduction
    • Cascading Style Sheets 3 (CSS3)
    • Used to specify the presentation of
    elements separately from the structure
    of the document.
    • Keep all styling details separate and refer
    to this file from ourHTML document.
    • Multiple HTML documents can make use
    of the same CSSfile, so that all of them
    can have same look-and-feel as defined in 2

    the CSSfile.
    CSSSyntax
    • The CSSsyntax is made up of three parts: a
    selector, a property and a value:
    selector {property:value}

    Eg. body {color: black}


    p {font-family:"sans serif"}
    p {text-align:center;color:red} 3
    Main.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>Inline Styles</title>
    </head>
    Inline CSS <body>
    <p style = "font-size: 20pt;">
    This texthas font-size style applied to it
    </p>
    </body>
    </html>

    Main.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>Inline Styles</title>
    <style type = "text/css">
    p { font-size: 20pt;} Embedded CSS
    </style>
    </head>
    <body> 4
    <p>This texthas font-size style applied to it
    </p>
    </body>
    Main.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset = "utf-8">
    <title>Inline Styles</title>
    <link rel = "stylesheet" type = "text/css"
    href = “Styles.css">
    </head>
    <body>
    <p>This text has font-size style applied to it </p> External
    </body> CSS
    </html>

    Styles.css
    p { font-size: 20pt;} 5
    Box model in CSS
    • Content - The content of the box, where textand images appear
    • Padding - Clears an area around the content. The padding is transparent
    • Border - A border that goes around the padding andcontent
    • Margin - Clears an area outside the border. The margin is transparent

    6
    div and class tags
    • <div> tag is used to separate the webpage
    into separate sections.
    • Usage <div id=“id_name”>
    </div>

    • Usage < any_tag (p,h1) class=“class_name”>

    • Class_name can be used mutliple times but the


    div_id is unique 7
    id selectors
    • For <div> with id
    • #id_name for a<div>
    • For class
    • <tag_name>. (dot) class_name

    • Please open “CSS_exercise1” and do the


    exercise.
    8
    Example 1 on div and class
    • We will create a web page with following
    sections.
    • Web page header
    • Web page navigation
    • Web page main content
    • Web page footer

    9
    <div id=“header”>

    <div id=“main content”>

    <div id=
    “nav”>

    <div id=“footer”>

    10
    Html code and css
    CSSDon’t use this as it is Wait !!!

    11
    Linking between sections
    • You can link between the sections in the
    page using <div> and <a> tags.
    • The id provided in the <div> tag for a
    section needs to be used in the“href”
    attribute of the <a>tag.
    • Example:
    • <div id=“section1”>
    • <a href=“#section1”> 12
    Exercise
    • Create a web page on “International yoga
    day celebrations” as given the files .
    • Let the page header be "YOGADAYCELEBRATIONS".
    • Provide a navigations for "First International day of
    yoga" , "Origin" , "Eventgallery"
    • Use sections and articles for each navigations
    appropriately with its titles and headings. You can also
    use some images wherever necessary.
    • Provide footer to the webpage saying as copyrighted
    by you.
    13
    Sample solution

    14
    Example 2
    • Let us see an example to create web page
    that tells about yourself. Create separate
    sections “About me”, “My interests”, “My
    movies”

    15
    Example of div and class

    16
    Lets apply some css to the
    previous (use external css)
    div

    class

    17
    18

    You might also like