Scribd Logo
Upload

Welcome to Scribd!

  • CSS - Background and Outlines

    Uploaded by

    Shahi Ji
    8 views36 pages
    CSS

    Original Title

    [9] CSS - Background and Outlines

    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
    CSS

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views36 pages

    CSS - Background and Outlines

    Uploaded by

    Shahi Ji
    CSS

    Copyright:

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

    CSS Framework

    CSS Backgrounds and Others

    Supriya Chakraborty
    AMITY University, Kolkata
    Already Covered in CSS
    • The different selectors of CSS.
    • How to include the separate CSS file?
    • What is CSS and advantages of CSS.
    Background-color
    • The background-color property set the background color
    of the element.
    With CSS, all three schemes are
    body { applicable:
      background-color: lightblue;
    a valid color name - like "red"
    }
    a HEX value - like "#ff0000"

    an RGB value - like "rgb(255,0,0)"


    Opacity and Transparency
    • An element below the another element could be visible or
    not?
    – If under element is completely visible and over element is not
    completely visible, then the over element is fully transparent.
    – If the under element is not complexly visible and only the over
    element is visible, then the over element is opaque.
    – In CSS, it has a range from 0 to 1. Lower the value, higher the
    transparency.
    Background-color and Opacity
    div {
      background-color: green;
      opacity: 0.3;
    }
    Background-Image

    • The background-image property specifies an image to use


    as the background of an element.
    • By default, the image is repeated so it covers the entire
    element.
    Few Tricks
    body {
      background-image: url(“img10.jpg”);
    }

    Specifying background-image or background-color in the


    selector body effect the entire web page.
    Show to
    student the
    Background-image in div element css part
    through code

    <div id="bi"> #bi


    { background-image: url("imgdime3.jpg");
    Library is the good
    width: 250px;
    place for the best height: 150px;
    association. /*margin-left: 652px; image width 250+
    </div> margin left 652 = 902 px are the total px of
    the screen */
    Only part of the web page margin-top: 100px;
    has the background margin-left: 200px;
    image or color }
    Fixed or scroll: Background-attachment
    • The fixed value of property background-attachment enable
    the content to scroll down, but not the background image.

    Many
    creativities
    Applied
    Fixed Background image, but scroll the above content
    • http://localhost/fixedimg.html
    • The user experience is different when scroll down.
    • Background-position: right top;
    • Background-repeat: norepeat;
    • Background-attachment: fixed;
    Another fixed background
    • http://localhost/divfixed.html
    Sticky Header
    • The sticky header like amazone needs java script.
    A very graceful design tool
    CSS BORDERS
    CSS Borders
    • The CSS border properties allow you to specify the style,
    width, and color of an element's border.
    • The border-style property specifies what kind of border to
    display.
    Few example
    Boarder style and Width
    p.one { p.three {
      border-style: solid;
      border-style: dotted;
      border-width: 5px;
    }   border-width: 2px;
    }
    p.two {
      border-style: solid; p.four {
      border-width: medium;
    }   border-style: dotted;
      border-width: thick;
    }
    Output
    Boarder individual side and color
    p {
      border-top-style: dotted;
      border-right-style: solid;
      border-bottom-style: dotted;
      border-left-style: solid;
    }
    • The border-radius property is used to add rounded borders
    to an element:

    p {
      border: 2px solid red;
      border-radius: 5px;
    }
    Now to design the following
    <!DOCTYPE html>
    <head> <style>
    P{ border-bottom : solid;
    border-bottom-width: 15px;
    } </style> </head>
    <body>
    <p> Astoma Sadgamay, Tamsoma
    Jotir Gamyay </p>
    </body>
    </html>
    Vertical Line
    Code
    <h2>The IT Industry Concerns </h2> • .vl {
    <div class="vl"> • border-left: 6px solid red;
    • height: 200px;
    The probelms is that the off-the-self
    • position: absolute;
    modules are not built and
    shortterm profits are not gained • left: 50%;
    for the last few years. • margin-left: 3px;
    • top: 10;
    </div> • }
    CSS Margins
    • The CSS margin properties are used to create space around
    elements, outside of any defined borders.

    CSS has properties for specifying the margin for each side of an element:

    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    Unit of values of Margin
    • auto - the browser calculates the margin
    • length - specifies a margin in px, pt, cm, etc.
    • % - specifies a margin in % of the width of the containing
    element
    • inherit - specifies that the margin should be inherited from
    the parent element

    VVI: Negative Values are allowed.


    Student need code demonstration to
    understands the

    <div id=“v1”> Width of the div

    #v1 {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px; /* 902- 150 = 752 is the width of the div of v1 */
    background-color: #E5E4E2;

    Experiment with negative value and see the difference


    CSS Padding

    • The CSS padding properties are used to generate space

    around an element's content, inside of any defined

    borders.
    Individual Sides for Padding
    CSS has properties for specifying the padding for each side of
    an element:
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    Undesired Result – Padding and width
    • The CSS width property specifies the width of the
    element's content area. The content area is the portion
    inside the padding, border, and margin of an element

    div {
      width: 300px; Div total width = 300+
      padding: 25px; 25 = 325 px.
    }
    Box-sizing: The solution of the undesired result

    • To keep the width at 300px, no matter the amount of


    padding, we can use the box-sizing property. This causes
    the element to maintain its width; if you increase the
    padding, the available content space will decrease.
    Box-sizing example
    div {
      width: 300px;
      padding: 25px;
      box-sizing: border-box;
    }
    Three Exercises
    • https://www.w3schools.com/css/exercise.asp?
    filename=exercise_padding1
    The BOX Model
    • All HTML elements can be considered as boxes.
    • In CSS, the term "box model" is used when talking about
    design and layout.
    Example Box Model
    • The CSS box model is essentially a box that wraps around
    every HTML element. It consists of: margins, borders,
    padding, and the actual content.
    Compute the total width of the div
    div { 320px (width)
      width: 320px; + 10px (left + right
      padding: 5px;
      border: 5px solid gray; padding)
      margin: 0; + 10px (left + right
    } border)
    + 0px (left + right margin)
    = 340px
    Outline in CSS
    • Outline differs from borders! Unlike border, the outline is
    drawn outside the element's border, and may overlap
    other content. Also, the outline is NOT a part of the
    element's dimensions; the element's total width and
    height is not affected by the width of the outline.
    SPAN Vs DIV
    • The HTML <span> tag is used for grouping and applying
    styles to inline elements.
    • There is a difference between the span tag and the div tag.
    The span tag is used with inline elements whilst the div tag
    is used with block-level content.
    Thank You
    All of you are welcome to improve the presentation, documents
    of Advance Java – An volunteer work that improve the very
    demanding professional skill- documentation, content
    management etc.

    You might also like