Currently on 3rd day of my Java Full Stack : HTML and CSS

I would like to briefly share what I've learned

Flex Container

• It's a CSS layout to arrange and align items in a container

• To create a flexible container,set display:flex

Example

Container{
display:flex;
}

This allows you to use flexbox properties to control the layout of child elements

Styling a List

Example

ul{
display:flex;
gap:10px;
flex-direction:row;
justify-content:center;
}

Explanation

• gap:10px- To add a gap between flex items

• flex-directionproperty can be set to row or column to control the direction of flex items

• Additionally, align and justify properties can be used to control alignment,but only when display:flex is set

Section Styling

• section { border:1px solid } - adds a 1px solid line around a section

• border-width:10px - sets the border thickness to 10px

• border-radius:10px - curves the corners by 10px

Box Model

• *{ margin:auto;}- centers an element horizontally with equal outside space

• padding:10px - adds 10px inside space around content

• if no pixel is set,margin or padding applies to all four sides