Practice Problems

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

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.

Advanced 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.

CSS - Syntax, Selectors, and Specificity