# Activity 19: Research CSS

### **Instructions:**

1. **What is CSS?**:
    
    * CSS is a language used to style and design web pages. It controls the appearance of HTML elements like colors, fonts, layout, and spacing.
        
2. **Basic CSS Properties**:
    
    * **Text Styling**: Learn how to change text color, font size, and font style.
        
    * **Box Model**: Understand how to use margins, padding, borders, and content.
        
    * **Backgrounds**: Apply background colors or images to elements.
        
    * **Layouts**: Use display, position, and flexbox to create layouts.
        
    * **etc**
        

## **CODE SNIPPETS**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic CSS Properties</title>
    <style>
        /* Text Styling */
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to bottom, #ffffff 0%, #000066 100%);
        }
        h1 {
            color: blue;
            font-size: 3.5em;
            font-style: italic;
            text-align: center;
        }
        h2 {
            font-size: 2em;
            text-align: center;
        }
        p {
            color: #333;
            font-size: 1em;
            font-weight: bold;
        }

        /* with Box Model */
        .item .content{
            margin-top: 450px;
            padding: 10px;
            border: 2px solid black;
            background-color: #f0f0f0;
            opacity: 0.8;
            border-radius: 20px;
        }

        /* Layouts */
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 700px;
        }

        .item {
            width:550px;
            height:600px;
            border-radius: 20px;
            background-color: coral;
            background-size: cover;
        }

        .item .name{
            font: normal 36px 'Cookie', cursive;
            background-color: lightblue;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<!-- Body here-->
<body>
    <h1>Anyme</h1>
    <h2>This is a Anyme demonstrating basic CSS properties.</h2>
    <div class="container">
        <div class="item" style="background-image: url(http://localhost/polder/ey/peytur/fairytail.jpg);">
            <div class="content">
                <div class="name">FairyTail</div>
                <p>Written by :	Hiro Mashima</p>
                <p>August 2, 2006 – July 26, 2017</p>
            </div>
        </div>
        <div class="item" style="background-image: url(http://localhost/polder/ey/peytur/onepiece.jpg);">
            <div class="content">
                <div class="name">OnePiece</div>
                <p>Written by :	Eiichiro Oda</p>
                <p>July 22, 1997 – present</p>
            </div>
        </div>
        <div class="item" style="background-image: url(http://localhost/polder/ey/peytur/spyxfamily.jpg);">
            <div class="content">
                <div class="name">Spy x Family</div>
                <p>Written by :	Tatsuya Endo</p>
                <p>March 25, 2019 – present</p>
            </div>
        </div>
    </div>
</body>
</html>
```

## **OUTPUT**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727832582397/b026a647-b1d0-42bd-a2af-6554a0583dfd.png align="center")

### **Repository Link:** [Darsssiiieee/SIA-102--ACTIVITIES (](https://github.com/Darsssiiieee/SIA-102--ACTIVITIES)[github.com](http://github.com)[)](https://github.com/Darsssiiieee/SIA-102--ACTIVITIES)
