1 / 13

CSS, cont.

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

leroy
Télécharger la présentation

CSS, cont.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS, cont. October 7, Unit 4

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

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

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

  5. <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)

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

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

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

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

  10. CSS div#sidebar { float:left; background-color: #ccf; width: 10%; } HTML <div id = “sidebar”> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> </div> Simple Navigation Menu

  11. In Class Examples • Simple left-nav bar • Simple right-nav bar • Simple top nav bar • Combining top and side nav bars

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

  13. Happy Thanksgiving!

More Related