Activity 19: Research CSS

What is CSS?

CSS (Cascading Style Sheets) is a language used to style and design the layout and appearance of web pages. It enables you to control the look of HTML elements, such as colors, fonts, spacing, and more. By using CSS, you can create visually appealing web pages and enhance user experience without modifying the underlying HTML structure.

Basic CSS Properties:

Text Styling: Learn how to change text color, font size, and font style.

Box Model: Understand how to use margins, padding, borders, and content.

Backgrounds: Apply background colors or images to elements.

Layouts: Use display, position, and flexbox to create layouts.

Practice:

index.html contents:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Practice</title>
</head>
<body>
<h1>Welcome to CSS Practice</h1>
<p>a simple webpage with simple CSS applied.</p>

<div class="box">
  <p>This is a styled box with padding, border, and background color.</p>
</div>
</body>
</html>

styles.css contents:

Code:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  color: #333;
  font-size: 3em;
}

p {
  color: #666;
  font-size: 1.2em;
  margin: 20px;
}

.box {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 10px auto;
  width: 50%;
}

Activity 19: Research CSS

Table of contents

What is CSS?

Basic CSS Properties:

Practice:

OUTPUT:

GITHUB LINK:

References: