# ACTIVITY#21:  Research OOCSS - Object-Oriented CSS

1. **What is OOCSS?**:
    
    * **OOCSS (Object-Oriented CSS)** is a CSS methodology that focuses on separating the structure of HTML from its appearance. It encourages **code reuse** and **modularity** by treating UI components as objects.
        
2. **Core Principles**:
    
    * **Separation of Structure and Skin**: Divide elements’ structure (layout) and visual design (colors, fonts) into separate styles.
        
    * **Separation of Container and Content**: Make components flexible and reusable regardless of where they are placed in the layout.
        
3. **Advantages**:
    
    * Encourages **reusable** code.
        
    * Helps create scalable, maintainable CSS.
        
4. **Practice**:
    
    * Implement a simple webpage following OOCSS principles. Focus on reusable components like buttons or cards.
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143603143/aaac0653-edde-482f-a2e3-5fa23b75e0c4.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143645603/9b0c45c7-1f54-425b-a72d-37f6c1696459.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143679672/99e6e972-b04a-4915-a463-a0aefd2306bd.png align="center")
        
        ### Explanation of Changes
        
        1. **Navigation Menu**: Added a navigation section in the header for easier navigation between cards and testimonials.
            
        2. **Images in Cards**: Each card now includes an image, enhancing visual appeal and providing context.
            
        3. **Testimonials Section**: Added a testimonial section with a quote and author, demonstrating another use of the card structure.
            
    * ### CSS (styles.css)
        
        Here’s a corresponding CSS snippet to style the updated HTML structure:
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143735631/28cba3f7-61ce-47ee-86e9-3479a5bf9a25.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143811224/0158e182-a126-49c7-ad37-c8e02669c97c.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143848946/a6efee1d-571b-4270-bacc-0302195dde99.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143877556/5ee60aaf-0426-4a2a-8e82-66624a52f75a.png align="center")
        
        ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143902514/0a40f648-7c32-464c-8665-4c83018d14f2.png align="center")
        
        **Here’s the OUTPUT:**
        
    * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1728143961616/575d556e-ebb2-4ea3-8819-654aced333b5.png align="center")