Activity 19: Research CSS
Published
•3 min read
1. What is CSS?
CSS (Cascading Style Sheets) is a language used to style and design web pages. It controls the appearance of HTML elements such as colors, fonts, layout, and spacing.
Basic CSS Properties:
1. Text Styling:
- Change the text color, font size, font weight, and font style. This includes controlling aspects like line height and letter spacing for better readability.
Example: Text Styling
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling Example</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->
</head>
<body>
<h1>Text Styling Example</h1>
<p>This is an example of styled text using CSS.</p>
</body>
</html>
CSS (styles.css)
body {
font-family: Arial, sans-serif;
}
h1 {
color: #4CAF50; /* Green */
font-size: 36px; /* Font size */
font-weight: bold; /* Bold text */
}
p {
color: #555; /* Dark gray */
font-size: 18px; /* Font size */
font-style: italic; /* Italic text */
}
2. Box Model:
- Understand the box model, which includes margins (space outside the border), padding (space inside the border), borders (the outer edge of an element), and the content area. This is essential for managing spacing and layout.
Example: Box Model
HTML (box-model.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Example</title>
<link rel="stylesheet" href="box-model.css"> <!-- Link to the external CSS file -->
</head>
<body>
<div class="box">
<h2>Box Model Example</h2>
<p>This box demonstrates the CSS box model.</p>
</div>
</body>
</html>
CSS (box-model.css)
.box {
width: 300px; /* Width of the content area */
margin: 20px; /* Margin around the box */
padding: 15px; /* Padding inside the box */
border: 2px solid #333; /* Border around the box */
background-color: #e7e7e7; /* Background color */
}
3. Backgrounds:
- Apply background colors or images to elements, including properties for background size, position, and repeat behavior. This enhances visual interest and design appeal.
Example: Backgrounds
HTML (backgrounds.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Example</title>
<link rel="stylesheet" href="backgrounds.css"> <!-- Link to the external CSS file -->
</head>
<body>
<div class="background-box">
<h2>Background Example</h2>
</div>
</body>
</html>
CSS (backgrounds.css)
body {
background-color: #f0f0f0; /* Light gray background */
}
.background-box {
width: 400px; /* Width of the box */
height: 200px; /* Height of the box */
background-image: url('https://via.placeholder.com/400'); /* Background image */
background-size: cover; /* Cover the entire box */
color: white; /* Text color */
display: flex; /* Flexbox for centering content */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
text-align: center; /* Center text */
}
4. Layouts:
- Use various display properties (like
block,inline,flex, andgrid) to create different layouts. Flexbox and CSS Grid are powerful tools for designing responsive and adaptable layouts, allowing for better organization of content on the page.
Example: Layouts
HTML (layouts.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layouts Example</title>
<link rel="stylesheet" href="layouts.css"> <!-- Link to the external CSS file -->
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>
</html>
CSS (layouts.css)
.container {
display: flex; /* Use flexbox */
justify-content: space-between; /* Space items evenly */
align-items: center; /* Center items vertically */
padding: 20px; /* Padding for the container */
background-color: #e7e7e7; /* Background color */
}
.item {
background-color: #4CAF50; /* Green background */
color: white; /* White text color */
padding: 10px; /* Padding inside the item */
width: 45%; /* Width of each item */
text-align: center; /* Center text */
}
Output:
Repository:
###
