Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheet

    Uploaded by

    Fizzler GamingOP
    6 views20 pages
    Cascading Style Sheets (CSS) is used to format and style web pages. CSS allows control over text colors, fonts, sizes, spacing, positioning of elements, backgrounds, different displays for devices, and more. There are three types of CSS: inline CSS for single elements, internal CSS in the <style> section for a single page, and external CSS in a .css file to style entire sites. External CSS provides advantages like maintaining styles in one file across many pages, while disadvantages include increased download time.

    Original Description:

    Original Title

    CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Cascading Style Sheets (CSS) is used to format and style web pages. CSS allows control over text colors, fonts, sizes, spacing, positioning of elements, backgrounds, different displays for devices, and more. There are three types of CSS: inline CSS for single elements, internal CSS in the <style> section for a single page, and external CSS in a .css file to style entire sites. External CSS provides advantages like maintaining styles in one file across many pages, while disadvantages include increased download time.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    6 views20 pages

    Cascading Style Sheet

    Uploaded by

    Fizzler GamingOP
    Cascading Style Sheets (CSS) is used to format and style web pages. CSS allows control over text colors, fonts, sizes, spacing, positioning of elements, backgrounds, different displays for devices, and more. There are three types of CSS: inline CSS for single elements, internal CSS in the <style> section for a single page, and external CSS in a .css file to style entire sites. External CSS provides advantages like maintaining styles in one file across many pages, while disadvantages include increased download time.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 20

    CSS

    (CASCADING STYLE SHEET)


    CONTENTS
    ➢ INTRODUCTION TO CSS
    ➢ ADVANTAGES AND DISADVANTAGES OF CSS
    ➢ TYPES OF CSS
    ✓ INLINE
    ✓ INTERNAL
    ✓ EXTERNAL
    ➢ APPLICATIONS OF CSS
    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.
    Cascading Style Sheets is a style sheet language used for describing the presentation of a
    document written in a markup language such as HTML. CSS is a cornerstone technology of the
    World Wide Web, alongside HTML and JavaScript.
    Cascading Style Sheets (CSS) is used to format the layout of a
    webpage.
    With CSS, you can control the color, font, the size of text, the
    spacing between elements, how elements are positioned and
    laid out, what background images or background colors are to
    be used, different displays for different devices and screen sizes,
    and much more!
     Tip: The word cascading means that a style applied to a
    parent element will also apply to all children elements within
    the parent. So, if you set the color of the body text to "blue",
    all headings, paragraphs, and other text elements within the
    body will also get the same color (unless you specify
    something else)!
    TYPES OF CSS

    The most common way to add CSS, is to keep the styles in external CSS files.
    INLINE CSS
    An inline style may be used to apply a unique style for a single element.
    To use inline styles, add the style attribute to the relevant element. The
    style attribute can contain any CSS property.
     Example
    Inline styles are defined within the "style" attribute of the relevant
    element:

    <html>
    <body>

    <h1 style="color:blue;text-align:center;">This is a heading</h1>


    <p style="color:red;">This is a paragraph.</p>

    </body>
    </html>
    SOURCE CODE OUTPUT
    ADVANTAGES OF INLINE CSS
    DISADVANTAGES OF INLINE CSS
    ▪ They make a document difficult to maintain and
    increase the download time. Inline styles must be
    applied to every element on which you want to apply a
    style. Therefore, if you want all your headings to have
    the font family Arial, you have to add an inline style to
    each heading element in your document.
    • Adding CSS rules to every HTML element is time-consuming
    and makes your HTML structure messy.
    • Styling multiple elements can affect your page's size and
    download time.
    INTERNAL CSS
    An internal style sheet may be used if one single HTML page has a unique style.
    The internal style is defined inside the <style> element, inside the head section.
     Example
    Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
    <html>
    <head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
    SOURCE CODE OUTPUT
    ADVANTAGES OF INTERNAL CSS
    DISADVANTAGES OF INTERNAL CSS

     They affect only the page in which they are applied. If


    you want to use the same styles in several documents,
    you need to repeat them for every page..
     They increase the page load time because the entire
    CSS file needs to be implemented first to apply CSS.
    EXTERNAL CSS
    With an external style sheet, you can change the look of an entire website by changing
    just one file!
    Each HTML page must include a reference to the external style sheet file inside the
    <link> element, inside the head section.
     Example
    External styles are defined within the <link> element, inside the <head> section of an
    HTML page:

    <html>
    <head>
    <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>

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

    </body>
    </html>
    An external style sheet can be written in any text editor, and must be
    saved with a .css extension.
    The external .css file should not contain any HTML tags.
    Here is how the "mystyle.css" file looks like:
     "mystyle.css"
    body {
    background-color: lightblue;
    }

    h1 {
    color: navy;
    margin-left: 20px;
    }

    Note: Do not add a space between the property value and the unit
    (such as margin-left: 20 px;). The correct way is: margin-left: 20px;
    SOURCE CODE OUTPUT
    ADVANTAGES OF EXTERNAL CSS

    ▪ Thus, they allow you to control the look and feel of several
    documents in one go and do not need to define aa specific style
    for every element.
    ▪ They allow you to easily group your styles in a more efficient way.
    DISADVANTAGES OF EXTERNAL CSS

     They increase the download time as the entire CSS file


    has to be downloaded to apply the styles to the HTML
    document. When the styles are less in number, applying
    an external style can make the document complicated.
     They display the Web page only after the entire style
    sheet is loaded.
    APPLICATIONS OF CSS
    • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages.
    You can define a style for each HTML element and apply it to as many Web pages as you want.
    • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time.
    Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
    faster download times.
    • Easy maintenance - To make a global change, simply change the style, and all elements in all the
    web pages will be updated automatically.
    • 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.
    • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type
    of device. By using the same HTML document, different versions of a website can be presented for
    handheld devices such as PDAs and cell phones or for printing.
    • Global web standards - Now HTML attributes are being deprecated and it is being recommended
    to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible
    to future browsers.

    You might also like