# MFO₂: Week[2] CSS 3 init()
By [MaxFlowO₂ 终端浪人](https://paragraph.com/@maxflowo2) · 2023-01-01
---
So, let’s finally build from post to post… remember this [one](https://mirror.xyz/maxflowo2.eth/qwqE9zR6yjAMQkk5Ol7rzsF-OhUOpKlZOPhEdQXbrF0), aka last week?
MaxFlowO₂'s Hello World
Tell Chow I said, "Hallo"
Kind of bland if you ask me… here’s it [hosted](https://maxflowo2.com/mirror.xyz/week1.html). Noticing something… this might be one of those things you can [pick up on and see this week’s hosting](https://maxflowo2.com/mirror.xyz/week2.html). First thing first let’s make this more XML-ish by closing tags and what not. Now it’s this…
MaxFlowO₂'s Hello World
Tell Chow I said, "Hallo"
Also, we got to add CSS 3 the, “style sheets.” So, I made a directory called css, kinda blaring obvious here, and a file called week2.css. So since there’s three tags in there we are going to cover only three css elements, more to be added later.
body {}
div {}
h1 {}
So, how to style the body?
* background-color: (value)
* valid color name
* hex values
* RGB values
* background-image: url(URI);
* background--repeat: (value)
* repeat - x (horizontal repeat)
* repeat - y (vertical repeat)
* no-repeat
* background-position (location)
* background-attachment: fixed
* background: (color) (image) (repeat) (attachment) (position)
* other global variables
* padding
* margin
* color
* border
* border-radius
* font-family
* font-size (px/em)
* height (percentage/px)
* width (percentage/px)
* text-align
* text-shadow
* box-shadow (inset) (x-offset) (y-offset) (blur radius) (color)
List goes on and on, but below is a neat way to center an image that’s reactive to any and all backgrounds
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
background: url(../images/BG.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So what are we going to do? Well, let’s go black or #000000 for a background, and worry about the rest when we have to, since we don’t want a global for everything…
body {
background: #000000;
}
The next item would be the div, so let’s style this and make sure we got some margins/padding, curved edges, and a nice hard line with box shadows…
div {
background: #ffffff;
border: #505050;
border-radius: 10px 10px 10px 10px;
padding: 2em;
margin: 2em;
box-shadow: 5px 5px 10px violet;
}
Now how abut the font?
h1 {
font-size: 2.5em;
padding: 2em;
margin: 2em;
text-shadow: 1px 1px 2px #505050;
}
As you can see [here](https://maxflowo2.com/mirror.xyz/week2.html) versus [here](https://maxflowo2.com/mirror.xyz/week1.html) CSS makes the difference. This week was some basics… Did not want to get into reusable classes (week 3 writeup?). Probably some images for background, and get you really learning how to format data to be properly appeasing…
Thank you for the time,
Max Flow O₂
---
*Originally published on [MaxFlowO₂ 终端浪人](https://paragraph.com/@maxflowo2/mfo-week-2-css-3-init)*