Day 1

1. How to center an div element vertically or horizontally.

There are many ways to center an div element, few of them are:-

Method-1: Using margin:auto (For horizontal centering)

In this method, if the width of our element is less than 100%, we can just set its margin value to auto, and this will automatically center the element horizontally.

Method-2: Using css-flexbox (both horizontal and vertical centering)

Method-3: Using css-grids (both horizontal and vertical centering)

The below example is for horizontal centering, similarly we can center the element vertically.

or

The other method for both horizontal and vertical centering at the same time is using:-

place-items: center;

which is a shorthand for align-items and justify-items in order.

.center-inside-of-me {
  display: grid;
  place-items: center;
}

Method-4: Using transform: translate property( both horizontal and vertical centering)

See the below codepen by Gabriel Laroche for the example. Although using this method is not recommended and must be used only when the other methods are not working.

Method-5: using inset and margin:auto

This is almost similar to the previous method. The inset property is defined in the notes section below.

Method-6: abusing margin and padding

First we can remove the height from our parent element, so that it will become the same height as the child. Now, we horizontally center the child it using margin: 0 auto , then we increase the top and the bottom padding, so that the element seems centered.

Difference between position relative and position absolute

Summary:-

The relative property defines the behaviour with respect to the element's current position. The element is not removed from the normal flow of the document.

In absolute positioning, the element is removed from the normal flow of the webpage, and is positioned with reference to its first ancestor having position: absolute/relative (very imp)(like if you want to center an div2 inside a div1, then first you have to set the display property of div1 to be relative, then the display property of div2 to be absolute, and then this will work), otherwise with respect to the viewport.

See this article of medium to understand the concept in full detail.

Also see this standford slide

css-tricks article.

Css position: sticky property

This property is mostly used to make a sticky navigation bar at the top of your website.

• Best guide:- medium article.
• See this css-tricks article.
• MDN complete guide to position.

Summary:- Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

The threshold must be defined in the form of top/bottom/right/left.

All background properties

Background image

css-tricks article on background image

Short Summary:-

body {
  background: url(sweettexture.jpg);
  background: linear-gradient(black, white);
  background: radial-gradient(circle, black, white);
}

Setting a Fallback-color:- If the background image is not supported, then the fallback color will be loaded instead.

body {
  background: url(sweettexture.jpg) blue;
}

Multiple Background Images:- The image that you want on the top should be listed first. These may be used to put logo on top of a background, after changing some of the properties, as given in the second code block.

body {
  background: url(logo.png), url(background-pattern.png);
}

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

The codepens of each of these are:-

Background Gradients

css-trick's guide.

Please make sure that you go through the above guide, it is wonderfully made. I left the tricks section for later. Also cannot understand anything below the pie chart example.
Points that I noticed:-

• The default value of the angle in the linear-gradient (angle, color1, color2) is not 0deg, but it is 180deg. Play with the below codepen to understand more.

Background position

The first value is the horizontal position, while the next value is the vertical position. The lengths and pertencages are measured from the top left.

• The percentages have special meaning:- moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.

When four/three(this just means that the remaining one value is 0) are given, then they are interpreted as:-

.three-values {
  background-position: right 45px bottom;
}

This positions the background image 45px from the right and 0px from the bottom of the container.

.four-values {
  background-position: right 45px bottom 20px;
}

This puts the background image 45px from the right and 20px from the bottom of the container.

Multiline underline text-gradient animation

KevinPowell video link.

Background size

css-tricks article

The various ways are:-

1. Keywords:- cover full covering the entire container, even if it has to cut some parts of the image, or expand the image. contain respects the aspect ratio of the image, and shows the whole image, even if it has to leave some empty space.

2. One Value:- Example: 400px, this will be considered as width, and the height will be set to auto.

3. Two values:- First is the width, second is the height.

4. Multiple Images:- We can specify their sizes individually. Example: -
   

html { background:url(greatimage.jpg),url(wonderfulimage.jpg);
  background-size: 300px 100px, cover;
  /* first image is 300x100, second image covers the whole area */
}

This will follow the background stacking order.

Background repeat

css-tricks article

Few Notes:-

• In the padding property, the values are written in the clockwise order starting from top.

padding: 25px 50px 75px 100px;

1. top padding is 25px
2. right padding is 50px
3. bottom padding is 75px
4. left padding is 100px

• If position: sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• CSS element+element Selector:- Example:-
  

div + p {
  background-color: yellow;
}

Select and style the first

element that are placed immediately after

• The property top/bottom/right/left are measured with reference to its nearest positioned ancestor(just parent).

• Adding some shadow to a div element makes it look much much better. You will also learn some bad way to center an element inside its container. Also, we can put variables inside a CSS file!!!!.
  

• The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

Points that I still need to work upon

1. Background gradient (things left from the article).
2. Background repeat (round and space(some))