Lists, Links, Background and Borders Review

# --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; } ``` :::