Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    CSS, Cont.: October 7, Unit 4

    Uploaded by

    Manh Hoang Van
    This document discusses the use of generic containers <span> and <div> in CSS. <span> is used to group inline elements, while <div> is used to group block elements. Both tags allow the grouping of other tags and application of CSS styles. Common uses include applying inline styles to text with <span> and creating navigation menus and page sections with <div>. The document provides examples of using these tags and recommends only using them when no other semantic HTML tag is appropriate.

    Copyright:

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

    You might also like

    CSS, Cont.: October 7, Unit 4

    Uploaded by

    Manh Hoang Van
    3 views13 pages
    This document discusses the use of generic containers <span> and <div> in CSS. <span> is used to group inline elements, while <div> is used to group block elements. Both tags allow the grouping of other tags and application of CSS styles. Common uses include applying inline styles to text with <span> and creating navigation menus and page sections with <div>. The document provides examples of using these tags and recommends only using them when no other semantic HTML tag is appropriate.

    Original Description:

    Original Title

    oct7

    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
    This document discusses the use of generic containers <span> and <div> in CSS. <span> is used to group inline elements, while <div> is used to group block elements. Both tags allow the grouping of other tags and application of CSS styles. Common uses include applying inline styles to text with <span> and creating navigation menus and page sections with <div>. The document provides examples of using these tags and recommends only using them when no other semantic HTML tag is appropriate.

    Copyright:

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

    CSS, Cont.: October 7, Unit 4

    Uploaded by

    Manh Hoang Van
    This document discusses the use of generic containers <span> and <div> in CSS. <span> is used to group inline elements, while <div> is used to group block elements. Both tags allow the grouping of other tags and application of CSS styles. Common uses include applying inline styles to text with <span> and creating navigation menus and page sections with <div>. The document provides examples of using these tags and recommends only using them when no other semantic HTML tag is appropriate.

    Copyright:

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

    CSS, 

    cont.

    October 7, Unit 4
    Generic Containers
    • Currently, we know how to modify the 
    properties of HTML tags using style sheets
    • But, we can only modify the tags and what 
    they contain
    – Can’t modify a group of tags as one
    • The generic containers, <span> and 
    <div>, allow us to group tags or words
    Generic Containers, cont.
    • The generic container tags do absolutely 
    nothing, until they are modified by attributes.
    • The <span> tag in an inline tag
    – Can modify the language (lang attribute), font color, 
    font­family, font­style, etc.
    • The <div> tag is a block­level tag
    – Allows us to group paragraphs together with lists, etc.
    – Can be used to create navigation bars
    <span> Tag
    • The span tag is useful for applying 
    attributes to some text
    – ex.  I love chocolate­covered espresso beans
    CSS:
    span.chocolate {
    font­family: Times;
    color: #330;
    }
    HTML:
    I love <span class = “chocolate”> chocolate­covered 
    espresso beans</span>
    <span>, cont.
    • <span> can be contained within block­
    level and inline­level elements
    • The attributes of <span> are:
    – id : the id from the style sheet
    – class : the class from the style sheet
    – lang : language of the text
    – dir : specifies the direction of text (ltr, rtl)
    Using <span>
    • Span should not be used when there is an 
    appropriate standard html tag 
    – e.g do not use <span> to italicize text
    – Use the <i> tag
    – The <i>, <b>, <em> etc. also have attributes
    • Including <style>, <lang> etc.
    • <i style =“color: red; font­family: Courier”>
    • You do not have to specify a CSS rule to use 
    span
    I love <span style = “color: #330; font­family: Times”>
    chocolate­covered espresso beans</span>
    <span>, cont.
    • <span> should be used only to modify small 
    portions of text
    – Do not use <span> to modify all of a paragraph
    • If you do need to use span, and will need the 
    same modifications more than once or twice, 
    add a class to your style sheet
    • Also helpful to use a style sheet so that you only 
    have to modify a single file to change the way 
    the document appears
    <div> Tag
    • Probably the most common use for the 
    <div> tag is for navigation bars
    • <div> is a block­level tag (like a 
    paragraph)
    • Can contain any number of block­level 
    tags or inline tags
    – Can group paragraphs, with lists, with tables, 
    e.g.
    <div>
    • <div> tags will most often be used inside 
    the <body> tag and inside other <div> tags
    – Can be nested
    • Often <div> tags are modified using the id 
    attribute, rather than class
    – You only have one navigation bar, e.g.
    – The properties you want for a certain portion 
    of your page are unique
    Simple Navigation Menu
    CSS HTML
    div#sidebar { <div id = “sidebar”>
    float:left; <ul>
    background­color:  <li>Item1</li>
    #ccf; <li>Item2</li>
    width: 10%; <li>Item3</li>
    } </ul>
    </div>
    In Class Examples
    • Simple left­nav bar
    • Simple right­nav bar
    • Simple top nav bar
    • Combining top and side nav bars
    When to Use Generic Containers
    • Generic containers are a sort of “last resort”
    • If you can get the look you want by using a 
    regular html tag, you should
    – Can be modified using the class or id attribute and a 
    style sheet
    • You should only use generic containers when 
    there is no tag which “fits the meaning of the 
    content”
    – e.g. There is no tag for navigation bars
    Happy Thanksgiving!

    You might also like