Trying Out Some Basic Styles

We will start with some very basic styles that change the background color of our page and tell the browser which font we want to use and what color it should be.

Our first selector will be the body. We type that in, then add an opening curly brace { which can be found next to the p on your keyboard.

We will define a background color, a font family and a font color. And then use the closing curly brace. }

We will also defines some style for our h1 tag. Give it a different color, size and alignment.

I also styles the div I used to group my content. I set a width for it - width: 85%; and had it sit in the center of the page by adding this style to it -
margin: 10px auto 10px auto;
I added these to my div selector styles.

All the declarations (property : value) are inside the curly braces. The property is separated from the value with a colon. After each declaration there need to be a semi-colon. I even add one to the last declaration, so if I decide to add another one, the semi-colon is already there.

If the semi-colon is left out from between the declarations, they will not work.

<< Go back to Demo 2D