Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML Lists and Introduction To Cascading Style Sheet (CSS)

    Caricato da

    Muhammad Nadeem Rana
    44 visualizzazioni15 pagine
    The document discusses HTML lists and an introduction to CSS. It describes the three types of HTML lists - unordered, ordered, and description lists. It provides examples of how to code these lists in HTML. It also discusses CSS properties like list-style-type, type attribute, and how to define CSS styles using selectors, declarations, and style sheets. It covers basic CSS properties like background, color, font, border, margin, padding, text-align, float, and display.

    Descrizione originale:

    Html list types and Introduction to CSS

    Titolo originale

    Lists and Intro to CSS

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    The document discusses HTML lists and an introduction to CSS. It describes the three types of HTML lists - unordered, ordered, and description lists. It provides examples of how to code these lists in HTML. It also discusses CSS properties like list-style-type, type attribute, and how to define CSS styles using selectors, declarations, and style sheets. It covers basic CSS properties like background, color, font, border, margin, padding, text-align, float, and display.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    44 visualizzazioni15 pagine

    HTML Lists and Introduction To Cascading Style Sheet (CSS)

    Caricato da

    Muhammad Nadeem Rana
    The document discusses HTML lists and an introduction to CSS. It describes the three types of HTML lists - unordered, ordered, and description lists. It provides examples of how to code these lists in HTML. It also discusses CSS properties like list-style-type, type attribute, and how to define CSS styles using selectors, declarations, and style sheets. It covers basic CSS properties like background, color, font, border, margin, padding, text-align, float, and display.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    HTML Lists and

    Introduction to Cascading Style


    Sheet (CSS)
    Presented By Muhammad Nadeem Rana
    Roll No: BS-IT-15-1023
    Lists

    There are three types of HTML Lis


    Unordered List
    Ordered List
    Description List

    2
    CS 299 Web Programming and Design
    Unordered HTML List

    An unordered list starts with the <ul> tag. Each list


    item starts with the <li> tag.
    The list items will be marked with bullets (small black
    circles) by default:
    </body>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
    </body>

    3
    CS 299 Web Programming and Design
    Unordered List Item Marker

    The CSS list-style-type property is used to define the style


    of the list item marker:
    Value Description
    disc Sets the list item marker to a bullet
    (default)
    circle Sets the list item marker to a circle
    square Sets the list item marker to a
    square
    none The list items will not be marked
    Example
    <ul style="list-style-type:disc">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
    4
    CS 299 Web Programming and Design
    Ordered HTML List

    An ordered list starts with the <ol> tag. Each list item
    starts with the <li> tag.
    The list items will be marked with numbers by default:
    Example
    <body>
    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    </body>

    5
    CS 299 Web Programming and Design
    Ordered HTML Type Attribute

    The type attribute of the <ol> tag, defines the type of


    the list item marker:
    Type Description
    type="1" The list items will be numbered with
    numbers (default)
    type="A" The list items will be numbered with
    uppercase letters
    type="a" The list items will be numbered with
    lowercase letters
    type="I" The list items will be numbered with
    uppercase roman numbers
    type="i" The list items will be numbered with
    lowercase roman numbers

    6
    CS 299 Web Programming and Design
    Ordered HTML Type Attribute

    Example:
    <body>
    <ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    </body>

    7
    CS 299 Web Programming and Design
    HTML Description Lists

    HTML also supports description lists.


    A description list is a list of terms, with a description of
    each term.
    The <dl> tag defines the description list, the <dt> tag
    defines the term (name), and the <dd> tag describes
    each term:
    Example
    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

    8
    CS 299 Web Programming and Design
    What is CSS?

    CSS stands for Cascading Style Sheets


    Styles define how to display HTML elements
    Styles are normally stored in Style Sheets
    External style sheets can save a lot of work
    External style sheets are stored in CSS files
    Multiple style definitions will cascade into one

    9
    CS 299 Web Programming and Design
    Multiple Ways to Define Style

    External Style Sheet (.css files)


    Internal Style Sheet
    Inline Styles

    10
    CS 299 Web Programming and Design
    CSS Style Rule

    property names
    declarations

    p{
    font-size: x-large ;

    background-color: yellow
    }
    declaration block

    selector string

    11
    CS 299 Web Programming and Design
    Selector Strings

    Type selector:
    Element type, such as body, p, hr, etc.
    See previous example
    Multiple element types using the same style are separated by
    comma
    h1, h2, h3, h4, h5, h6 {background-color:purple}

    ID selector:
    #p1, #s1 {background-color: blue}
    <p id=p1> </p>
    <span id=s1></span>
    id values are case-sensitive

    12
    CS 299 Web Programming and Design
    Selector Strings, Continue

    A selector within the content of certain element types


    ul span {color: green}: applies to a span element within a ul
    element
    ul ol li {letter-spacing: 1em}: applies to an li element within
    an ol element that is within a ul element

    CSS comments
    /* This is a comment */
    p{
    text-align: center;
    /* This is another comment */
    color: black; font-family: arial
    }

    13
    CS 299 Web Programming and Design
    How to Insert a Style Sheet?
    External style sheet
    Create a separate folder with extension.css
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

    Internal style sheet


    <head>
    <style type="text/css">
    hr {color: sienna}
    p {margin: 20px}
    </style>
    </head>
    Inline style
    <p style="color: sienna; margin: 20px"> This is a paragraph </p>
    14
    CS 299 Web Programming and Design
    CSS Basics

    Background
    Color
    Font
    Border
    Margin
    Padding
    Text-Align
    Float
    Display
    Text-decoration

    15
    CS 299 Web Programming and Design

    Potrebbero piacerti anche