Scribd Logo
Upload

Welcome to Scribd!

  • CSS Tutorial: Agenda

    Uploaded by

    GalihPamungkas
    7 views14 pages
    This document provides an agenda and overview for a CSS tutorial. It covers introducing CSS syntax and style specifications, using internal and external CSS style sheets, the CSS box model, and techniques for rounded corners. Examples are given for different CSS selectors and properties. The document demonstrates applying CSS styles to HTML elements.

    Original Description:

    html

    Original Title

    Pertemuan_8a

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an agenda and overview for a CSS tutorial. It covers introducing CSS syntax and style specifications, using internal and external CSS style sheets, the CSS box model, and techniques for rounded corners. Examples are given for different CSS selectors and properties. The document demonstrates applying CSS styles to HTML elements.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    7 views14 pages

    CSS Tutorial: Agenda

    Uploaded by

    GalihPamungkas
    This document provides an agenda and overview for a CSS tutorial. It covers introducing CSS syntax and style specifications, using internal and external CSS style sheets, the CSS box model, and techniques for rounded corners. Examples are given for different CSS selectors and properties. The document demonstrates applying CSS styles to HTML elements.

    Copyright:

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

    CSS Tutorial

    AGENDA

    Introduction
    Syntax
    How to use style specifications.
    Styles
    Miftahul Huda
    Speech Signal Processing Research Group
    Digital Signal Processing Laboratory
    EEPIS

    Introduction
    Applying multiple sheets to a single document

    Introduction
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <META name="description" content="">
    <META name="keywords" content="">
    <META name="generator"
    content="CuteHTML">
    </head>
    <body>
    <h1 >WARNING</h1>
    <p >Don't go there!</p>
    </body>
    </html>

    Introduction
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <META name="description" content="">
    <META name="keywords" content="">
    <META name="generator"
    content="CuteHTML">
    <style type="text/css">
    .warning {color:#ff0000}
    h1.warning {text-decoration:underline}
    p.warning {font-weight:bold}
    </style>
    </head>
    <body>
    <h1 class="warning">WARNING</h1>
    <p class="warning">Don't go there!</p>
    </body>
    </html>

    Syntax
    selector {property: value}
    Examples:
    body {color: black}
    p {font-family: "sans serif"}
    p {text-align:center;color:red}

    How to ... - External Style Sheet


    Styles are specified in an external file. This is the most
    common and useful way of using style specifications.
    relationship

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

    How to ... - Internal Style Sheet


    Styles are specified inside the header of the HTML
    document.
    <head>
    <style type="text/css">
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image: url("images/back40.gif")}
    </style>
    </head>
    ...

    How to ... - Inline styles


    A style is applied to only one occurrence of an
    element.
    <p style="color: sienna; margin-left: 20px">
    This is a paragraph
    </p>

    Use this method


    sparingly!

    Follow a demonstration

    Working with the Box Model


    The box model is an element composed
    of four sections:

    Margin
    Border
    Padding
    content

    Rounded corners in CSS

    <style type="text/css">
    .roundcont {
    width: 250px;
    background-color: #f90;
    color: #fff;
    }
    .roundcont p {
    margin: 0 10px;
    }
    .roundtop {
    background: url(tr.gif) no-repeat top right;
    }
    .roundbottom {
    background: url(br.gif) no-repeat top right;
    }
    img.corner {
    width: 15px;
    height: 15px;
    border: none;
    display: block !important;
    }
    </style>

    <body>
    <div class="roundcont">
    <div class="roundtop">
    <img src="tl.gif" alt=""
    width="15" height="15"
    class="corner"
    style="display: none" />
    </div>
    <p> Teks isi
    </p>
    <div class="roundbottom">
    <img src="bl.gif" alt=""
    width="15" height="15"
    class="corner"
    style="display: none" />
    </div>
    </div>

    </body>

    You might also like