Practice Problems

Create a new HTML file for each problem, and use CSS either inline, internal, or external as instructed.

File Name: problem2.html
Create at least two paragraphs: one with a class called “highlight” and one with an ID called “special”.
In an internal or external stylesheet, make “highlight” paragraphs have a yellow background, and the “special” paragraph text bold and red.
Add a third paragraph with both class and ID. Confirm which styles override if any conflicts exist.

File Name: problem3.html, plus a CSS file named style.css.
Link style.css in the <head> using <link rel="stylesheet" href="style.css">.
Style headings, paragraphs, and a custom class (like .infoBox) to confirm external styles are working.
Add one inline style rule on an element and observe how it overrides the external stylesheet.

After completing these exercises, call Mike over for feedback on your newly created HTML documents and CSS files.

Advance Problems

File Name: problem4.html

Instructions:

HTML Structure:
- Create a standard HTML document.
- In the <body>, add a <header> element that contains a <nav> section.
- Inside <nav>, create an unordered list (<ul>) with at least four list items (<li>), each containing an <a> tag for navigation (e.g., Home, About, Services, Contact).
CSS Styling Requirements:
- Internal Styles:
- Within a <style> tag in the <head>, add rules to:
  - Remove default list styling and display the list items horizontally.
  - Style the links with a base color (e.g., dark blue) and remove text decoration.
  - On hover (using the :hover pseudo-class), change the link color to a contrasting color.
- ID and Class Selectors:
  - Assign an id to one of the <a> elements (e.g., id="specialLink") and create a rule that changes its color or font style.
  - Assign a class (e.g., class="nav-item") to all <li> elements and style them with padding or margins.
- Inline Style:
  - Add an inline style on one of the <a> tags (for example, setting font-weight: bold;) to see how inline styles override the internal stylesheet.
Objective:
Build a navigation bar that demonstrates the use of element, class, and ID selectors—as well as inline styles—and understand how CSS specificity determines which styles are applied.

Files:

Instructions:

HTML Structure:
- Create a standard HTML document and link to style.css in the <head> using the <link rel="stylesheet" href="style.css"> tag.
- In the <body>, create a container <div> with a class of "card".
- Inside the card, include:
  - An <img> element to display a product image (use a placeholder image URL or file).
  - An <h2> element for the product title.
  - A <p> element for a brief product description.
  - A <span> element for the product price.
CSS Styling Requirements (in style.css):
- External Styles:
  - Style the .card class to add a border, some padding, and a shadow effect.
  - Style the <h2>, <p>, and <span> elements within .card to create a visually appealing layout (e.g., set font sizes, margins, and colors).
- Inline Override:
  - In your HTML, add an inline style to the <span> element (for example, style="color: red;") that overrides the color defined in the external stylesheet. Observe how inline styles take precedence.
Objective:
Create a product card that demonstrates how to separate styling into an external stylesheet while understanding how inline styles override external rules due to higher specificity.

File Name: problem6.html

Instructions:

HTML Structure:
- Set up a standard HTML document.
- In the <body>, create a <div> container with a class of "container".
- Inside this container, add several nested elements:
  - Multiple <p> paragraphs (at least 4) with some placeholder text.
  - At least one <a> tag inside a paragraph.
  - An unordered list (<ul>) with several list items (<li>). Add a class (e.g., "list-item") to each <li>.
CSS Styling Requirements (Internal or External Styles):
- Descendant Selectors:
  - Write a rule that targets <a> elements only when they are inside a paragraph within the container (e.g., .container p a { ... }). Style these links with a unique color.
- Child Combinators:
  - Use a child combinator to style only the direct <li> children of the <ul> (e.g., .container > ul > li { ... }). Add padding or a background color.
- Attribute Selectors and Pseudo-classes:
  - Use the :nth-child() pseudo-class to style every second <li> differently (e.g., alternate background colors).
- Inline Style Check:
  - For one of the <p> elements, add an inline style (e.g., style="font-size: 20px;") and see how it overrides or interacts with your defined styles.
Objective:
Develop a webpage that utilizes various types of CSS selectors—including descendant, child combinator, attribute selectors, and pseudo-classes—to reinforce your understanding of CSS specificity and rule targeting.

Day 1: CSS Syntax, Selectors, and Specificity