Scribd Logo
Upload

Welcome to Scribd!

  • 33 views

    Unit 3:cascading Style Sheets 3: Screen, Paper, or in Other Media

    Uploaded by

    maggunasekaran
    This document discusses Cascading Style Sheets (CSS), which is used to style and lay out web pages. CSS allows formatting of HTML elements to be controlled and changed quickly. There are three types of CSS: inline CSS styles individual elements, internal CSS styles within <style> tags, and external CSS in separate files to style entire sites uniformly. CSS uses selectors to point to elements and declarations with properties and values to define styles.

    Copyright:

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

    Unit 3:cascading Style Sheets 3: Screen, Paper, or in Other Media

    Uploaded by

    maggunasekaran
    33 views7 pages
    This document discusses Cascading Style Sheets (CSS), which is used to style and lay out web pages. CSS allows formatting of HTML elements to be controlled and changed quickly. There are three types of CSS: inline CSS styles individual elements, internal CSS styles within <style> tags, and external CSS in separate files to style entire sites uniformly. CSS uses selectors to point to elements and declarations with properties and values to define styles.

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses Cascading Style Sheets (CSS), which is used to style and lay out web pages. CSS allows formatting of HTML elements to be controlled and changed quickly. There are three types of CSS: inline CSS styles individual elements, internal CSS styles within <style> tags, and external CSS in separate files to style entire sites uniformly. CSS uses selectors to point to elements and declarations with properties and values to define styles.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    33 views7 pages

    Unit 3:cascading Style Sheets 3: Screen, Paper, or in Other Media

    Uploaded by

    maggunasekaran
    This document discusses Cascading Style Sheets (CSS), which is used to style and lay out web pages. CSS allows formatting of HTML elements to be controlled and changed quickly. There are three types of CSS: inline CSS styles individual elements, internal CSS styles within <style> tags, and external CSS in separate files to style entire sites uniformly. CSS uses selectors to point to elements and declarations with properties and values to define styles.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    of 7

    UNIT 3:CASCADING STYLE SHEETS 3

    CSS is the language we use to style a Web page.

    What is CSS?
     CSS stands for Cascading Style Sheets
     CSS describes how HTML elements are to be displayed on
    screen, paper, or in other media

     CSS saves a lot of work. It can control the layout of multiple web
    pages all at once

     External style sheets are stored in CSS files

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: lightblue;
    }
    h1 {
    color: white;
    text-align: center;
    }
    p{
    font-family: verdana;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <h1>My First CSS Example</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>

    Why Use CSS?

    CSS is used to define styles for your web pages, including the
    design, layout and variations in display for different devices and
    screen sizes.

    CSS Syntax

    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.

    Multiple CSS declarations are separated with semicolons, and


    declaration blocks are surrounded by curly braces.
    Example
    In this example all <p> elements will be center-aligned, with a red text color:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    color: red;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <p>Hello World!</p>
    <p>These paragraphs are styled with CSS.</p>
    </body>
    </html>
    Example Explained
     p is a selector in CSS (it points to the HTML element you want to
    style: <p>).
     color is a property, and red is the property value
     text-align is a property, and center is the property value

    What are the different types of CSS?


    There are three types of CSS:

    Inline CSS
    Inline CSS is generally used to style a specific HTML element only.
    We can write inline CSS simply by adding the style attribute to each
    HTML element.
    This CSS type is not really recommended, as each HTML tag
    needs to be styled individually. Managing a website may be difficult if
    we use only inline CSS.
    <!DOCTYPE html>
    <html>
    <body>
    <h1 style="color:red">Simple Box Design
    </h1>
    <div style="height:200px;width:300px;background-color:yellow">
    </div>
    </body>
    </html>

    Internal CSS
    Internal CSS is also known as embedded CSS. It is generally used to
    style a single page. We can write internal CSS inside a <style> tag
    within the HTML pages.
    This CSS type is an effective method of styling a single page.
    However, using this style for multiple pages is time-consuming as you
    need to put CSS style on every page of your website.
    In HTML, for an element, the ID name starts with the "#" symbol
    followed by a unique name assigned to it. "class" assigned to an
    element has its name starts with "." followed by class name. Only one ID
    selector can be attached to an element.
    <!DOCTYPE html>
    <html>
    <head>
    <style>h1{
    background-color:orange
    }
    .box{
    height:200px;
    width:300px;
    background-color:#ff0}
    #circle{
    height:200px;
    width:200px;
    background-color:red;
    border-radius:50%}
    </style>
    </head>
    <body>
    <h1>Simple example of internal CSS
    </h1>
    <div class="box">
    </div>
    <div id="circle">
    </div>
    </body>
    </html>

    You might also like