0
0
HTMLmarkup~30 mins

Class attribute in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Using the Class Attribute in HTML
šŸ“– Scenario: You are creating a simple webpage for a small bakery. You want to style different parts of the page by grouping elements using the class attribute.
šŸŽÆ Goal: Build a basic HTML page with a header, a paragraph, and a footer. Assign the class attribute to these elements to identify their roles for styling.
šŸ“‹ What You'll Learn
Create a <header> element with the class site-header
Create a <p> paragraph element with the class intro-text
Create a <footer> element with the class site-footer
Use semantic HTML5 elements
Include the lang attribute in the <html> tag
šŸ’” Why This Matters
šŸŒ Real World
Using class attributes is essential for styling groups of elements consistently on websites.
šŸ’¼ Career
Web developers use classes daily to apply CSS styles and JavaScript behaviors to HTML elements.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML skeleton with <!DOCTYPE html>, <html lang="en">, <head> with a <title> 'Bakery Website', and an empty <body>.
HTML
Need a hint?

Start with the standard HTML5 document structure. Don't forget the lang="en" attribute in the <html> tag.

2
Add semantic elements with class attributes
Inside the <body>, add a <header> element with the class site-header, a <p> paragraph with the class intro-text, and a <footer> element with the class site-footer.
HTML
Need a hint?

Use the class attribute inside the opening tags of <header>, <p>, and <footer>.

3
Add text content inside the elements
Add the text 'Welcome to our bakery!' inside the <header>, 'Fresh bread and pastries every day.' inside the <p>, and 'Ā© 2024 Bakery Inc.' inside the <footer>.
HTML
Need a hint?

Place the text between the opening and closing tags of each element.

4
Add a CSS style block targeting the classes
Inside the <head>, add a <style> block that sets the background color of .site-header to lightyellow, the font style of .intro-text to italic, and the text color of .site-footer to gray.
HTML
Need a hint?

Use CSS selectors with a dot (.) before the class name to style elements by their class.