Formatting in context

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; }