Scribd Logo
Upload

Welcome to Scribd!

  • 21 views

    Css Note

    Uploaded by

    Tsering Youdon
    CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

    Copyright:

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

    Css Note

    Uploaded by

    Tsering Youdon
    21 views19 pages
    CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

    Original Title

    css note

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    21 views19 pages

    Css Note

    Uploaded by

    Tsering Youdon
    CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS rules consist of selectors and declarations, where selectors target HTML elements and declarations define styles. There are three main ways to add CSS - inline styles within HTML, internal style sheets within <style> tags, and external style sheets linked via <link> tags. CSS properties control various aspects of elements like fonts, text, background colors, margins and borders. Comments in CSS use /* */ syntax.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    You are on page 1of 19

    1 CSS (Cascading Style sheet)

    2
    3
    What is CSS?
    4

     A Cascading Style Sheet is a file with a


    list of formatting instructions.
     Add style to your HTML.

     Can completely control how your


    webpages look without changing your
    HTML.
     Extension is .css.
    Benefits of CSS
    5

     Pages download faster, sometimes by as much as


    50%.
     Developers have to type less code, and the web
    pages are shorter and neater.
     Easy maintenance − To make a global change,
    simply change the style, and all elements in all the
    web pages will be updated automatically.
    How to write style rules
    6
     Two parts: (1) selector and (2) declaration.
    1. Selector: The HTML element you want to add style
    to.
    <p> <h1> <table> etc.
    2. Declaration: The statement of style for that element.
    Made up of property and value.
     Selector {declaration;}
     Declaration = {property: value;}
    Basic CSS rule syntax
    7

    p {
    font-family: sans-serif;
    color: red;
    } CSS
     A CSS file consists of one or more rules
     Each rule starts with a selector
    Three ways of adding Style sheets to a web page

    1. Inline styles:
     Styles are embedded right within the html code

    they affect.
    <p style="font-family: Lucida-Handwriting; color: red;">
    This is a paragraph</p>

    HTML

    This is a paragraph

    output
    2. Internal style sheets: <style>
    9

     Styles are placed within the header information of the web


    page and then affect all corresponding tags on the page.

    <head>
    <style type="text/css">
    p { font-family:sans-serif; color: red; }
    h2 { background-color: yellow; }
    </style>
    </head>
    HTML
    3. External/Attaching a CSS file <link>
    10
     Styles are coded in a separate document, which is then
    referenced/linked from within the header of the actual web
    page.
    <head>
    ...
    <link href="filename" type="text/css" rel="stylesheet" />
    ...
    </head> HTML

    <link href="style.css" type="text/css" rel="stylesheet" />


    <link href="http://www.google.com/uds/css/gsearch.css"
    rel="stylesheet" type="text/css" />
    HTML
     A page can link to multiple style sheet files
     In case of a conflict (two sheets define a style for the same HTML
    element), the latter sheet's properties will be used
    1. CSS properties for colors
    11

    p {
    color: red;
    background-color: yellow;
    }
    CSS

    <p> This paragraph uses the style above </p>


    HTML

    This paragraph uses the style above


    output

    PROPERTY DESCRIPTION
    color color of the element's text
    color that will appear behind the
    background-color
    element
    Grouping styles
    12

    p, h1, h2 {
    color: green;
    }
    h2 {
    background-color: yellow;
    } CSS

    This paragraph uses the above style.


    This h2 uses the above styles.
    output

     A style can select multiple elements separated by commas


     The individual elements can also have their own styles
    2. CSS properties for Background
    13

    Body 
    {
    Background-image
    background-image: url (“tashi.jpg”);
    }
    CSS

    PROPERTY DESCRIPTION
    background-image To insert an image in a webpage
    Background-color To apply background color to HTML element.
    To repeat the background image, value can be as below
    repeat-x (repeated horizontally)
    Background-repeat repeat-y (repeated vertically)
    repeat (repeated horizontally and vertically)
    no-repeat (image is not repeated at all)
    Background shorthand for all the background properties
    {background-color background-image background-repeat;}
    e.g. Body { background: green url(baby.jpg) no-repeat; }
    3. CSS properties for fonts
    14

    PROPERT
    DESCRIPTION
    Y
    font-family which font will be used
    how large the letters will be drawn ( Specify in px(pixel),
    font-size
    pt(Point-size, %(percentage), em)
    font-style used to enable/disable italic style. Value(normal/italic)
    It specifies the boldness or heaviness for a font.
    font-weight
    Value (Normal /bold/bolder/lighter/100-900)
     h1 {
    font-family: Algerian; Verdana; font-sze:20px; font-style: italic;
    font- weight: bold;
     }
    4.CSS properties for text
    15

    property description
    alignment of text within its element.
    text-align
    VALUE (left/right/center/justify)
    text-decoration to add effects to text. VALUE(underline/overline/line-through)

    word-spacing,
    gaps between the various portions of the text
    letter-spacing
    text-indent blank space before the first letter of each paragraph
    control appearance of text in different cases.
    Text-transform
    VALUE(capitalize/uppercase/lowercase/none)

     P{ text-align: center;
    text-decoration: overline;
    text-transform: capitalize;
    }
    5. CSS properties for Margins and padding

    16

     Margin (distance from each side to the


    neighboring element)
    Body { margin-top: 100px;
    margin-right: 40px;
    margin-bottom: 20px;
    margin-left: 70px
    }
    Padding
    17

     Padding (defines the inner distance between the


    border and the content of the element.)
    h1 { padding-top: 20px;
    Padding-right: 30px;
    Padding-bottom: 30px;
    Padding-left: 20px;
    }
    5. CSS properties for border

    18

    PROPERTY VALUE
    Border-width thin/medium/thick e.g. h1 { border-width: thick ;}
    Border-color Color name e.g. h3{border-color: green;}
    Border-style dotted/ dashed /solid / double /groove/ ridge / inset / outset
    e.g. h2{border-style: double;}

    Difference between a static and dynamic website


    Static website: Content of the website does not change, it
    remain same for every viewer of the site.
    Dynamic website: Information contains are changes
    depending on the viewer of the site.
    CSS comments /*…*/
    19

    /* This is a comment.
    It can span many lines in the CSS file. */
    p {
    color: red; background-color: aqua;
    } CSS

     The <!-- ... --> HTML comment style is also NOT supported in
    CSS

    You might also like