Scribd Logo
Carica

Benvenuto in Scribd!

  • Css

    Caricato da

    Paayal Shah
    69 visualizzazioni21 pagine
    CSS FULL TUTORIAL

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPTX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    CSS FULL TUTORIAL

    Copyright:

    © All Rights Reserved
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    69 visualizzazioni21 pagine

    Css

    Caricato da

    Paayal Shah
    CSS FULL TUTORIAL

    Copyright:

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

    CSS stands for

    CSS saves a lot of work. It can control


    the layout of multiple web pages all at
    once
    CSS is a styling language
    We can use CSS inside HTML document
    HTML’s and CSS’s attributes are different.
    There are ways to insert CSS into HTML document.
    CSS are written within a tag so it is called Inline CSS.
    to use inline CSS, add the style attribute to the relevant element.
    The style attribute can contain any CSS property such as color, background-color.

    To style the <p> element you should add a attribute called style and a value(CSS
    properties)
    For example:

    <p style=“color:blue; background-color:pink;”>Hi , the element is styled with CSS</p>

    Note: no need to save this file as.html instead of .css


    Internal styles are written within the <style> element, inside the <head> section of an
    HTML page

    Note: no need to save this file as .html instead of .css


    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.

    Index.html Mystyle.css

    Save this as filename.html Save this as filename.css

    Note : you should run HTML file on web browser(not CSS).


    The element selector selects elements based on the element name.
    The id selector uses the id attribute of an HTML element to select a specific element.
    The class selector selects elements with a specific class attribute.
    Generally comments are used to describe(explain the code and this is not visible in
    web browsers)

    Single Line Comment Multi Line Comment


    • background-color:red;

    • background-image:url(‘mypic.png’);

    • background-repeat:no-repeat/repeat-X/repeat-y;

    • background-attachment:scroll/fixed;

    • background-position:left top/left center/left bottom/right top;


    Border Style
    Border-style:dashed/dotted/double/inset/outset/none/hidden;
    border-top/bottom/left/right-style:borderStyle_values;
    Border Color
    Border-color:colorname;
    border-top/bottom/left/right-color:colorname;
    Border width
    Border-width: value;
    border-top/bottom/left/right-width:values;

    Border:5px green inset;


    Margin-top: value ; padding-top: value ;
    margin-left: value; padding-left: value;
    margin-bottom: value; padding-bottom: value;
    Margin-bottom: value; Padding-bottom: value;

    Margin: value; padding: value;


    margin:20px; Padding:20px;
    Color:colorname/hex value;
    Direction:ltr/rtl;
    Text-decoration:overline/underline/line-through;
    Word-spacing:value;
    Letter-spacing:value;
    Line-height:value;
    Text-indent:value;
    Text-align:left/center/right;
    Text-transform:uppercase/lowercase/capitalize;
    Text-shadow:value value value colorname;
    Font-family:fontname;
    Font-size:value;
    Font-style:italic/normal/oblique;
    Font-variant:small-caps;
    Font-weight:bold/lighter/normal;
    Position: static/absolute/relative/fixed;
    Top: value;
    left: value;
    Bottom: value;
    Right: value;
    Height: value;
    Width: value;
    Border: border_value;
    Opacity: 0.1-1;
    Border-radius:value;
    Transform:rotate(value in deg);
    Transform:skew(value in deg);
    Transform:scale(value in ratio ,another value in ratio);
    Transform:translate(x,y);
    @keyframes animationName{
    0%{css properties;}
    25%{css properties;}
    50%{css properties;}
    100%{css properties;}
    }

    Animation: animationName animationTime animationLoop;

    .div{animation: animate 5s 5;}

    Potrebbero piacerti anche