Interactive Design:Week 07

on

   

Week 07 Blog: Deep Dive into CSS Selectors and Styling Techniques

In Week 07, we explored essential CSS concepts that enhance the look and functionality of our web pages. CSS (Cascading Style Sheets) is key to controlling the presentation of HTML elements, and understanding its selectors and properties is crucial for creating visually appealing websites. Here’s an overview of what we learned:

CSS Selectors

We started with various types of selectors:

  1. Universal Selector (*) - This applies a style to all elements on a page, useful for setting general styling.
  2. Element Selector - Targets specific HTML tags (like <p> or <div>) and applies styles to all instances of that tag.
  3. ID Selector (#id) - Targets elements by their unique id, used for specific styling on one particular element.
  4. Class Selector (.class) - Applies styles to multiple elements sharing the same class, great for repeated styling.
  5. Descendant Selector - Targets children of a specified parent element, helping create structured, specific styles.
  6. Child Selector - Similar to the descendant selector but only applies to direct children, providing more control over the hierarchy of elements.

Attributes and States

We also learned to style based on element attributes and different link states:

  • Image Attribute (src) - Used to specify image source links.
  • Anchor States (a:link, a:visited, a:hover, a:active, and a:focus) - These states control how links appear in different stages of interaction, making navigation more engaging and visually dynamic.

Layout and Styling Techniques

Understanding layout was another major focus:

  • Margin and Centering - We can add margins to space out elements, with different values for each direction (e.g., margin-left, margin-top). To center an element, setting display: block and margin: auto is very effective.
  • Floating Elements - By using float: right or float: left, we learned to wrap text around images, creating more visually interesting layouts.
  • Clear Property - Clears any floating properties applied to elements, helping maintain a clean, organized layout.

Practical Application and Submission

To put our skills into action, we uploaded our projects to Netlify for submission. This experience gave us hands-on practice in managing CSS files, applying selectors efficiently, and styling our pages with precision.

Conclusion

This week provided a solid foundation in CSS styling techniques. Learning to use different selectors, manage layout with floats and margins, and work with link states has empowered us to create more user-friendly, visually consistent websites. I’m excited to continue improving my CSS skills and see how these techniques transform my future projects!

Comments

Post a Comment