Scribd
Upload
3 views4 pages

HTML Basic

This document provides a guide on adding CSS styling to a personal webpage to enhance its appearance. It includes steps to create a <style> section in the HTML <head>, detailing the styles for body, headings, paragraphs, links, and images. The final code is presented, demonstrating a styled personal page that can be saved as index.html and viewed in a browser.

Uploaded by

shubham9560199
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
3 views4 pages

HTML Basic

This document provides a guide on adding CSS styling to a personal webpage to enhance its appearance. It includes steps to create a <style> section in the HTML <head>, detailing the styles for body, headings, paragraphs, links, and images. The final code is presented, demonstrating a styled personal page that can be saved as index.html and viewed in a browser.

Uploaded by

shubham9560199
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

Perfect, let’s add some CSS styling to make your personal webpage look

more colorful and professional. CSS (Cascading Style Sheets) controls how
HTML elements look—fonts, colors, spacing, backgrounds, etc.

🎨 Step 1: Add a <style> Section

Inside the <head> of your HTML, add a <style> block:

html

<head>

<title>My Personal Page</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

text-align: center;

margin: 40px;

h1 {

color: #2c3e50;

p{

font-size: 18px;

color: #34495e;

a{

color: #2980b9;

text-decoration: none;

font-weight: bold;

}
a:hover {

color: #e74c3c;

img {

border-radius: 50%;

margin-top: 20px;

</style>

</head>

Step 2: What This Does

 Body → soft blue background, centered text, clean font.

 Heading (h1) → dark stylish color.

 Paragraph (p) → slightly larger text, easy to read.

 Link (a) → blue by default, turns red when hovered.

 Image (img) → rounded (circle effect), with spacing.

✨ Final Styled Page

Here’s the complete code:

html

<!DOCTYPE html>

<html>

<head>

<title>My Personal Page</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

text-align: center;
margin: 40px;

h1 {

color: #2c3e50;

p{

font-size: 18px;

color: #34495e;

a{

color: #2980b9;

text-decoration: none;

font-weight: bold;

a:hover {

color: #e74c3c;

img {

border-radius: 50%;

margin-top: 20px;

</style>

</head>

<body>
<h1>Hello, I’m [Your Name]</h1>

<p>I’m learning HTML and building my first webpage. I love


programming and want to become a top software engineer!</p>

<a href="[Link] my GitHub</a>

<br><br>

<img src="[Link] alt="My photo">

</body>

</html>

💡 Save this as [Link] and open it in your browser—you’ll see a neat,


styled personal page!

Would you like me to show you how to make this page responsive (so it
looks good on mobile phones too), or should we move on to adding more
sections like hobbies, skills, or a contact form?

You might also like