CSS

The drive home from taking Alex to practice was crazy. The freeway entrance where I usually go was closed. So I ended up having to keep going straight onto the freeway going west. I need to go east. I got off at the next exit and drove back around the long way to get home. 

Most of my coding today consisted of CSS. I don’t mind CSS but it has so many properties that you can’t possibly remember it all. But I have the basics down. My notes today consist of some new elements that I didn’t know about and that I believe are pretty important.

Resources: Css tricks, FreeCodeCamp, w3schools

Border-radius: Allows you to add rounded corners to elements.

#example1 {
  border: 2px solid red;
  border-radius: 25px;
}

Box-shadow: Add shadows to different elements.

#example1 {
  box-shadow: 5px 10px;
}

Filter: Applies different properties to elements.

img {
  filter: blur(5px);
}

img {
  filter: grayscale(100%);
}

Overflow: Specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

• visible – Default. The overflow is not clipped. The content renders outside the element’s box
• hidden – The overflow is clipped, and the rest of the content will be invisible
• scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto – Similar to scroll, but it adds scrollbars only when necessary

Transform: This property allows you to rotate, scale, move, skew, etc., elements.

div.a {
  transform: rotate(20deg);
}

div.b {
  transform: skewY(20deg);
}

div.c {
  transform: scaleY(1.5);
}

CSS * selector: Selects all elements.

* {
    background-color: yellow;
}

Text-transform: Transform texts within different elements.

div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}

Flexbox: A one-dimensional CSS layout that can control the way items are spaced out and aligned within a container. Flexbox has a main and cross axis. The main axis is defined by the flex-direction property, which has four possible values:

row (default): horizontal axis with flex items from left to right
row-reverse: horizontal axis with flex items from right to left
column: vertical axis with flex items from top to bottom                                                                                                  column-reverse: vertical axis with flex items from bottom to top

Complete Guide to Flexbox

Justify-content: Determines how the items inside a flex container are positioned along the main axis, affecting their position and the space around them.

div {
  display: flex;
  justify-content: center;
}

Object-fit: The image keeps its aspect ratio and fills the given dimension.

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

Gap: Sets the gap between rows and columns.

.grid-container {
  gap: 50px;
}

::after: This pseudo-element creates an element that is the last child of the selected element. 

Insert content after every <p> element, and style the inserted content:

p::after {
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}