Scribd
Upload
18 views4 pages

HTML CSS Practice Programs

The document contains examples of HTML and CSS implementations including inline, internal, and external CSS styles. It features a small project for creating a profile card with styled elements such as buttons and images. Each example demonstrates different ways to apply CSS for web design and layout.

Uploaded by

sailesh.scs415
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
18 views4 pages

HTML CSS Practice Programs

The document contains examples of HTML and CSS implementations including inline, internal, and external CSS styles. It features a small project for creating a profile card with styled elements such as buttons and images. Each example demonstrates different ways to apply CSS for web design and layout.

Uploaded by

sailesh.scs415
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/ 4

HTML + CSS Practice Programs

1. Basic HTML + CSS Example (Inline CSS)

<!DOCTYPE html>
<html>
<head>
<title>My First HTML CSS Page</title>
</head>
<body style="background-color: lightblue; text-align: center;">
<h1 style="color: darkblue;">Hello, World!</h1>
<p style="font-size: 20px; color: green;">This is my first HTML + CSS page.</p>
</body>
</html>

2. Internal CSS Example

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: darkred;
text-align: center;
}
p{
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is styled using internal CSS.</p>
</body>
</html>

3. External CSS Example


HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Portfolio</h1>
<p>This webpage uses external CSS.</p>
<button>Click Me</button>
</body>
</html>

CSS file (style.css):

body {
background-color: #eaf2f8;
text-align: center;
font-family: Verdana, sans-serif;
}

h1 {
color: navy;
}

p{
font-size: 18px;
color: darkgreen;
}

button {
padding: 10px 20px;
border: none;
background-color: orange;
color: white;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: darkorange;
}

4. Small Project: Profile Card

<!DOCTYPE html>
<html>
<head>
<title>Profile Card</title>
<style>
.card {
width: 300px;
margin: 50px auto;
padding: 20px;
text-align: center;
background: white;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.card img {
width: 100px;
border-radius: 50%;
}
.card h2 {
color: #333;
}
.card p {
color: gray;
font-size: 14px;
}
.card button {
margin-top: 10px;
padding: 8px 15px;
border: none;
border-radius: 5px;
background: teal;
color: white;
cursor: pointer;
}
.card button:hover {
background: darkslategray;
}
</style>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/100" alt="Profile">
<h2>Shobana</h2>
<p>Frontend Developer</p>
<button>Contact Me</button>
</div>
</body>
</html>

You might also like