Scribd Logo
Upload

Welcome to Scribd!

  • CSS

    Uploaded by

    Harish S
    22 views6 pages

    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
    22 views6 pages

    CSS

    Uploaded by

    Harish S

    Copyright:

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

    1. What is CSS?

    • CSS stands for Cascading Style Sheets


    • CSS describes how HTML elements are to be displayed on screen.
    • CSS saves a lot of work.

    2. 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.

    3. Give the Syntax for CSS Style Rule:

    • A CSS rule-set consists of a selector and a declaration block.

    Selector
    {
    Property : value;
    }

    Where as,
    Selector - is a valid HTML Elements
    Property - is a attributes of the elements
    Value - is a value of the attributes

    Example:

    4. List and Explain in details the various selector Strings.


     CSS selectors are used to “select” the HTML elements you want to style.

     Simple Selector
     Universal Selector
     Class Selector
     Generic Selector
     Id Selector
     Grouping Selector

    Simple Selector:
     The selector selects HTML elements based on the element name.
    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    h1
    {
    text-align: center;
    color: red;
    }
    h2
    {
    text-align: center;
    color: blue;
    }
    p
    {
    text-align: center;
    color: green;
    }
    </style>
    </head>

    <body>
    <h1>Welcome</h1>
    <h2>to </h2>
    <p>Internet Programming </p>
    </body>
    </html>

    Universal Selector:
     This selector is denoted by *
     Using universal selector, we can be applied style to all the elements in the
    document.
    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    *{
    text-align: center;
    color: red;
    }
    </style>
    </head>

    <body>
    <h1>Welcome</h1>
    <h2>to </h2>
    <p>Internet Programming </p>
    </body>
    </html>
    Id Selector:
     Using id selector, style can be applied to one specific element.
     This selector is denoted by #

    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    #para1
    {
    text-align: center;
    color: red;
    }
    </style>
    </head>

    <body>
    <h1 id=”para1”>Welcome</h1>
    <h2>to </h2>
    <p id=”para1”>>Internet Programming </p>
    </body>
    </html>

    Class Selector:
     Using class selector, we can assign different styles to the same element.
    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    h1.Redtext
    {
    text-align: center;
    color: red;
    }
    h1.Bluetext
    {
    text-align: center;
    color: blue;
    }
    </style>
    </head>
    <body>
    <h1 class=”Redtext”>Welcome</h1>
    <h2>to </h2>
    <h1 class=”Bluetext”>>Internet Programming </h1>
    </body>
    </html>

    Generic Selector:
     Using Generic selector, we can assign particular style to more than one HTML
    elements.
    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    .Redtext
    {
    text-align: center;
    color: red;
    }
    </style>
    </head>

    <body>
    <h1 class=”Redtext”>Welcome</h1>
    <h2>to </h2>
    <p class=”Redtext”>>Internet Programming </p>
    </body>
    </html>
    5. What are the different types of style sheet? Explain.
    There are three ways of inserting a style sheet:
     Internal CSS or Embedded CSS
     External CSS
     Inline CSS

    1. 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.

    <!DOCTYPE html>
    <html>
    <head>
    <style type=”text/css”>
    h1
    {
    text-align: center;
    color: red;
    }
    h2
    {
    text-align: center;
    color: blue;
    }
    p
    {
    text-align: center;
    color: green;
    }
    </style>
    </head>

    <body>
    <h1>Welcome</h1>
    <h2>to </h2>
    <p>Internet Programming </p>
    </body>
    </html>

    2. External CSS:
     An external style sheet may be used to give style to entire HTML pages.
    Step 1: create mystyle.css file (separate text file with .css extension)
    h1
    {
    text-align: center;
    color: red;
    }
    h2
    {
    text-align: center;
    color: blue;
    }
    p
    {
    text-align: center;
    color: green;
    }
     Step 2: The <link> element can be used to include an external stylesheet file in
    your HTML document.

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"href="mystyle.css">
    </head>

    <body>
    <h1>Welcome</h1>
    <h2>to </h2>
    <p>Internet Programming </p>
    </body>
    </html>

    3. Inline CSS:
     You can use style attribute of any HTML element to define style rules.
     These rules will be applied to that element only.
    <!DOCTYPE html>
    <html>
    <head>
    </head>

    <body>
    <h1 style=”text-align: center; color:red”>Welcome</h1>
    <h2 style=”text-align: center; color:blue”>>to </h2>
    <p style=”text-align: center; color:green”>Internet Programming </p>
    </body>
    </html>
    ------------------------------------------------------------------------------------------------r

    You might also like