CSS Basics Expanded

Table of Contents

1. Backgrounds
2. Borders
3. Margins and Padding
4. Lists
5. Positioning
6. Further Reading

---

Backgrounds

You can set background colors and images for elements.

/* Background color */
.bg-red {
  background-color: red;
}

/* Background image */
.bg-image {
  background-image: url("image.jpg");
}

---

Borders

You can add borders around elements and even round the corners.

/* Simple border */
.border-simple {
  border: 2px solid black;
}

/* Rounded corners */
.border-rounded {
  border-radius: 10px;
}

---

Margins and Padding

Margins and padding control the space around and inside elements.

/* Margin */
.margin-10 {
  margin: 10px;
}

/* Padding */
.padding-10 {
  padding: 10px;
}

---

Lists

You can style lists with CSS to make them look different.

/* Remove bullets */
.list-no-bullets {
  list-style-type: none;
}

/* Add custom bullets */
.list-custom-bullets {
  list-style-image: url("bullet.png");
}

---

Positioning

Understanding positioning can help you place elements exactly where you want.

/* Relative positioning */
.relative {
  position: relative;
  left: 10px;
}

/* Absolute positioning */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

---

Further Reading

Ready to learn more? Check out these free resources:

• Mozilla Developer Network's CSS Guide
• W3Schools CSS Tutorial
• FreeCodeCamp's CSS Course

---