Instructions:

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.
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
Practice:
- Write a simple HTML document and apply basic CSS using internal or external stylesheets.

ACT19CSS.html as a main webpage. I example of Elementary School near in my location.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Activity 19: Research CSS</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li>HOME</li>
                    <li>LOGIN</li>
                    <li>SIGN UP </li>
                </ul>
            </nav>
        </header>
        <div class="calltoaction">
            <div class="welcome">
                <span>WELCOME TO CNES PORTAL  </span>
            <div class="copy">
                <span style="font-size: 30px;">&copy; 2024 All Right Reserved. </span>
            </div>
            </div>

            <div class="image">
                <img src="CNES.png" alt="myprofile" width="500">
            </div>
        </div>
        <form action="/Contactus.html" method="get" class="contactus">
          <h2>Contact Us: </h2>
          <label for="email">Email: </label>
          <input type="email" id="names" name="email" required>

          <label for="password">Password: </label>
          <input type="password" id="pass" name="password" required>
          <input type="submit" value="Submit" id="button"> 

        </form>
    </body>
    </html>

style.css as an external design/css

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: rgb(0, 194, 224);
    }
    ul {
        list-style-type: none;
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
    }
    ul li {
        padding: 10px;
        margin: 30px;
        font-size: 30px;
        font-family:Georgia, 'Times New Roman', Times, serif;
        color: white;
    }

    .calltoaction {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background-color: #367d8f;
        background-repeat: no-repeat;
        background-size:cover;

    }
    .calltoaction .welcome {
        margin: 100px 0 60px 80px;
       font-size: 100px;
       color: white;  
       text-align: center; 

    }
    .image img{
        display: flex;
        justify-content:flex-end;
        flex-direction: row;
        position: relative;

    }
    .contactus h2{
       margin: 20px;
       font-size: 40px;
    }
    .contactus label, input{
       font-size: 20px;
       border-radius: 5px;
    }
    .contactus #button {
        width: 10%;
        height: 15%;
        border-radius: 5px;

    }

Contactus.html as a webpage when input submit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Activity 19: Research CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    .buttonclass {
        width: 100%;
        margin: 20px;
    }
    button {
        display: flex;
        justify-content: center;
        border-radius: 10px;
        flex-direction: row;
        width: 200px;
        height: 50px;
        font-size: large;
        margin: auto;
        padding-top: 15px;
        font-weight: 600;
        color: black;

    }
</style>
<body>

    <div class="calltoaction">
        <div class="welcome">
            <span>THANK YOU FOR CONTACT US!  </span>
        <div class="copy">
            <span style="font-size: 30px;">&copy; 2024 All Right Reserved. </span>
        </div>
        </div>

        <div class="image">
            <img src="CNES.png" alt="myprofile" width="500">
        </div>
    </div>
    <div class="buttonclass">
    <button onclick="window.history.back()">BACK TO HOME</button>
</div>
</html>

OUTPUT IN Act19CSS.html (Main Page):

OUTPUT IN ContactUs.html (When the input with a value “submit click”)

Using onclick="window.history.back() in button can be able to get back on your previous page.

REPOSITORY LINK (GitHub):

https://github.com/Rhedaligan8/ACT19CSS.git

Activity 19: Research CSS | Aligan, Rhed N.

Instructions:

Subscribe to my newsletter

Rhed Aligan

Rhed Aligan