ID:
PW:
``` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660028345662/dVNoPEZeA.png align="left") > 'Login Page' and 'Enter your ID and password' are in a big box. To make the box visible, you need to name it first. - Name the box and change its style. ```ID:
PW:
``` ```ID:
PW:
``` - Change the color of mytitle to green by using `background: green;` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029227347/lnAvin6-8.png align="left") - Change the size of the green box by using `width: / height:` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029245525/dT2YLcudD.png align="left") - Change the text in the box to white by using `color: white;` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029268701/fglWoNBrP.png align="left") - Align the text in the box to the center by using `text-align: center;` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029291323/xwS8PWp2h.png align="left") - Change the background to an image by using `background-image: URL("");` `Tips: When adding an image as a background, always think about these three codes below` - background-image: url("") - background-size: - background-position: Image URL ; `https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029318553/nOCscGX1Y.png align="left") **It does not show the proper image!** > it's because the image is too big for the box size. To solve this, you need to adjust the size of the box. - Add `background-size: cover;` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029346195/7webzuz61.png align="left") - Move the image to the center by using `background-position: center;` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029412828/ZZ3GcU0oZ.png align="left") - Make the border round by using `border-radius:` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660029572679/eVEDgJOOm.png align="left") - To add margin **inside of the box** you need to use `padding` not `margin` > Tip: `margin` is for **outside of a box**. `margin: 20px` means add 20px of margin all sides and it is the same as `margin: 20px(T) 20px(R) 20px(B) 20px(L)` ```ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660030796886/fXQg1itr_.png align="left") - How to move the box to the center of the page? > it means having the same margin at the left and right sides. > If you use `margin: 0px auto 0px auto;` only the box will move, so you need to group(`ID:
PW:
``` ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660031158982/qqX9EG5NH.png align="left") - Group all the objects you want to move by using `ID:
PW:
ID:
PW:
ID:
PW:
ID:
PW:
ID:
PW: