Because the content of the web page is all inside the body tag, the body selector gives style rules for everything on the web page.

The border-style property determines what kind of border (solid, dotted, dashed, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property

The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property

The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property

Here is the code that is making the background of the page blue:

body {
  background-color: lightblue;
}

• body is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the body element is the entire page.
• background-color: lightblue; is the rule that makes the entire page light blue.
• background-color is the property. It explains what the rule is about, in this case the color of the background.
• lightblue is the value. It explains how the rule should be applied, in this case making the background light blue.

CSS includes most common color names (red, blue, green, etc.), and many uncommon ones. You can see a full list of CSS color names at W3Schools - HTML Color Names. You can still use colors that are not included in the named list, but you will need to use their RGB values. You can read more about using colors in CSS at W3Schools - CSS Legal Color Values

The background-color property determines the color of the background of an element. You can read more about the property at W3Schools - CSS background-color Property

You can see the answer to this question by adding a background-color rule to the p tag. The paragraphs will have the background color in the rule for the p tag, and the rest of the page will follow the rule for the body tag.

A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.

CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property.

Here’s an example of a rule-set that makes the text in an h2 tag blue and cursive:

h2 {
   color: blue;
   font-family: cursive;

In this example, h2 is the selector, color and font-family are properties, and blue and cursive are the values for those properties.

h2 {
   color: blue;
   font-family: cursive;

CSS includes most common color names (red, blue, green, etc.), and many uncommon ones. You can see a full list of CSS color names at W3Schools - HTML Color Names. You can still use colors that are not included in the named list, but you will need to use their RGB values. You can read more about using colors in CSS at W3Schools - CSS Legal Color Values

Here is the code that is making the image borders:

img {
  border-color: saddlebrown;
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
}

• img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
• border-color: saddlebrown;,border-width: 4px;,border-style: solid;, and border-radius: 10px; are the rules that make the border.

The border-style property determines what kind of border (solid, dotted, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property

The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property

The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property

Here is the code that is making the image borders:

img {
  border-color: saddlebrown;
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
}

• img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
• border-color: saddlebrown;,border-width: 4px;,border-style: solid;, and border-radius: 10px; are the rules that make the border.

The border-style property determines what kind of border (solid, dotted, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property

img {
  float: left;
}

• img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
• float: left; is the rule that makes the image float to the left.

The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property

img {
    width: 250px;
}

• img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
• width: 250px is the rule that makes the image 250 pixels wide. It also changes the height so that the image does not stretch.

The width property determines how wide the element will be. Most of the time, you will define in the width in pixels, which makes the element take up an exact amount of space on the screen. Defining the width will also change the height so that the image does not stretch, unless you have also defined the height. You can read more about this property at W3Schools - CSS width Property

The height property determines how tall the element will be. Most of the time, you will define in the height in pixels, which makes the element take up an exact amount of space on the screen. Defining the height will also change the width so that the image does not stretch, unless you have also defined the width. You can read more about this property at W3Schools - CSS width Property

Pixel, which is abbreviated px, is how elements are measured in CSS. It’s the size of a single point of light on the screen.

When the width of an images changes, the height must change by the same percentage, otherwise the image will stretch. For example, if you double the width of an image, you must also double the height, or the image will be stretched horizonally. When you only define the width or the height, the computer will automatically change the other property so that the image looks the same.

Here is the code that is putting extra space around the images:

img {
    margin: 10px;
}

• img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
• margin: 10px; is the rule that puts 10 pixels of space around the image.

The margin property determines how much space will be around the image. Most of the time, you will define in the margin in pixels. You can read more about this property at W3Schools - CSS margin Property

Pixel, which is abbreviated px, is how elements are measured in CSS. It’s the size of a single point of light on the screen.