1 / 14

Formatting in context

Formatting in context. 23 January 2014. Announcements. For the first 2 weeks, “0”-amnesty t hen lates New required footer structure: <footer>Created by names on date </footer> and nothing else TA names on Lab name Recommend you keep copies of jointly submitted labs.

bernie
Télécharger la présentation

Formatting in context

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. Formatting in context 23 January 2014

  2. Announcements • For the first 2 weeks, • “0”-amnesty • then lates • New required footer structure: <footer>Created by names on date</footer> and nothing else • TA names on Lab name • Recommend you keep copies of jointly submitted labs

  3. Problems? • Ask any TA or prof for advise • For grading issues, the grading TA or prof • Posting a “my HTML doesn’t validate” on Piazza is not useful • Send one of us the link • Private emails give us your name • Easier for us is a link!

  4. Follow Ups • Measurements • pt refers to printer’s font measurement • px refers to pixels • example • em is a relative measure

  5. Selective formatting

  6. Formatting by section • Paragraph in each section may want to look different • Smaller in header or footer • Lists • No bullets • In a line • Different spacing

  7. Selecting one of several definitions for the same tag • Name the context in the css by using a space • Sample (html, css) header p { text-align: center; } footer p { text-align: right; }

  8. Classes: selective formatting

  9. Multiple Styles: Classes • HTML: class=“name” • Use names to imply content • Multiple ways to define • Style that applies to only one element • Style that applies to many elements • Style that only applies in certain contexts

  10. Selecting one of several definitions for the same tag • Name the declaration set for a specific selector (tag) • HTML: class=“name” • CSS: tag.name div.intro{ text-align: center; } <div class=“intro”> </div>

  11. Classes for many elements • HTML: class=“name” • CSS: .name • Particularly useful for maintaining consistency .intro{ text-align: center; color: red; } <h1 class=“intro”>Header 1</h1> <h2 class=“intro”>Header 2</h2>

  12. Lists

  13. Nested Selector • Only applies within context • Avoids putting class= everywhere! • Useful for formatting lists • HTML: class=“name” only for encompassing • CSS: tag.name tag

  14. List Example ul.horizontal { list-style-type: none; } ul.horizontalli { display: inline; }

More Related