[go: up one dir, main page]
Scribd
Upload
39 views17 pages

Practical Examp-WPS Office

This document provides a practical example of a login form using HTML and CSS, showcasing the use of attribute selectors and hover effects for improved user experience. It includes detailed CSS code for styling input fields, buttons, links, and images, as well as explanations of various CSS selectors. The final result is an interactive and visually appealing login form that enhances user interaction.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views17 pages

Practical Examp-WPS Office

This document provides a practical example of a login form using HTML and CSS, showcasing the use of attribute selectors and hover effects for improved user experience. It includes detailed CSS code for styling input fields, buttons, links, and images, as well as explanations of various CSS selectors. The final result is an interactive and visually appealing login form that enhances user interaction.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

### **Practical Example: Login Form with CSS Attribute Selectors and Hover Effects**

This example includes attribute selectors combined with the `:hover` pseudo-class for better user
experience.

---

### **CSS Code with Attribute Selectors and Hover Effects**

```css

/* General input styling */

input[type] {

border: 2px solid #ccc;

padding: 10px;

width: 100%;

border-radius: 5px;

margin: 5px 0;

transition: 0.3s;

/* Apply different background color to text input fields */

input[type="text"] {

background-color: #f9f9f9;

/* Apply different background color to password fields */

input[type="password"] {

background-color: #f0f0f0;
}

/* Highlight required input fields */

input[required] {

border-color: red;

/* Change border color when input is focused */

input:focus {

border-color: dodgerblue;

background-color: #e6f7ff;

/* Change input field border when hovered */

input[type]:hover {

border-color: #007bff;

/* Change button appearance on hover */

button:hover {

background-color: darkblue;

color: white;

cursor: pointer;

}
/* Style for links that start with 'https' */

a[href^="https"] {

color: green;

text-decoration: none;

font-weight: bold;

/* Change link color when hovered */

a[href^="https"]:hover {

color: darkgreen;

text-decoration: underline;

/* Style images with .png extension */

img[src$=".png"] {

border: 3px solid blue;

border-radius: 10px;

width: 100px;

/* Change image border when hovered */

img[src$=".png"]:hover {

border-color: red;

```
FHTML Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Attribute Selector with Hover</title>

<style>

/* General input styling */

input[type] {

border: 2px solid #ccc;

padding: 10px;

width: 100%;

border-radius: 5px;

margin: 5px 0;

transition: 0.3s;

/* Apply different background color to text input fields */

input[type="text"] {

background-color: #f9f9f9;

/* Apply different background color to password fields */

input[type="password"] {
background-color: #f0f0f0;

/* Highlight required input fields */

input[required] {

border-color: red;

/* Change border color when input is focused */

input:focus {

border-color: dodgerblue;

background-color: #e6f7ff;

/* Change input field border when hovered */

input[type]:hover {

border-color: #007bff;

/* Change button appearance on hover */

button:hover {

background-color: darkblue;

color: white;

cursor: pointer;

}
/* Style for links that start with 'https' */

a[href^="https"] {

color: green;

text-decoration: none;

font-weight: bold;

/* Change link color when hovered */

a[href^="https"]:hover {

color: darkgreen;

text-decoration: underline;

/* Style images with .png extension */

img[src$=".png"] {

border: 3px solid blue;

border-radius: 10px;

width: 100px;

/* Change image border when hovered */

img[src$=".png"]:hover {

border-color: red;

</style>
</head>

<body>

<div style="width: 300px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">

<h2>Login Form</h2>

<form>

<label for="username">Username:</label>

<input type="text" id="username" placeholder="Enter your name" required>

<label for="password">Password:</label>

<input type="password" id="password" placeholder="Enter password" required>

<button type="submit">Login</button>

</form>

<p>Visit our secure site: <a href="https://example.com">Click Here</a></p>

<img src="logo.png" alt="Logo">

</div>

</body>

</html>

```

---

### **How It Works**

1. **`input[type]`** → Applies styles to all input fields that have a `type` attribute.
2. **`input[type="text"]` and `input[type="password"]`** → Changes background colors.

3. **`input[required]`** → Highlights required fields with a red border.

4. **`input:focus`** → When clicked, the input field border changes to blue.

5. **`input[type]:hover`** → Border color changes to blue when hovering.

6. **`button:hover`** → Changes background to dark blue and text to white when hovered.

7. **`a[href^="https"]`** → Styles secure links (green color).

8. **`a[href^="https"]:hover`** → Changes link color to dark green and underlines it.

9. **`img[src$=".png"]`** → Adds a blue border around PNG images.

10. **`img[src$=".png"]:hover`** → Border changes to red when hovered.

---

### **Final Thoughts**

✅ This practical example **includes attribute selectors**.

✅ It **incorporates hover effects** for better user interaction.

✅ The form **looks interactive and dynamic**.

Would you like me to add more features or another example? 🚀


No problem! I'll explain everything step by step. Let's break it down:

---

### **Step 1: Create the HTML Structure**

HTML is the structure of your webpage. In this step, we will create a **Login Form**.

1. Open **Notepad** (or any code editor like VS Code, Sublime Text).

2. Save the file as **login.html**.

3. Copy and paste this code:

```html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Form</title>

</head>
<body>

<div>

<h2>Login</h2>

<form>

<label for="username">Username:</label>

<input type="text" id="username" placeholder="Enter username">

<label for="password">Password:</label>

<input type="password" id="password" placeholder="Enter password">

<button type="submit">Login</button>

</form>

</div>

</body>

</html>

```

### **Explanation of HTML**

- `<html>`: The root of the document.

- `<head>`: Contains metadata (title, character set, viewport settings).

- `<title>`: Sets the title of the webpage.

- `<body>`: Contains the content that users see.

- `<div>`: A container to wrap the form.

- `<h2>`: A heading for the form.

- `<form>`: The form element that contains input fields.


- `<label>`: A label for input fields.

- `<input>`: Used for user input (text/password).

- `<button>`: A button to submit the form.

---

### **Step 2: Add CSS Styles**

CSS is used to make the form look nice.

1. Inside the `<head>` section, add this `<style>` block:

```html

<style>

/* Universal Selector: Applies to all elements */

*{

box-sizing: border-box;

font-family: Arial, sans-serif;

/* Element Selector: Applies to the body */

body {

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;
height: 100vh;

/* ID Selector: Styles the form container */

#container {

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

width: 300px;

text-align: center;

/* Class Selector: Styles form groups */

.form-group {

margin-bottom: 15px;

text-align: left;

/* Attribute Selector: Styles input fields */

input[type="text"], input[type="password"] {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

border-radius: 5px;
}

/* Pseudo-Class Selector: Changes border color on focus */

input:focus {

border-color: dodgerblue;

outline: none;

/* Grouping Selector: Styles buttons and links */

button, a {

display: block;

width: 100%;

text-align: center;

/* Child Selector: Styles only direct children */

#container > h2 {

color: darkblue;

/* Adjacent Sibling Selector: Styles the paragraph after h2 */

h2 + p {

font-size: 14px;

color: gray;

}
/* General Sibling Selector: Styles all <p> after h2 */

h2 ~ p {

font-style: italic;

</style>

```

---

### **Step 3: Complete the HTML Structure with CSS**

Now, update the `<body>` section with CSS classes:

```html

<body>

<div id="container">

<h2>Login</h2>

<form>

<div class="form-group">

<label for="username">Username:</label>

<input type="text" id="username" placeholder="Enter username">

</div>

<div class="form-group">

<label for="password">Password:</label>

<input type="password" id="password" placeholder="Enter password">


</div>

<button type="submit">Login</button>

</form>

<p>Don't have an account? <a href="#">Register</a></p>

</div>

</body>

```

---

Step 4: Save and Open the File

- Save the file as login.html

- Open it in a browser (Chrome, Edge, Firefox).

- You should now see a **styled login form**.

Step 5: Understanding the CSS Selectors**

Here’s how different **CSS Selectors** are used:

1. Universal Selector (`*`)

- Applies styles to all elements.

- Example: `box-sizing: border-box;` applies to all elements.

2. Element Selector (`body`)

- Applies styles to all `<body>` elements.

- Example: `background-color: #f4f4f4;` sets a background color.

3. ID Selector (`#container`)

- Targets a specific element with `id="container"`.


- Example: `background: white;` makes the form background white.

4. Class Selector (`.form-group`)**

- Targets elements with the class name `form-group`.

- Example: `margin-bottom: 15px;` adds space below each form field.

5. **Attribute Selector (`input[type="text"]`)**

- Targets input fields of a specific type.

- Example: `border: 1px solid #ccc;` adds a border around inputs.

6. **Pseudo-Class Selector (`input:focus`)

- Changes the style when an input field is clicked.

- Example: `border-color: dodgerblue;` highlights input fields.

7. **Grouping Selector (`button, a`)**

- Applies styles to multiple elements at once.

- Example: `display: block; width: 100%;` makes buttons and links full-width.

8. **Child Selector (`#container > h2`)**

- Targets only direct `<h2>` children inside `#container`.

- Example: `color: darkblue;` changes text color.

9. **Adjacent Sibling Selector (`h2 + p`)**

- Styles `<p>` immediately following `<h2>`.

- Example: `font-size: 14px;` reduces text size.

10. **General Sibling Selector (`h2 ~ p`)**


- Styles all `<p>` elements that follow `<h2>`.

- Example: `font-style: italic;` makes text italic.

You might also like