Scribd Logo
Carica

Benvenuto in Scribd!

  • 5 Basics of CSS - PPSX

    Caricato da

    Latest Entertainment
    29 visualizzazioni60 pagine

    Titolo originale

    PPT - 5 Basics of CSS.ppsx

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPSX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PPSX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    29 visualizzazioni60 pagine

    5 Basics of CSS - PPSX

    Caricato da

    Latest Entertainment

    Copyright:

    © All Rights Reserved
    Scarica in formato PPSX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 60

    Topics to be Discuss

    1. Introduction to CSS
    2. Types of Style Sheets
    3. Selector
    4. Margin and Padding
    5. DIV + CSS Layout
    Design
    1. Introduction to CSS

    What is CSS???
    CSS Syntax
    What is CSS???

     CSS stands for Cascading Style Sheets.
     Styles define how to display HTML elements.
     Styles were added to HTML 4.0 to solve a
    problem.
     External Style Sheets can save a lot of work.
     External Style Sheets are stored in CSS files.
     you should have a basic understanding of the
    HTML.
    CSS Syntax
    CSS Comments
    A CSS comment starts with /* and ends with */. 

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /*This is a multiple
    lines comment*/
    p
    {
    color:red;
    /*This is another comment*/
    text-align:center;
    </style>
    </head>
    <body>
    <p>Hello World!</p>
    <p>This paragraph is styled with CSS.</p>
    <p>CSS comments are not shown in the
    output.</p>
    </body>
    </html
    2. Types of Style Sheets

    There are three ways of inserting a style


    sheet:
    a) External Style Sheet using <link>
    b) Internal Style Sheet using
    <style>
    c) Inline Style Sheet using style
    inside element
    e.g:<h1 style="color:blue;margin-
    left:30px;">This is a heading.</h1>
    a) External Style Sheet

     An external style sheet can be written in any text


    editor.
     The file should not contain any html tags.
     The style sheet file must be saved with a .css
    extension.
     Each page must link to the style sheet with the
    <link> tag.
     The <link> tag goes inside the head section.
     Do not add a space between the property value and
    the unit (such as margin-left:20 px). The correct way
    is: margin-left:20px.
    HTML Page :
    CSS Page :
    Result :
    b) Internal Style Sheet

     An internal style sheet should be used when a


    single document has a unique style.
     We define internal styles in the head section of an
    HTML page, inside the <style> tag.
    Program :

    <style>
    .center
    {
    text-align:center;
    color:red;
    }
    </style>

    <body>
    <h1 class="center">Red and center-aligned heading</h1>
    <p class="center">Red and center-aligned paragraph.</p>
    Result :
    c)Inline Style Sheet

    <!DOCTYPE html>
    <html>
    <head>inline styles
    </head>
    <body>
    <p style="color:sienna;margin-left:20px;Background-
    color:blue; font-size:25px;">This is a paragraph.</p>
    </body>
    </html>
    Result :
    3. Selector

    Id Selector
    Class Selector
    Grouping Selector
    Element selector
    Id Selector

    #para1
    {
    text-align:center;
    color:red;
    }
    </style>

    <body>
    <p id="para1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>
    </body>
    Result :
    Class Selector

    <style>
    .center
    {
    text-align:center;
    color:red;
    }
    </style>

    <body>
    <h1 class="center">Red and center-aligned heading</h1>
    <p class="center">Red and center-aligned paragraph.</p>
    </body>
    Result :
    <style>
    .center
    {
    text-align:center;
    color:red;
    }
    </style>
    <body>
    <h1 >This heading will not be affected</h1>
    <p class="center">This paragraph will be red and center-aligned.</p>
    </body>
    Result :
    Grouping selector

    <style>
    h1,h2,p
    {
    text-align:center;
    color:red;
    }
    .rn
    {
    color:blue;
    }
    .jk
    {
    color:green;
    }
    </style>

    <body>
    <h1>Hello World!</h1>
    <h2>Smaller heading!</h2>
    <p>This is a paragraph.</p>
    <h1 class="rn">NIT ROURKELA</h1>
    <p class="jk">SPARK CLUB</p>

    </body>
    Result :
    Element Selector

     The element selector selects elements based on


    the element name.

     You can select all <p> elements on a page like


    this:
    p {
        text-align: center;
        color: red;
    }
     Similarly any element can be directly selected.
    4. Margin and Padding

     MARGIN :The margin clears an area around an


    element (outside the border). The margin does
    not have a background color, and is completely
    transparent.

     PADDING :The padding clears an area around the


    content (inside the border) of an element. The
    padding is affected by the background color of the
    element.
    Margin:

     margin :20px;
    margin-top : 100px;
    margin-bottom:30px;
    margin-left :25px;
    margin-right :10px;

     margin: 25px 50px 75px 100px;


    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
     margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

     margin: 25px 50px;


    • top and bottom margins are 25px
    • right and left margins are 50px

     margin: 25px;
    • all four margins are 25px
    5. DIV + CSS Layout Design
    Program part 1 :
    CSS
    Program part 1 :
    HTML
    Result :
    Program part 2 :
    CSS & HTML
    Result :
    Program part 3 :
    CSS & HTML
    Result :
    Program part 4 :
    HTML
    Program part 4 :
    CSS
    Result :
    Program part 5 :
    HTML
    Program part 5 :
    CSS
    Result :
    Program part 6 :
    HTML
    Program part 5 :
    CSS
    Result :
    Program part 6 :
    HTML
    Program part 6 :
    HTML
    Program part 6 :
    HTML
    Program part 6 :
    HTML
    Program part 6 :
    HTML
    Program part 6 :
    CSS
    Result :
    Program part 7 :
    HTML
    Result :
    6.CSS Dimension
    Properties

     The CSS dimension properties allow you to control the


    height and width of an element.

     height : Sets the height of the element.


    max-height: Sets the maximum height.
    min-height: Sets the minimum height.
    width: Sets the width of the
    element.
    max-width: Sets the maximum width.
    min-width: Sets the minimum width.
    7.CSS Display and
    Visibility

     The display property specifies if/how an


    element is displayed, and the visibility
    property specifies if an element should be
    visible or hidden.
     HIDING AN ELEMENT:

    visibility:hidden – It hides the element but it


    takes up the space as occupied by the
    element if it is shown.

    display:none – It hides the element and it


    does not takeup the space of that element.
     BLOCK AND INLINE :

    display:inline : It takes the necessary width and do


    not force linebreaks.

    display:bock : It takes the full width necessary and


    has a line break before and after.

    Block element : <h1>, <p>, <li>, <div>


    Inline element : <span>, <a>
    8.CSS Position

     The CSS positioning properties allow you to position an


    element. It can also place an element behind another,
    and specify what should happen when an element's
    content is too big.

     There are four different positioning methods:


    1. Static(default) : position according to normal webpage flow.
    2. Fixed : position is fixed relative to browser
    window.
    3. Relative :
    4. Absolute

    Potrebbero piacerti anche