Hello World Gets Beautiful: Introduction to CSS
In the previous article, we created a simple web page that displayed the "Hello World!" text. Today, we’ll make it look more attractive by learning about CSS — the technology used to style HTML pages. We’ll add a background, change fonts, and introduce a small visual upgrade.
What is CSS?
CSS (Cascading Style Sheets) is a style language used to control the appearance of web pages. With CSS, you can change fonts, colors, sizes, add backgrounds, and animations.
Here’s how our HTML code looked in the previous lesson:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>1. Linking CSS
First, let’s add a link to the styles in our HTML code. We’ll create a separate file named styles.css and include it using <link>
<!DOCTYPE html>
<html>
<head>
<title>Hello World Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>2. Creating styles.css
Now, create the styles.css file and add styles for the page.
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
font-family: 'Arial', sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
font-size: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}3. What Have We Done?
- Added a gradient background to make the page look modern.
- Customized the text font to make it readable and stylish.
- Centered the text on the screen using flexbox.
- Introduced a pulsing animation for the heading for a dynamic effect.
Result
Now your page looks more appealing. Here’s how it will appear in the browser:
- Background: A smooth gradient from pink to orange.
- Text: Large, white, with a shadow and a pulsating effect.
Next Step
In the next article, we’ll explore adding interactivity using JavaScript.
Join us to learn more! 🚀