- Lab 38 - Page Layouts -
- -Goals
--
-
- Learn about the different CSS page layouts -
-
- All edges of the margin and the padding can be set all together or individually. For example:
+If you go into your browser, right-click and select Inspect you will get the developer tool + for analyzing and inspecting webpages in real time. Selecting the different HTML elements in the code, will highlight + their box model for you to see.
+You can see the margins, padding, and borders that each HTML element has.
+Borders have a few more properties that control them. The simplest way to construct a border
is to set a border-style. The values it can be are:
diff --git a/lab_036.html b/lab_036.html
index 718219b..5ac5abd 100644
--- a/lab_036.html
+++ b/lab_036.html
@@ -69,6 +69,17 @@
border-left.
Here's a few examples of the shorthand:
+Use the margin, padding, and border
+ properties to add some style to your website. Put space between elements or set them up to be properly laid out
+ in the next lab.
There are a lot of different properties we haven't covered that you could attempt to add to your page.
+ For example: border-radius, box-shadow, or
+ text-shadow.
+ Take some time to explore them here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
+
The final thing we'll cover in CSS are the display types and the display property. display is how you manipulate
+ HTML elements to present themselves in a specific way.
Most browsers have a default representation of each HTML element that consists of default font styles, + margins, padding, and display types. However, just like you can change font styles, margins, + and padding - you can change the display type to get the behavior and layout you want.
+There are four display types we'll focus on: inline, block, + flex, and grid. +
+Note: You can also do display: none which hides
+ the element.
Inline display does exactly what's on the label. When applied to to an element it treats it as in line + with other elements. The next element will be placed adjacent to the applied element without a line break and + the applied element will only take up as much width as necessary.
+Anchor links and emphasis are two HTML elements + which are rendered inline by default.
+Block elements, on the other hand, generate a block-level element. A block-level element
+ takes up the entire width given to it and generates with line breaks before and after the element. <p>, <div>, and
+ <h1> are all examples of block-level elements.
+
Note: Children and descendant HTML elements of an element using a display type
+ will inherit the display type of their parent. If your <div> has a
+ display: block then descendents of the <div>
+ will also have display: block.
Flex elements behave like block-level elements, however they are set up to be optimized for user interface + design and the one-dimensional layout of items.
+