Unit 3, Lesson 3

1. Unit 3, Lesson 3 Typography

2. Typography • art and technique of arranging type on a page. • font family, style, size, and weight (or thickness)

3. Serif Vs. Sans Serif • Serif • small lines or strokes that extend from the ends of characters. • look like small feet, caps, tails, flags or dots. • been used for centuries in printed books, magazines and newspapers. • Sans-serif • Do not have serifs ("sans" is French for "without"). • These fonts are simple and straightforward. • When choosing a font • Choose one that is not too cluttered • Flows gracefully from letter to letter • Not too much space between letters • Page titles, headings and sub-headings • a serif font is sometimes a better choice • because they can be perceived as more stately and grand, which helps to contribute to how readers perceive the hierarchy of the page. • What about cursive, fantasy, and monospace?

4. Selecting A Font • When choosing a font • Choose one that is not too cluttered • Flows gracefully from letter to letter • Not too much space between letters • Page titles, headings and sub-headings • a serif font is sometimes a better choice • because they can be perceived as more stately and grand, which helps to contribute to how readers perceive the hierarchy of the page. • What about cursive, fantasy, and monospace?

5. Unit 3, Module 5, Lesson 1 ID • elements on your web page can be assigned a unique id attribute. • can be any text you like, but it has to be unique (only one item can have this label). • assign labels that describe the function of the element. • For example, a <ul> that's used to markup a navigation menu might have id="navigation" or id="menu"

6. When to assign id? • You want to stylize that element differently than other elements of the same type. • You want to be able to link to a particular element within a web page. • You already added id="main" to one of the div elements on your portfolio page when you created a "skip to main content" link in the lesson on Special Types of Links. • You want to be able to directly access that element using Javascript. You'll learn more about that in the module on Javascript.

7. What is class? • You are creating several movie reviews, in addition to other content. The entire content of each review (a heading with the movie title, plus several paragraphs) is wrapped in a <div> in order to keep it all together in one box. • You may want to stylize the <div> elements that contain each review differently than other <div> elements on the page, so reviews all have a distinct look, but consistent with one another. • You could accomplish this by assigning class="review" to each individual review. • You could accomplish this by assigning class="summary" to each summary paragraph.

8. Example Code • <div class="review"> • <h2>The Godfather</h2> • <p class="summary">The Godfather (1972) is the greatest movie of all time, • according to numerous surveys of movie critics and audiences alike.</p> • <p>The Godfather is... (your review here)</p> • </div> • <div class="review"> • <h2>Avatar</h2> • <p class="summary">Avatar (2009) is the highest grossing film of all time, • earning approximately $2.8 billion.</p> • <p>Avatar is... (your review here)</p> • </div>

9. Descendant Selectors • A descendant is an element that is nested inside another element. • In addition to assigning styles to a class of elements, you can also assign styles to descendants of those elements. • a { • color: red; • text-decoration: underline; • }

10. If you want different style for links that are part of your navigation menu.. • Example-white text on a dark blue background, with no underline. Assuming these links are contained within a <ul> with id="navigation", you could stylize those using descendant selectors in CSS, like so:

11. ul#navigation a { • color: white; • background-color: #003399; /* dark blue */ • text-decoration: none; • }

12. What is ID & Class? • The id selector • used to specify a style for a single, unique element • uses the id attribute of the HTML element • is defined with a "#” • The style rule below will be applied to the element with id="para1": #para1 { text-align:center; color:red; }

13. What is Class? • used to specify a style for a group of elements. • Unlike the id selector, the class selector is most often used on several elements. • can set a particular style for many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a "." • In the example below, all HTML elements with class="center" will be center-aligned: .center {text-align:center;}

14. Do you have the following? • Module 5, Lesson 1 asked to check the following: • The first div is a container for the skip to main content link. <div id=“skipnav”> • The second div is a container for your contact information. <div class=“info”> • The third div is a container for information about your course and school. • <div class=“info”>

15. Do you have the following? • The fourth div is a container for the navigation menu <div id=“navigation”> • The fifth div is a container for the main content of the page. It already has an id attribute from a previous lesson. • <div id=“main”>

16. Unit 3, Mod 5, Lesson 2 • Control the width of the #skipnav div so that it's no wider than the content it contains (about 10em) • Control the width of the .info class of div's so that both div's in this class have width:40%. • Increase the font-size of the .info class so its text is larger and more prominent than other text on the page.

17. Continued… • Change the style of the #overview paragraph so that it stands out, as an overview should. • Change the style of the .temp class of paragraphs so that they are italicized (font-style:italic), but no other paragraphs on the page are.

18. Practice in your Style Sheet • Change the color and background-color of the main div so it's different from the other divs. • Make sure content inside this div have very good contrast between color and background-color. • Add other styles as you see fit to each of these divs until you're satisfied with their appearance. Especially try using some of the styles that you learned in recent lessons about typography and the box model.