[2022.09.30(F)] CSS - Basics (3)

Padding

• Unlike margin, padding is a space that exist the border of a box to the inside.
• With margins, we can set spaces for elements inside the border. This will work even if elements are in contact with each other.
• Padding applies for both block and inline elements.

padding: 100px
padding: 150px 150px
padding: 100px 100px 100px 100px

Using ID's on CSS

• Instead of using elements themselves to style contents, we can use id selectors.
• Using id selectors makes styling in CSS much easier as we can selectively choose where we want our style to be adjusted.
• We use the # symbol for using an id on CSS.

#selector {
  background-color: blue;
  padding: 100px;
}

Border

• As the name says, the border property literally refers to the "border" of each element.
• We can increase the shape, size, and color of the border through CSS.
• Border applies to both block and inline elements.

border: 2px solid black; 

Classes

• Unlike an id, which is unique to a single element, there is also a class selector which can be shared by more than one element.
• For classes, we use the dot(.) symbol to choose the selector.
• An element with a class selector can also carry multiple classes at once.
• Most of the time, classes are used more than id's.

<span class="selector">hello</span>
<span class="selector selector2 selector3 selector4">hello</span>

.selector {
  background-color: tomato
}

Inline-Block

• An inline-block allows you to keep the width and height of a block, while also enabling elements to be next to each other (just like span).
• However, since inline-block is an old method, it has many bugs (ex. random spaces between and outside elements).
• Overall, inline-block does not support responsive design.

selector {
  display: inline-block;
}

Flexbox

• Flexbox was designed to easily move boxes from one position to another.
• The parent element (flex container) is responsible for moving the child elements.
• Applying the display property to flex unlocks additional properties including justify-content (horizontal a.k.a. main axis) and align-items (vertical a.k.a. cross axis) that can be used to set elements even more dynamically.
• Situationally, we need to give more spaces on the webpage in order to set the boxes positionally.
• If needed, we can use the vh (viewport height) measurement unit to set the width and height of the website.

body {
  height: 100vh;
}

selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

• We can also use the flex-direction property to flip the direction of the boxes from a row to a column.
• It is important to note that at this moment, the direction of the main and cross axis is also flipped.
• Additionally, the child elements themselves can also become flex containers and can do the exact same process.

selector {
  flex-direction: column;
}

• The flex container uses the flex-wrap property to keep the initally width and height of the boxes regardless of browser size (the opposite can be done as well).

selector {
  flex-wrap: wrap;
}

• Although not used much, we can also reverse all our properties.

selector {
  flex-direction: reverse-column;
  flex-wrap: reverse-wrap;
}