1. CSS Layouts: Grouping Elements

2. Block & Inline Elements:
There are two types of elements in the CSS world:
“Inline” and “block”
A browser generally renders a new line after any “block” elements in the HTML.
Examples:
Inline: <input>, <a>, <img>, <br>, and a few others
Block: <p>, <h1>, <li>, <table>, and almost everything else.

3. Grouping Elements:
A grouping element lets you style multiple elements as a whole.
SPAN is used for grouping inline elements together
DIV is used for grouping block elements together

4. Width & Height Attributes:
Width and Height attributes are usually only reserved for “block” level elements but can also be used for IMG elements as well as audio and video.
You can control the size of a DIV element simply by modifying its width attribute.
A narrow DIV
You can also distort images by messing with these size attributes.
Resizing images will often look distorted because images are created initially as one size. Any adjustment may seem pixelated depending on the scale of the adjustment.

5. Overflow:
The overflow property specifies what happens when content overflows from the specified dimensions. The default value for the overflow attribute is “visible” which means the content will flow outside the height of the block element.
The “hidden” value will trim the content at the border of the block element.

6. Overflow: Auto
The “auto” value can be used to tell the browser add scroll bars if the content overflows out of the block element.
The overflow-y and overflow-x properties can be used to specify different settings for each direction.

7. Grouping Exercise: Copy the format of the webpage to the right:
Create a <div> for the paragraphs and style it appropriately.
Create a <span> for the first sentence of each paragraph, and style appropriately.
Resize the image to match the width of the div.
Create new HTML and CSS files to completes this assignment

8. The Box Model:
All elements are treated as boxes by the browser's rendering engine (either "inline" or "block" boxes).
A box consists of content, padding, border, and margin:

9. Margin:
The margin is a transparent area around the box - the background of the box does not apply to it. It separates the box from other elements.
15 pixels on all sides:
10px on top, 5px to the right, 3px on the bottom, and 20px to the left:
10 pixels on the top:

10. Auto Margin:
If the margin is set to "auto" on a box that has a width, it will take up as much space as possible.
A centered box:
A flush-right box:

11. Border:
The border property styles the edge around the box and is specified as "thickness style color".
A solid red border:
A thick dotted black top border:
2 different border styles:

12. Border Thickness:
Border thickness can also be specified with border-width property and can be different on each side (like margin).
10px on all sides:
10px on top, 5px right, 3px bottom, 20px left:

13. Border Style:
Border style can also be specified using the border-style property.

14. Border Color:
Border color can also be specified with border-color property.
Green on all sides:
White on top, black right, red bottom, green left:

15. Padding:
The padding property specifies whitespace between the border and the content.
15px on all sides:
10px on top, 5px right, 3px bottom, 20px left:
10px on top:

16. Box Model Exercise: Copy the format of the webpage to the right:
Add appropriate margin, border, and padding to the div element containing text.
Add appropriate border to the image.
Create a div for all of the page content and center that in the middle of the page.
Add appropriate border and padding to that div
Create a new CSS file for your HTML file you created in the last exercise