---
id: 671a88d636cebc5fbd407b78
title: Lists, Links, Background and Borders Review
challengeType: 31
dashedName: review-css-backgrounds-and-borders
---

# --interactive--

## Styling Lists

- **`line-height` Property**: This property is used to create space between lines of text. The accepted `line-height` values include the keyword `normal`, numbers, percentages, and length units like the `em` unit.
- **`list-style-type` Property**: This property is used to specify the marker for a list item. Acceptable values can include a `circle`, `disc`, or `decimal`.

Here's an example using `list-style-type` to change the bullet style:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

```css
ul {
  list-style-type: square;
}
```

:::

- **`list-style-position` Property**: This property is used to set the position for the list marker. The only two acceptable values are `inside` and `outside`.

Here's an example showing the difference between `inside` and `outside`:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<ul class="inside-list">
  <li>Item with inside position</li>
  <li>Item with inside position</li>
</ul>
<ul class="outside-list">
  <li>Item with outside position</li>
  <li>Item with outside position</li>
</ul>
```

```css
.inside-list {
  list-style-position: inside;
}

.outside-list {
  list-style-position: outside;
}
```

:::

- **`list-style-image` Property**: This property is used to use an image for the list item marker. A common use case is to use the `url` function with a value set to a valid image location.

## Spacing list items using `margin`

- Apart from `line-height`, margins can also be used in CSS to enhance the spacing and readability of list items.
- Margins create space outside each `li` element, allowing control over the gap between list items.
- `margin-bottom` is used to create space below each list item. For example, `margin-bottom: 10px;` will create a 10-pixel gap below each list item.

Here's an example using `margin-bottom` to space list items:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

```css
.list li {
  margin-bottom: 20px;
}
```

:::

## Styling Links

- **`pseudo-class`**: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the `:hover`, `:visited`, and `:focus` states.
- **`:link pseudo-class`**: This pseudo-class is used to style links that have not been visited by the user.

Here's an example using the `:link` pseudo-class:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<a href="/">Example link</a>
```

```css
a:link {
  color: red;
}
```

:::

- **`:visited pseudo-class`**: This pseudo-class is used to style links that a user has already visited.
- **`:hover pseudo-class`**: This pseudo-class is used to style elements where a user is actively hovering over them.

Here's an example using the `:hover` pseudo-class:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<a href="/">Hover over me!</a>
```

```css
a:hover {
  color: green;
  text-decoration: underline;
}
```

:::

- **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the user clicks or tabs on the element to focus it.

Here's an example using the `:focus` pseudo-class:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<a href="/">Example link</a>
```

```css
a:focus {
  outline: 2px solid orange;
}
```

:::

- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button.

Here's an example using the `:active` pseudo-class:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<a href="/">Click me!</a>
```

```css
a:active {
  color: pink;
}
```

:::

## Working with Backgrounds and Borders

- **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element.

Here's an example using `background-size: cover`:

:::interactive_editor

```html
<style>
  body {
    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>
```

:::

Here's an example using `background-size: contain`:

:::interactive_editor

```html
<style>
  body {
    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>
```

:::

- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat`, meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` value.

Here's an example using `background-repeat: no-repeat`:

:::interactive_editor

```html
<style>
  body {
    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 100px;
  }
</style>
```

:::

- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword values like `top`, `bottom`, `left`, `right`, and `center`.

Here's an example using `background-position`:

:::interactive_editor

```html
<style>
  body {
    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 100px;
  }
</style>
```

:::

- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are `scroll` (default), where the background image scrolls with the content, and `fixed`, where the background image stays in the same position on the screen.
- **`background-image` Property**: This property is used to set the background image of an element. You can set multiple background images at the same time and use the `url`, `radial-gradient`, or `linear-gradient` functions as values.

Here's an example using `background-image`:

:::interactive_editor

```html
<style>
  body {
    background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    min-height: 100px;
  }
</style>
```

:::

- **`background` Property**: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: `background: no-repeat url("example-url-goes-here");`

Here's an example using the `background` shorthand property:

:::interactive_editor

```html
<style>
  body {
    background: center top no-repeat url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
    min-height: 100px;
  }
</style>
```

:::

- **Good Contrast for Background and Foreground Colors**: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

## Borders

- **`border-top` Property**: This property is used to set the styles for the top border of an element. `border-top: 3px solid blue;` sets a 3-pixel-wide solid blue border on the top side of the element.
- **`border-right` Property**: This property is used to set the styles for the right border of an element. `border-right: 2px solid red;` sets a 2-pixel-wide solid red border on the right side of the element.
- **`border-bottom` Property**: This property is used to set the styles for the bottom border of an element. `border-bottom: 1px dashed green;` sets a 1-pixel-wide dashed green border on the bottom side of the element.
- **`border-left` Property**: This property is used to set the styles for the left border of an element. `border-left: 4px dotted orange;` sets a 4-pixel-wide dotted orange border on the left side of the element.

Here's an example using individual border properties:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<div class="bordered-box">Box with different borders</div>
```

```css
.bordered-box {
  border-top: 3px solid blue;
  border-right: 2px solid red;
  border-bottom: 1px dashed green;
  border-left: 4px dotted orange;
  padding: 20px;
}
```

:::

- **`border` Property**: This is the shorthand property for setting the width, style, and color of an element's border. `border: 1px solid black;` sets a 1-pixel-wide solid black border.

Here's an example using the `border` shorthand property:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">
```

```css
img {
  border: 2px solid red;
}
```

:::

- **`border-radius` Property**: This property is used to create rounded corners for an element's border.

Here's an example using `border-radius`:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute cat lying on its back.">
```

```css
img {
  border: 2px solid black;
  border-radius: 10px;
}
```

:::

- **`border-style` Property**: This property is used to set the style of an element's border. Some accepted values include `solid`, `dashed`, `dotted`, and `double`.

Here's an example using different `border-style` values:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<div class="solid-border">Solid border</div>
<div class="dashed-border">Dashed border</div>
<div class="dotted-border">Dotted border</div>
<div class="double-border">Double border</div>
```

```css
.solid-border {
  border: 3px solid blue;
  margin-bottom: 10px;
  padding: 10px;
}

.dashed-border {
  border: 3px dashed red;
  margin-bottom: 10px;
  padding: 10px;
}

.dotted-border {
  border: 3px dotted green;
  padding: 10px;
}

.double-border {
  border: 3px double blueviolet;
  padding: 10px;
}
```

:::

## Gradients

- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line.

Here's an example using `linear-gradient()`:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<div class="linear-gradient"></div>
```

```css
.linear-gradient {
  background: linear-gradient(to right, red, blue);
  height: 40vh;
}
```

:::

- **`radial-gradient()` Function**: This CSS function creates an image that radiates from a particular point, like a circle or an ellipse, and gradually transitions between multiple colors.

Here's an example using `radial-gradient()`:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css">
<div class="radial-gradient"></div>
```

```css
.radial-gradient {
  background: radial-gradient(circle, red, blue);
  height: 40vh;
}
```

:::

# --assignment--

Review the CSS Backgrounds and Borders topics and concepts.
