Welcome to CSS Project 7 - Styled Form Elements

This project will guide you through creating styled form elements using HTML and CSS. It's designed for beginners with basic knowledge of HTML and CSS.

Hardware Setup

Ensure you have the following hardware components:

A computer with internet access.
A keyboard and mouse for typing and navigation.

Software Requirements

Here are the software tools you'll need for this project:

Any code editor (e.g., Visual Studio Code, Sublime Text).
A web browser (e.g., Chrome, Firefox).

Knowledge Prerequisites

To successfully complete this project, you should be familiar with the following concepts:

Basic understanding of HTML and CSS.

Difficulty Rating

Easy Difficulty

Project Time!!!

“Form follows function.” - Louis Sullivan

Project Steps:

Done

Download and install Visual Studio Code or your preferred code editor.
Open your code editor and create a new folder for your project.
Inside the folder, create a new file named index.html and another file named styles.css.

Done

Open index.html and add the following basic HTML structure:





    
    
    Styled Form Elements
    


    
        Contact Us
        
            Name:
            

            Email:
            

            Message:

Done

Open styles.css and add the following CSS to style your form elements:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-container {
    background-color: #fff;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
}

.form-container h1 {
    margin-bottom: 1em;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 0.5em;
    color: #333;
}

input, textarea {
    width: 100%;
    padding: 0.75em;
    margin-bottom: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background-color: #28a745;
    color: #fff;
    padding: 0.75em;
    border: none;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #218838;
}

Save the file and open index.html in your web browser to see your styled form elements.

Welcome to CSS Project 7 - Styled Form Elements

Hardware Setup

Software Requirements

Knowledge Prerequisites

Difficulty Rating

Easy Difficulty

Project Time!!!

Project Steps:

Contact Us

Congratulations! You've created styled form elements using HTML and CSS. Now you're ready to tackle more complex projects.