CSS is a powerful tool that allows you to bring life and style to your HTML elements. In this blog post, we’ll look at a simple example of how CSS can transform your webpage with gradients, shadows, and color effects. We’ll explain the code step by step to understand how each line contributes to the final result.
HTML Structure
Here’s the simple HTML structure we are working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class ="container">
<h1>This is my first CSS practice </h1>
<h2>CSS is fun</h2>
</div>
</body>
</html>Explanation:
- <!DOCTYPE html>: Declares the document type as HTML5.
- <html lang="en">: Specifies that the language of the document is English.
- <head>: Contains metadata and links to external resources.
- <meta charset="UTF-8">: Sets the character encoding to UTF-8, allowing a wide range of characters.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive by setting the viewport width to the device’s screen width.
- <title>My CSS</title>: Sets the title of the webpage (visible on the browser tab).
- <link rel="stylesheet" href="main.css">: Links an external CSS file (main.css) to style the HTML elements.
- <body>: Contains the main content of the webpage.
- <div class="container">: Creates a container div to group and style the content.
- <h1></h1>: Defines a level-one heading with the text "You are the CSS."
- <h2></h2>: Defines a level-two heading with the text "Anyone escaped there."
CSS Styles
Here’s the CSS used to style the HTML elements:
.container {
background: linear-gradient(to left, #9d0dbd, #df9fed);
box-shadow: 3px 5px 3px blue;
}
h1 {
color: black;
text-shadow: 5px 5px 5px rgb(116, 113, 113);
}
h2 {
color: rgb(5, 116, 22);
text-shadow: 5px 5px 5px rgb(116, 113, 113);
}Explanation of Each CSS Rule
1. .container
The container class applies styles to the <div> element and everything inside it.
background: linear-gradient(to left, #9d0dbd, #df9fed);
- This creates a gradient background that transitions from purple (#9d0dbd) to light pink (#df9fed), moving from right to left.
color: blue;
- Sets the default text color inside the container to blue.
box-shadow: 3px 5px 3px blue;
- Adds a shadow around the container. The parameters are:
- 3px: Horizontal shadow.
- 5px: Vertical shadow.
- 3px: Blur radius.
- blue: Color of the shadow.
2. h1
The h1 tag defines the first header.
color: black;
- Sets the text color to black.
text-shadow: 10px, 100px;
- This line is invalid because text-shadow requires four values (x-offset, y-offset, blur-radius, and color). It won’t work and should be removed.
text-shadow: 30px 10px 10px gray;
- Correctly applies a shadow to the text. The parameters are:
- 30px: Horizontal offset (moves shadow to the right).
- 10px: Vertical offset (moves shadow down).
- 10px: Blur radius (softens the shadow edges).
- gray: Shadow color.
3. h2
The h2 tag defines the second header.
color: rgb(0, 204, 255);
- Sets the text color to a bright cyan using RGB values:
- 0: Red intensity.
- 204: Green intensity.
- 255: Blue intensity.
Final Result
When the above code is executed, here’s what you will see:
- A container with a gradient background (purple to pink) and a blue shadow.
- A level-one heading (h1) with black text and a gray shadow that appears offset and slightly blurred.
- A level-two heading (h2) with bright cyan text.
'Web Development Basics (CSS, JavaScript,' 카테고리의 다른 글
| CSS_004_Grouping Selectors in CSS (0) | 2025.02.01 |
|---|---|
| CSS_003_Understanding Descendant and Child Selectors in C (0) | 2025.01.26 |
| CSS_002_Styling Borders and Backgrounds with HTML and CSS (2) | 2025.01.12 |