TIL; background-repeat | background-size | margin & padding | p tag behavior
Tags: html, webdev
Published: 2022-12-05 09:56:33

### Background-Repeat

- Background-Repeat is the feature where images in the background are repeated because these images do not stretch to cover the whole surface area of the text/paragraph.
- To disable background repeat …(continue this)
- here are the values that `background-repeat` accepts:
    - `no-repeat` ; this disables background repeating completely
    - `repeat-x`;this enables background repeating horizontally
    - `repeat-y`;this enables background repeating vertically
    - `repeat` ; this enables the background repeating both vertically and horizontally, this is the default `background-repeat` value.
    

---

### Importance of single and double quotes around style values in an in-line style property

- Single quotes are introduced in an in-line style property which already has double quotes to prevent the browser from misinterpreting the beginning of the second double quote as the end of the first. For instance;

```jsx
    style="font-family:"verdana""                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
```

In the instance above, the browser considers the double quotes before ‘verdana’ as the closing quote. 

```jsx
style="font-family:'verdana'"
```

Introducing single quotes within the double quotes helps the browser to correctly interpret the value the way the programmer intends.

---

### Background-size

- The default value for background-size is ‘auto’.

Other values that can be used to resize a background image include;

- Contain: This value spreads the background image in a way that, the full image is visible in the background.
- Cover: This value spreads the background image to cover the whole background, irrespective of whether the full image is displayed or not.

---

### Margin and Padding

- The margin is the space around the border of a content.
- Padding denotes the space around a content, within the border.

```css
                                 margin
            |---------------------------------------------------|
            |                    padding                        |
margin      |   padding         text content       padding      |      margin
            |                    padding                        |
            |---------------------------------------------------|
                                  margin   
```

---

### Text decoration

- Default value for a text decoration is ‘none’

Other values include ‘underline’, ‘strikethrough’, ‘overline’ , ‘line-through’.

---

### Abbreviation tag ( <abbr>)

- This tag allows the full meaning of an abbreviation to pop up when the abbreviation is hovered over. The user specifies meaning using the title attribute.

---

### p tag behavior when it has nested heading tags

- the browser automatically closes the `p` tag, when you place nested `h1 - h6` tags within it. strange behavior, but it’s good to keep in mind so your css doesn’t cause you to pull your hair out.

---

### questions

- what is the default value of the background repeat property in css?
- list the possible values that the `background-repeat` CSS property accepts
- what are the possible values for the background-size property? and what effect do they have on the background?
- what is the default background-size value?