Scribd Logo
Upload

Welcome to Scribd!

  • 28 views

    Unit - 4

    Uploaded by

    Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
    The document discusses different types of CSS stylesheets including inline, internal, and external stylesheets. Inline styles apply directly to elements, internal styles are defined within the <style> tag in the <head>, and external styles are linked via a separate .css file. The document provides examples of how to write and apply styles for colors, fonts, sizes, borders, and padding in each of the three stylesheet types.

    Copyright:

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

    Unit - 4

    Uploaded by

    Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
    28 views9 pages
    The document discusses different types of CSS stylesheets including inline, internal, and external stylesheets. Inline styles apply directly to elements, internal styles are defined within the <style> tag in the <head>, and external styles are linked via a separate .css file. The document provides examples of how to write and apply styles for colors, fonts, sizes, borders, and padding in each of the three stylesheet types.

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses different types of CSS stylesheets including inline, internal, and external stylesheets. Inline styles apply directly to elements, internal styles are defined within the <style> tag in the <head>, and external styles are linked via a separate .css file. The document provides examples of how to write and apply styles for colors, fonts, sizes, borders, and padding in each of the three stylesheet types.

    Copyright:

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

    Unit - 4

    Uploaded by

    Dr. (Mrs.) P. Persis Glory (Asst. Prof. )
    The document discusses different types of CSS stylesheets including inline, internal, and external stylesheets. Inline styles apply directly to elements, internal styles are defined within the <style> tag in the <head>, and external styles are linked via a separate .css file. The document provides examples of how to write and apply styles for colors, fonts, sizes, borders, and padding in each of the three stylesheet types.

    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 9

    Unit - 4

    Types of style sheets:

    Defining styles - elements of styles - linking the style sheet - in-line style
    External style sheets - internal style sheets and inline style sheet.
    CSS
    CSS stands for Cascading Style Sheets.
    CSS saves a lot of work. It can control the layout of multiple
    web pages all at once.
    Cascading Style Sheets (CSS) is used to format the layout of a
    webpage.
    With CSS, we 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!
    Using CSS
    CSS can be added to HTML documents in 3 ways:

    •Inline - by using the style attribute inside HTML elements


    •Internal - by using a <style> element in the <head> section
    •External - by using a <link> element to link to an external CSS file

    •Inline — apply CSS rules for specific elements.


    •Internal or embedded — add <style> tag in the <head> section of HTML
    document
    •External — link the HTML sheet to a separate .css file
    Inline CSS
    An inline CSS is used to apply a unique style to a single HTML element.

    An inline CSS uses the style attribute of an HTML element.

    The following example sets the text color of the <h1> element to blue, and the text
    color of the <p> element to red:

    <h1 style="color:blue;">A Blue Heading</h1> A Blue Heading

    <p style="color:red;">A red paragraph.</p>


    A red paragraph.
    <!DOCTYPE html>
    Internal CSS <html>
    <head>
    An internal CSS is used to define a <style>
    style for a single HTML page. body {background-color: powderblue;}
    h1 {color: blue;}
    An internal CSS is defined in p {color: red;}
    the <head> section of an HTML page, </style>
    within a <style> element. </head>
    <body>
    The following example sets the text
    color of ALL the <h1> elements (on <h1>This is a heading</h1>
    that page) to blue, and the text color <p>This is a paragraph.</p>
    of ALL the <p> elements to red. In
    addition, the page will be displayed </body>
    with a "powderblue" background </html>
    color: This is a heading
    This is a paragraph.
    External CSS
    An external style sheet is used to define the style for many HTML pages. With an external style
    sheet, you can change the look of an entire web site, by changing one file!
    To use an external style sheet, add a link to it in the <head> section of each HTML page:

    <!DOCTYPE html> The external style sheet can be written in


    <html> any text editor. The file must not contain
    <head> any HTML code, and must be saved with
    <link rel="stylesheet" href="styles.css" a .css extension.
    >
    Here is what the "styles.css" file looks
    </head> like:
    <body> body {
    background-color: powderblue;
    }
    <h1>This is a heading</h1>
    h1 {
    <p>This is a paragraph.</p> color: blue;
    }
    </body> p {
    </html> This is a heading color: red;
    This is a paragraph. }
    <!DOCTYPE html>
    <html>
    <head>
    CSS Colors, Fonts and Sizes <style>
    h1 {
    color: blue;
    The CSS color property defines the font-family: verdana;
    text color to be used. font-size: 300%;
    }
    The CSS font-family property p {
    color: red;
    defines the font to be used.
    font-family: courier;
    font-size: 160%;
    The CSS font-size property }
    defines the text size to be used. </style>
    </head>
    This is a heading <body>

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


    <p>This is a paragraph.</p>
    </body>
    </html>
    <!DOCTYPE html>

    CSS Border
    <html>
    <head>
    The CSS border property defines a border around an HTML <style>
    element. p{
    border: 2px solid powderblue;
    We can define a border for nearly all HTML elements.
    }
    </style>
    </head>
    p { <body>
    border: 2px solid powderblue;
    } <h1>This is a heading</h1>

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

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    CSS Padding <head>
    <style>
    The CSS padding property defines a padding p{
    (space) between the text and the border. border: 2px solid powderblue;
    padding: 30px;
    }
    p {
    </style>
    border: 2px solid powderblue;
    </head>
    padding: 30px;
    <body>
    }
    <h1>This is a heading</h1>

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

    </body>
    </html>

    You might also like