Introduction
In this lab, you will learn how to integrate a custom Cascading Style Sheets (CSS) file into your captive portal's index.html file. While a basic HTML page is functional, applying custom styles makes it look more professional and convincing. You will create a style.css file, add styling rules to it, and then link it to your HTML document to transform the appearance of your login page.
Open Your Custom Portal's Directory
In this step, you will navigate to the directory that holds your custom portal files. All your work, including creating new files and editing existing ones, will be done inside this directory.
First, use the cd (change directory) command to move into the custom_portal directory located within your project folder.
cd ~/project/custom_portal
Next, use the ls -l command to list the contents of the directory. This will confirm that you are in the correct location and show the index.html file that we will be working with.
ls -l
You should see the following output, indicating the presence of your index.html file:
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
Create a 'style.css' File with CSS Rules
In this step, you will create a CSS file to define the visual styles for your login page. CSS allows you to control the layout, colors, fonts, and overall look of your HTML elements.
We will create a file named style.css using the nano text editor.
nano style.css
Once the nano editor opens, copy and paste the following CSS code into the file. This code targets various HTML elements to create a clean, modern login form design.
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
After pasting the code, save the file and exit nano by pressing Ctrl+X, followed by Y, and then Enter.
Link the Stylesheet in Your 'index.html' File
In this step, you will link the newly created style.css file to your index.html file. Simply creating a stylesheet is not enough; you must tell the HTML document to use it. This is done by adding a <link> tag inside the <head> section of your HTML.
Open the index.html file with the nano editor.
nano index.html
Navigate to the <head> section of the file. Add the following line just before the closing </head> tag:
<link rel="stylesheet" href="style.css" />
Your index.html file should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
Press Ctrl+X, Y, and Enter to save the changes and exit the editor. Now your HTML page is linked to your stylesheet, and any browser rendering the page will apply the CSS rules.
Launch the Attack with Your Custom Portal
In this step, you will preview your styled captive portal page. Instead of launching a full network attack, we will use a simple Python web server to host the files locally. This allows you to see exactly how the page will look to a user.
Make sure you are still in the ~/project/custom_portal directory. Run the following command to start a web server on port 8000.
python3 -m http.server 8000
This command tells Python to run its built-in http.server module, which serves the files from the current directory (custom_portal). The server will be accessible on your local machine at port 8000.
The terminal will display a message indicating that the server is running:
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
The server is now active. Leave this terminal running and proceed to the next step to view the page.
Verify the Custom Styles are Applied on the Login Page
In this final step, you will verify that your CSS styles are correctly applied by viewing the login page in a web browser.
On the right side of the lab environment, you will see a desktop interface. Click the Web Browser icon to open it.
In the browser's address bar, type the following URL and press
Enter:http://127.0.0.1:8000
You should now see your custom login page. Instead of a plain, unstyled page, it should have a light gray background, a centered white login box with a shadow, styled input fields, and a blue login button. This confirms that your style.css file was successfully linked and applied.
After you have verified the appearance, return to the terminal where the Python server is running and press Ctrl+C to stop it.
Summary
In this lab, you successfully enhanced a basic captive portal by integrating a custom CSS stylesheet. You learned how to create a separate .css file to manage styles, write CSS rules to target specific HTML elements, and link the stylesheet to an HTML document using the <link> tag. By previewing your work with a local web server, you were able to see the immediate impact of your styling, transforming a plain page into a visually appealing and more convincing login form. This skill is fundamental for web development and crucial for creating effective custom captive portals.