Scribd Logo
Upload

Welcome to Scribd!

  • Unit3 WD

    Uploaded by

    ssp979410
    7 views3 pages

    Original Title

    UNIT3_WD

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views3 pages

    Unit3 WD

    Uploaded by

    ssp979410

    Copyright:

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

    Web Designing {KCS 052}

    UNIT 3rd

    CSS {Cascading Style Sheets}

    Introduction: Cascading Style Sheets, commonly known as CSS, is a style sheet language
    used for describing the look and formatting of a document written in markup languages like
    HTML and XML.

    CSS enables web developers to separate the presentation layer (how a document looks) from
    the structure and content layers (what the document contains).

    While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it provides
    powerful control over the presentation of an HTML document.

    WHY CSS?

     CSS saves time: You can write CSS once and reuse the same sheet in
    multiple HTML pages.
     Easy Maintenance: To make a global change simply change the style,
    and all elements in all the webpages will be updated automatically.
     Search Engines: CSS is considered a clean coding technique, which
    means search engines won’t have to struggle to “read” its content.
     Superior styles to HTML: CSS has a much wider array of attributes than
    HTML, so you can give a far better look to your HTML page in
    comparison to HTML attributes.
     Offline Browsing: CSS can store web applications locally with the help
    of an offline cache. Using this we can view offline websites.

    CSS Syntax:
    CSS comprises style rules that are interpreted by the browser and then applied to the
    corresponding elements in your document. A style rule set consists of a selector and
    declaration block.
    1. Selector: A selector in CSS is used to target and select specific HTML
    elements to apply styles to.
    2. Declaration: A declaration in CSS is a combination of a property and its
    corresponding value.
    Selector -- h1
    Declaration -- {color:blue;font size:12px;}
     The selector points to the HTML element you want to style.
     The declaration block contains one or more declarations separated by
    semicolons.
     Each declaration includes a CSS property name and a value, separated by
    a colon.
    A CSS Syntax rule consists of a selector, property, and its value.
    The selector points to the HTML element where the CSS style is to be applied.
    The CSS property is separated by semicolons. It is a combination of the selector
    name followed by the property: value pair that is defined for the specific selector.
    Syntax:
     selector { Property: value; }
     For instance, we have declared a heading tag(h1) along with having assigned
    some property: value pair that is used to style the heading tag. Here, h1 is the
    selector, { color: green; font-family: sans-serif; } is a declaration block and
    it can contain one or more declarations separated by semicolons, color:
    green; is a property: value pair that is applied to the HTML element in order
    to style them.
     Declaration
    Declaration
    h1 { color: green; font-
    family: sans-serif;}
    | | | |
    |
    Selector Property Value Property
    Value
     Every declaration has a CSS property name and a value, separated by
    a colon(:) and is surrounded by curly braces({ }). For declaring the multiple
    CSS properties, it can be separated by the semicolon(:).

    HTML document
    <!DOCTYPE html>
    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <main>
    <h1>HTML Page</h1>
    <p>This is a basic web page.</p>
    </main>
    </body>
    </html>
    USING CSS:

    <!DOCTYPE html>
    <html>

    <head>
    <title>Example</title>
    <style>
    main {
    width: 600px;
    height: 200px;
    padding: 10px;
    background: beige;
    }

    h1 {
    color: olivedrab;
    border-bottom: 1px dotted darkgreen;
    }

    p {
    font-family: sans-serif;
    color: orange;
    }
    </style>
    </head>

    <body>
    <main>

    <h1>My first Page</h1>


    <p>This is a basic web page.</p>
    </main>
    </body> </html>

    You might also like