In this blog post, we’ll explore two powerful CSS properties: borders and backgrounds. These properties can help add definition and visual appeal to your HTML elements. Let’s dive in with practical examples and explanations.
HTML Structure
Here’s the updated HTML structure for this lesson:
<!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>
<div>
<img src="sun.jpeg" class="borderImg">
</div>
</body>
</html>CSS Styles
Here’s the CSS file (main.css) used to style the borders and backgrounds:
/* Border Styling */
.borderImg {
border: 5px solid red; /* Creates a solid red border around the element */
}Border Property
The border property in CSS allows you to create borders around elements. It consists of three parts:
- Width: Thickness of the border (e.g., 2px, 5px).
- Style: Type of the border (e.g., solid, dashed, dotted, double, etc.).
- Color: The color of the border (e.g., red, blue, or hex codes like #ff0000).
Example of Different Border Styles:
/* Solid Border */
.solidBorder {
border: 3px solid blue;
}You can mix and match these properties to customize your borders.
Background Properties
The background property in CSS allows you to customize the look and feel of your webpage. You can:
- Use images (background-image).
- Control how images repeat (background-repeat).
- Set the image size (background-size).
Example of Background Styling:
body {
background-image: url(nature.jpeg);
background-repeat: no-repeat;
background-size: cover;
}Let’s break down each property used in the code:
1. background-image
This property is used to set an image as the background of an element.
Syntax:
background-image: url('image-file-path');- url('nature.jpeg'): Specifies the path to the image you want to use. In this case, the file nature.jpeg is located in the same directory as the HTML file.
2. background-repeat
This property controls whether the background image is repeated.
Syntax:
background-repeat: value;Values:
- repeat: Default value. The image is repeated both horizontally and vertically.
- repeat-x: The image is repeated horizontally only.
- repeat-y: The image is repeated vertically only.
- no-repeat: The image is not repeated.
In our example, background-repeat: no-repeat; ensures that the image appears only once on the page.
3. background-size
This property specifies the size of the background image.
Syntax:
background-size: value;Values:
- auto: Default value. The image is displayed at its original size.
- cover: Scales the image to completely cover the element's area while maintaining its aspect ratio.
- contain: Scales the image to fit within the element's area while maintaining its aspect ratio.
In our example, background-size: cover; makes the image cover the entire viewport. Even if the viewport size changes (e.g., resizing the browser window), the image will adjust accordingly to cover the full area without distortion.
Final Output
'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_001_Styling Basics with HTML and CSS (1) | 2025.01.08 |