Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS Lacture

    Caricato da

    Searching for New World
    31 visualizzazioni15 pagine

    Titolo originale

    CSS-LACTURE

    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

    Copyright:

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

    CSS Lacture

    Caricato da

    Searching for New World

    Copyright:

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

    CSS3

    What is CSS?

    Cascading Style sheets (CSS) is a language that works with HTML documents to define the way how web pages are
    presented.

    A document is a collection of information that is structured using a markup language.

    Presenting a document to a user means converting it into a useable form for your audience.
    A brief History of CSS:

     CSS was first developed in 1997.


     CSS didn't gain in popularity until around 2000.

    Cascading Style Sheets, level 1:


    On Dec 17, 1996, W3C wrote the recommendation for CSS to be included in the HTML standard
    by Bert Bos, Håkon Lie .

    Cascading Style Sheets, level 1:


    CSS2 becomes W3C recommendation - May 1998 by Bert Bos, Ian Jacobs, Håkon Lie, Chris
    Lilley
    A brief History of CSS:

    Cascading Style Sheets, level 2.1:


    CSS 2.1 released - September 2003 by Bert Bos, Tantek Çelik, Ian
    Hickson, Håkon Lie .

    Cascading Style Sheets, level 3:


    CSS3 released - December 2007 by Bert Bos, various others on each module .
    Advantages of CSS

     CSS saves time


    With CSS, you only have to specify these details once for any element. CSS will automatically apply the
    specified styles whenever that element occurs.
     Pages load faster
    Less code means faster download times.
     Easy maintenance
    To change the style of an element looks across the whole site, you only have to make an edit in one place.
     Superior styles to HTML
    CSS was built for styles. HTML was not. While browsers usually display HTML elements in a certain
    way, you can override this with CSS.
    Three Ways to Insert CSS

    There are three ways of inserting a style sheet:


     External style sheet
     Internal style sheet
     Inline style
    External style sheet

     External style sheet are ideal when the style is applied to many pages.

     With external style sheets, you can change the look of an entire web site by changing one file.

     External styles are defined in an external CSS file, and then linked to in the <head> section of
    an HTML page:
    Example

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    Internal Styling or Embedding CSS

     An internal style sheet can be used to define a common style for all HTML elements on a page.

     Internal styling is defined in the <head> section of an HTML page, using a <style> element:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Internal Styling</title>
    Internal Styling or Embedding CSS

    <style>
    body{background-color:#9F6;}
    h1{color:blue}
    p{color:green}
    </style>
    </head>

    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    Inline Styling (Inline CSS)

     An inline style may be used to apply a unique style for a single element.

     An inline style loses many of the advantages of a style sheet (by mixing content with
    presentation). Use this method sparingly!

     To use inline styles, add the style attribute to the relevant tag. The style attribute can
    contain any CSS property. The example shows how to change the color and the left
    margin of a <h1> element:
    Inline Styling (Inline CSS)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <h1 style="color:blue">This is a Blue Heading</h1>
    </body>
    </html>
    Multiple Style Sheets

    Styles can be specified:


     in an external CSS file
     inside the <head> section of an HTML page
     inside an HTML element
    Multiple Style Sheets

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Multiple Style Sheets</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
    body {background-color: linen;}
    </style>
    </head>
    Multiple Style Sheets

    <body style="background-color: lightcyan">

    <h1>Multiple Styles Will Cascade into One</h1>


    <p>In this example, the background color is set inline, in an internal stylesheet, and in an external stylesheet.</p>
    <p>Try experimenting by removing styles to see how the cascading stylesheets work. (try removing the inline
    first, then the internal, then the external)</p>

    </body>
    </html>

    Potrebbero piacerti anche