Scribd Logo
Upload

Welcome to Scribd!

  • Web Application Development: HTML & Css

    Uploaded by

    Brijesh Dwivedi
    8 views20 pages

    Original Title

    Day3_PPT

    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
    8 views20 pages

    Web Application Development: HTML & Css

    Uploaded by

    Brijesh Dwivedi

    Copyright:

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

    Web Application Development

    HTML & CSS


    Powered By
    CSS
    Font Style

    font-family: “Times New Roman”;

    •Used to change the font of the text.


    •This example will print the text in Times
    New Roman font.
    Font Size

    font-size: 30px;

    •Used to change the size of the text.


    •This example will change the size to text
    to 30 pixels.
    Font Family

    font-family: cursive;

    •Used to change the text style.


    •There are many available fonts here
    Margin

    margin: 10px;

    •Used to make space around the object to


    which it is applied to.
    •This example will create a 10 pixel
    space.
    Margin Variations

    Margin can be applied separately in all 4 directions as follows:

    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
    Margin - Right

    margin-right: value;

    •Used to set right margin.


    •Example margin-right: 10px
    •This example will create right margin of
    10 pixel space.
    Margin - Bottom

    margin-bottom: value;

    •Used to set bottom margin.


    •margin-bottom: 10px
    •This example will create bottom margin
    of 10 pixel space.
    Border

    border: Width Style Color;

    •Border property helps in setting width,


    style and color of border.
    •Example border: 1px solid transparent
    Border - Bottom

    border-bottom: Width Style Color;

    •Border bottom property helps in setting


    width, style and color of the bottom
    border.
    •Example border-bottom: 1px solid
    transparent
    CSS Id

    # for ID

    •To style a HTML element id attribute can


    also be used as follows
    •Ex <h1 id=‘head’>Some text</h1>
    •To style h1 with id,
    #head{
    color:yellow;
    }
    HTML
    HTML Entities

    •These are characters reserved in HTML


    • &nbsp; -> non-breakinspace
    • &copy; -> displays copyright symbol ©
    Create Your Profile
    • Add <h1> with title for yourself
    • Add <img> wrapped in a div with your own image and aligned center
    • Add <h2> with heading “About Me”
    • Add <p> and write something about yourself
    • Add <h2> with heading “Hobbies”
    • Add <p> and write something about your hobbies
    • Add <h2> with heading “Favorite Characters”
    • Add <p> and write something about your favorite characters with images
    • Add <h2> with heading “Wish List”
    • Add <p> and write something about your wishes
    • Add <h1> with your name and ©️ symbol

    • Add styles as per your creativity


    <html><head> <p>This is Shalini Mittal, one who is going to be your coach, your friend, for next few months.
    <style> Ofcourse before we begin would you like to know me? I am interesting, funny,
    body{ silly at times, but I promise you will enjoy the learning path. </p>
    background-color: #b91a50; <h2>Hobbies</h2>
    color: white; <p>Ohh!! I have so many hobbies. I am a person who loves to do everything, try all possible activities and sports.
    margin: 50px; </p>
    text-align: justify; <p>Badminton</p>
    } <p>Playing Cards</p>
    h1{ <p>Swimming</p>
    text-align: center; <p>Dancing</p>
    font-family: "Serif"; <p>Scrabble</p>
    color: #ffff00; <p>Solving puzzles</p>
    } <p>Sudoku</p>
    h2{ <h2><i>Favorite Characters</i></h2>
    font-family: "Georgia"; <p> Characters though imaginary some times so closely resemble us. My favorite characters are:</p>
    color: #00e676; <img width="300" height="250" src="alice.jpeg">
    } <p><i>Alice in wornderland</i></p>
    p{ <img width="300" height="250" src="elisa.jpeg">
    font-family: "Comic Sans"; <p>Elisa</p>
    font-size: 26px; <img width="300" height="250" width="250" height="250" src="tom.png">
    } <p>Tom & Jerry </p>
    </style></head> <img width="300" height="250" src="scooby.jpeg">
    <body> <p>Scooby DOOBy DOOOO</p>
    <h1><u>Cute Me!!!</u></h1> <h2>Wish List</h2>
    <img class='profile' width="500" <p>I wish to wish oh so many wishes to fulfill all my wishes that may come true. ALAS!!! </p>
    height="650" src="shalini.jpg"> <p>Bring <b>smile</b> on every face I meet</p>
    <h2>About Myself</h2> <p>Sky Diving</p>
    <p>Ride A Bike</p>
    <p>Shout out loud from my terrace</p>
    <p>Stand on an Airplane</p><hr>
    <h1>&copy; Shalini Mittal - 2020</h1>
    </body></html>
    Quiz
    Questions
    1. Which CSS property is used to increase the 4. Name the element that starts with & and ends
    text size with ;
    a. font-size a. tag
    b. font-family b. Symbol
    c. font-text c. HTML Entities
    d. font-increase d. HTML symbols

    2. Which of the following is used to have space 5. Syntax used to use id attribute in CSS
    between 2 elements a. #
    a. Padding b. $
    b. Margin c. .
    c. Border d. &
    d. space

    3. border-bottom will apply border at which place


    a. Above the text
    b. Below the text
    c. To the right of text
    d. To the left of text
    Web Application Development
    Answers

    1. A
    2. b
    3. B
    4. C
    5. A
    Thank You

    You might also like