Practice Problems

Create a new HTML file for each problem, using internal or external CSS for styling.

File Name: problem2.html
Create a short article with a title (<h1>), subtitle (<h2>), and at least two paragraphs.
Align the title center, the subtitle left, and the paragraphs justify.
Increase line-height and adjust letter-spacing to improve readability.

File Name: problem3.html
Use a web font that has multiple weights (e.g., 300, 400, 700).
Showcase each weight in different paragraphs or <span> elements.
Add a brief note explaining how the different weights affect the design feel or hierarchy.

File Name: problem4.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- Include a <head> section that links to a Google Font of your choice (using <link> or @import).
Content:
- In the <body>, add a prominent heading (<h1>) and several paragraphs (<p>) of placeholder text.
- Optionally include a subheading (<h2>) to further demonstrate hierarchy.
CSS Styling:
- Set a default font-family for the body using the imported Google Font with appropriate fallbacks.
- Define base styles for your headings and paragraphs (e.g., font-size, line-height, letter-spacing).
- Responsive Adjustments:
  - Use CSS media queries to adjust the font-size, line-height, or text alignment for different viewport widths.
  - For example, increase the heading size and reduce paragraph font-size on smaller screens to improve readability.
Objective:
Practice using media queries to create a responsive typography system that adjusts font sizes and spacing based on the user's device, ensuring optimal readability across screen sizes.

File Name: problem5.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- In the <head>, link to two different Google Fonts (for example, one for headings and one for body text).
Content:
- In the <body>, add at least one heading (<h1>) and multiple paragraphs (<p>) demonstrating body text.
- Include additional elements such as a <nav> or <footer> if you’d like to see the font pairing in a complete layout.
CSS Styling:
- Font-Family Assignment:
  - Apply one Google Font (with fallback options) to your headings (e.g., "Lato", sans-serif) and a different font to your paragraphs (e.g., "Merriweather", serif).
- Text Transform & Letter Spacing:
  - Use text-transform (e.g., uppercase for headings) and adjust letter-spacing to create visual contrast between different text elements.
- Fallbacks:
  - Ensure that each font-family declaration includes a generic family (e.g., serif or sans-serif) so that a backup is used if the custom font fails to load.
Objective:
Create a page that demonstrates effective font pairing and the use of fallbacks, while experimenting with text transforms and letter-spacing to establish a clear typographic hierarchy.

File Name: problem6.html

Instructions:

HTML Setup:
- Create a standard HTML document.
- Include a <head> section that imports a Google Font specifically for quotes (or use a distinctive font style).
Content:
- In the <body>, add a <blockquote> element containing a meaningful quote or placeholder text.
- Below the <blockquote>, include a <cite> element or a paragraph that serves as a caption/attribution for the quote.
CSS Styling:
- Blockquote Styling:
  - Apply a custom font-family (via a Google Font) and set font-style: italic; for the blockquote.
  - Adjust properties such as line-height, letter-spacing, and text-align (e.g., center or justify) to enhance readability.
  - Optionally, add a left border, padding, or margin to visually separate the blockquote from other content.
- Caption Styling:
  - Style the attribution text with a different font-weight (e.g., bold) or text-transform (e.g., uppercase) to differentiate it from the main quote.
- Responsive Consideration:
  - Optionally include media queries to adjust the typography and spacing for smaller screens.
Objective:
Develop a visually engaging blockquote section that leverages custom typography, text styling, and layout techniques to emphasize quoted text and its attribution.

Typography in CSS—Fonts, Weights, Styles, and Alignment