Scribd Logo
Upload

Welcome to Scribd!

  • CSS Notes Infinity1

    Uploaded by

    infinity.cok
    5 views5 pages

    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

    Copyright:

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

    CSS Notes Infinity1

    Uploaded by

    infinity.cok

    Copyright:

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

    Styling HTML with CSS

    CSS stands for Cascading Style Sheets and it describes, how HTML elements are to be displayed on
    screen or in other media, it saves lot of work and time as well as we can control the layout of multiple
    web pages all at once.

    CSS can be done in 3 ways

     INLINE  by using the style attribute in HTML tags.


     INTERNAL  by using a <STYLE> element in the <HEAD> section
     EXTERNAL  by writing in external file and we can import it.

    Example of Inline CSS


    <H1 style =”color:red;”> This Heading is Red in color</H1>

    Example of Internal CSS


    <HTML>
    <HEAD>
    <STYLE>
    body { background‐color: yellow;}
    h1 {color:red;}
    p{color:red;}
    </STYLE>
    </HEAD>
    <body>
    <h1>INFINITY COMPUTERS</H1>
    <p>Welcome to Infinity Computers </p>
    </body>
    </HTML>

    Example of External CSS


    <HTML>
    <HEAD>
    <link rel=”stylesheet” href=”mystyle.css”>
    </HEAD>
    <body>
    <h1>INFINITY COMPUTERS</H1>
    <p>Welcome to Infinity Computers </p>
    </body>
    </HTML>

    Coding in mystyle.css

    body {
    background‐color: yellow;
    }

    h1
    {
    color:red;
    font‐family:verdana;
    font‐size:300%;
    }

    P
    {
    color:red;
    font‐family:courier;
    font‐size:160%;
    }

    ID ATTRIBUTE

    To define a specific style for one element, add an ID attribute to the element.

    Example of ID attribute
    <p ID="p01">I am different</p>

    ID definition
    #p01 {
    color: blue;
    }
    Note: The id of an element should be unique within a page, so the id selector is used to select one
    unique element!

    CLASS ATTRIBUTE

    To define a style for a special type of elements, add a class attributes to the
    element:

    Example of Class attribute


    <p class="error">I am different</p>

    Class Definition
    p.error {
    color: red;
    }
    External Reference

    External style sheets can be referenced with a full URL or with a path relative to
    the current web page.
    Example of External Reference attribute
    <link rel="stylesheet" href="https://www.infinity.com/html/styles.css">

    This example links to a style sheet located in the html folder on the current web
    site:
    <link rel="stylesheet" href="/html/styles.css">

    Links

    <style>
    a:link {
    color: green;
    background‐color: transparent;
    text‐decoration: none;
    }

    a:visited {
    color: pink;
    background‐color: transparent;
    text‐decoration: none;
    }

    a:hover {
    color: red;
    background‐color: transparent;
    text‐decoration: underline;
    }

    a:active {
    color: yellow;
    background‐color: transparent;
    text‐decoration: underline;
    }
    </style>

    Links Attributes
    The target attribute specifies where to open the linked document.

    The target attribute can have one of the following values:

     _blank - Opens the linked document in a new window or tab


     _self - Opens the linked document in the same window/tab as it was
    clicked (this is default)
     _parent - Opens the linked document in the parent frame
     _top - Opens the linked document in the full body of the window
     framename - Opens the linked document in a named frame

    Eg 1:
    <a href="https://www.infinity.com/" target="_blank">Visit Infinity Computers</a>
    <a href="https://www.infinity.com/html/" target="_top">HTML5 tutorial!</a>

    Eg 2:
    <a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
    </a>

    Book Mark
    <h2 id="C4">Chapter 4</h2>

    <a href="#C4">Jump to Chapter 4</a>


    (or)
    <a href="html_demo.html#C4">Jump to Chapter 4</a>

    Images
    HTML LAYOUT STYLES

    Web pages displayed as multi columns using HTML5 and its syntax as:

    HEADER
    NAV
    SECTION
    ASIDE
    ARTICLE
    FOOTER

     <header> - Defines a header for a document or a section


     <nav> - Defines a container for navigation links
     <section> - Defines a section in a document
     <article> - Defines an independent self-contained article
     <aside> - Defines content aside from the content (like a sidebar)
     <footer> - Defines a footer for a document or a section
     <details> - Defines additional details
     <summary> - Defines a heading for the <details> element

    You might also like