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

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 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.

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.

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 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 {
  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 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 {
  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

Here is the code that is making the image its current size:

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 height 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.

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.

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.