for important pieces of code that almost never change. Select from the list the tutorial of interest
Flexible height
The CSS property height is usually used to define a fixed height in px for a DIV. Use instead: height: fit-content; to define a flexible height that depends on the content of the DIV
Making space: Padding or Margin?
Use padding to create space between the content of a box and the box's edges
Use margin to create space between boxes
Centering a DIV element
When centering a DIV element, give it a width and use: margin: auto in the CSS of the DIV element
Centering any element using display: flex;
A child element can be centered horizontally, vertically, both by giving display: flex; together with one or two of the alignment's properties to the parent element
Dealing with images
To scale an image correctly and make it responsive, put it inside a parent DIV. Set the width of the DIV as you like but do not set its height (you could use instead display: table) Set the width (and the height only if you used display: table) of the child image at 100%
Dealing with images alternative method
To scale an image correctly and make it responsive: set it to be display: block set the width of the image as you like but do not set its height
Fixed (NON-responsive) background image
If you want a background image for the body that doesn't scroll you need: the image to be a real html element (not a background image) the image to be fixed and fill the entire screen the image to be sent to the backgroung
Fixed (responsive) background image
If you want a responsive background image for the body (and that doesn't scroll) you need: the image to be the background image of an empty DIV the DIV to be fixed and fill the entire screen the DIV to be sent to the backgroung
Flexbox layout - one row of boxes
Design a single row of boxes (flex items) in a parent flex container:
- The (DIV) flex container must have display: flex; - You can set an equal space between the (DIV) flex items by using justify-content: space-between; in the flex container - Set the width of each flex item in such a way so that the total of the widths is less than 100% (of the parent div)
Flexbox layout - more rows of boxes
Design more rows of boxes (flex items) in a parent flex container:
- The (DIV) flex container must have display: flex; flex-wrap: wrap; - You can set the space between the (DIV) flex items by using justify-content: space-between; or justify-content: space-around; or(better) gap: #px in the flex container - Set the width of each flex item as you like, the browser will arrange them in rows
PYTHON TUTORIALS
Easy ready tutorials
for important pieces of code that almost never change. Select from the list the tutorial of interest