Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    COMP 10 CSS - Copy

    Uploaded by

    nova bel supang

    Copyright:

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

    COMP 10 CSS - Copy

    Uploaded by

    nova bel supang
    6 views18 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

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

    COMP 10 CSS - Copy

    Uploaded by

    nova bel supang

    Copyright:

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

    CSS Borders, Margins, and Paddings

    A. Demonstrate an understanding of the


    CSS borders, margins, and paddings.
    B. Apply CSS borders, margins, and
    paddings.
    C. The learners create an interactive
    website.
    CSS Borders: The border property in CSS
    is used to set the border around an HTML
    element. It can be specified with a width,
    style, and color.

    The border-style property specifies what kind


    of border to display.
    •dotted - Defines a dotted border
    •dashed - Defines a dashed border
    •solid - Defines a solid border
    •double - Defines a double border
    •groove - Defines a 3D grooved border. The effect depends on the
    border-color value
    •ridge - Defines a 3D ridged border. The effect depends on the
    border-color value
    •inset - Defines a 3D inset border. The effect depends on the border-
    color value
    •outset - Defines a 3D outset border. The effect depends on the
    border-color value
    •none - Defines no border
    •hidden - Defines a hidden border
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}
    CSS Border Width
    The border-width property specifies the
    width of the four borders.

    The width can be set as a specific size (in


    px, pt, cm, em, etc) or by using one of the
    three pre-defined values: thin, medium, or
    thick.
    p.one { p.two {
    border- border-
    style: solid; style: solid;
    border- border-
    width: 5px; width: medium;
    } }

    p.three { p.four {
    border- border-
    style: dotted; style: dotted;
    border- border-
    width: 2px; width: thick;
    } }
    CSS Border Color
    The border-color property is used to set the color of
    the four borders.
    The color can be set by:
    •name - specify a color name, like "red"
    •HEX - specify a HEX value, like "#ff0000"
    •RGB - specify a RGB value, like "rgb(255,0,0)"
    •HSL - specify a HSL value, like "hsl(0, 100%,
    50%)"
    •transparent
    p.two {
    p.one {
    border-
    border-
    style: solid;
    style: solid;
    border-
    border-color: red;
    color: green;
    }
    }

    p.three {
    border-
    style: dotted;
    border-
    color: blue;
    }
    Specific Side Colors
    The border-color property can have from
    one to four values (for the top border, right
    border, bottom border, and the left border).
    p.one {
    border-style: solid;
    border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
    }
    CSS Border - Shorthand Property

    The border property is a shorthand property for


    the following individual border properties:
    •border-width
    •border-style (required)
    •border-color
    p{
    border: 5px solid red;
    }
    CSS Margins
    The CSS margin properties are used to create space
    around elements, outside of any defined borders.

    With CSS, you have full control over the margins. There
    are properties for setting the margin for each side of an
    element (top, right, bottom, and left).
    CSS Margins
    p{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
    }

    Margin Shorthand
    p{
    margin: 25px 50px 75px 100px;
    }
    CSS Padding
    The CSS padding properties are used to generate
    space around an element's content, inside of any
    defined borders.
    With CSS, you have full control over the padding.
    There are properties for setting the padding for each
    side of an element (top, right, bottom, and left).
    CSS Padding
    div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
    }

    Padding Shorthand
    div {
    padding: 25px 50px 75px 100px;
    }
    Criteria
    Coding 5%
    Validation
    Cascading Style 5%
    Sheet
    Content 5%

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy