This assignment introduces you to the foundational principles of CSS—how to style web content, apply essential styling properties, and understand the powerful concept of the CSS Box Model. You’ll practice writing clean, organized CSS that brings structure and visual appeal to an HTML page.
Your goal is to create a visually styled web page using only CSS. You will apply basic styling rules to text, backgrounds, and layout elements, and demonstrate an understanding of how the CSS Box Model affects spacing and sizing on the page.
- Connecting CSS to your HTML (external stylesheet)
- Using basic CSS properties such as
color,font-size,margin,padding,border, andbackground - Structuring your layout with awareness of how the Box Model influences spacing and dimensions
- Writing clean and maintainable CSS selectors and rules
Start with a basic HTML structure and create a separate CSS file named styles.css. Link it to your HTML file. Apply various styles to headings, paragraphs, and container sections.
Use the Box Model deliberately—experiment with margin, padding, and borders to see how they affect the layout. Apply background colors to visualize box boundaries. You may also style buttons, navigation, and card-like sections to demonstrate your grasp of spacing and alignment.
No JavaScript or external CSS libraries (like Bootstrap) should be used.
Submit the following files:
index.html: A basic HTML page with structured content.styles.css: Your external stylesheet containing all your CSS rules.
Both files should work together to showcase:
- Proper use of selectors and basic styling properties
- Clear implementation of the CSS Box Model
- Consistent spacing, sizing, and layout styling
- Correct linkage of HTML and CSS files
- Use of appropriate CSS selectors and properties
- Demonstration of the Box Model through visual layout (clear use of margin, padding, and borders)
- Readability and organization of CSS code (indentation, comments, spacing)
- Overall appearance and clarity of styled content