Anna University Regional Campus, Coimbatore

Department of Computer Science and Engineering

Experiment 2 - Creating a Webpage with Cascading Style Sheets


AIM:

To create a webpage with the following using HTML to embed the style sheet:

ALGORITHM:

  1. Create an HTML file with the style tag inside the head section.
  2. Define styles for headings (h1, h2, h3, etc.) such as font-family, font-size, color, and margins.
  3. Use an external CSS file for additional styling, such as background color, text alignment, and borders.
  4. Use proper alignment and padding for content display.
  5. Display the final webpage to verify the results.

PROGRAM:

Main Page (info.html)

<!DOCTYPE html>
<html>
<head>
    <title>User Information</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        h2 {
            font-family: Arial, sans-serif;
            text-shadow: 2px 2px #cccccc;
        }
    </style>
</head>
<body>

    <div class="container">
        <h2 style="font-size: 35px;">USER INFORMATION</h2>        
        <div class="info">
            <img src="IMG-20221201-WA0028.jpg" alt="User Image" class="user-image">           
            <ol>
                <li><p><strong class="highlight">Name:</strong> Nithishwaran A</p></li>
                <li><p><strong class="highlight">DOB:</strong> 23/05/2005</p></li>
                <li><p><strong class="highlight">Degree:</strong> BE</p></li>
                <li><p><strong class="highlight">Branch:</strong> CSE</p></li>
                <li><p><strong class="highlight">Year:</strong> 3</p></li>
                <li><p><strong class="highlight">Sem:</strong> 5</p></li>
                <li><p><strong class="highlight">CGPA:</strong> 8.01</p></li>
            </ol>
        </div>
    </div>

</body>
</html>

CSS File (Styles.css)


body {
	background: linear-gradient(to right, #c19a6b, #008080, #ffe4c4); 
    font-family: Verdana, Geneva, sans-serif;
    margin: 10px;
    padding: 10px;
}

.container {
    text-align: center;
    padding: 20px;
}

h2 {
    color: #F4EAE0;
    font-size: 35px;
    margin-bottom: 5px;
}

.user-image {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.info {
    background-color: #f3f3f3;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-align: left;
    margin-top: 120px;
    position: relative;
}

ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.highlight {
    color: #007BFF;
}

.info img {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    border: 3px solid #fff;
}

Sample Output:

Output Image

RESULT:

Thus, a webpage using Cascading Style Sheets (CSS) was successfully created, and its output was verified.