- Introduction to the HTML Document and Uploading a Picture 2:39
- Editing Your HTML 2 objectives
- HTML Comments and JavaScript 2:08
- Changing Keywords 4 objectives
- Linking an External Style Sheet 2:15
- External Style Sheets 3 questions
- Background Color, Margin, and Padding 1:19
- Background Color, Margin, and Padding 3 objectives
- CSS Selectors 1:30
- CSS Selectors 3 questions
- What's JavaScript? 3:33
- What's JavaScript? 5 questions
- How to Get an Image Respectfully 2:46
- How to Get Images Legally on the Web 3 questions
Preview
Video Player
00:00
00:00
Background Color, Margin, and Padding
1:19Explore some styling techniques in CSS, including the background color, margin, and padding.
In this video we're gonna talk about how
to set the background and body styling.
0:00
Let's get started.
0:04
The first thing you find here on our style
sheet is the background color, and when
0:06
you hover over this hexidecimal number, it
matches the background color to our page.
0:11
You should change this color to something
you like.
0:16
So I've linked a few pages about
hexadecimal colors in the teacher's notes.
0:19
Next you have the body styling, even
though there's no text on our webpage,
0:23
the button images are all located inside
the body.
0:29
So we have to make sure they follow the
styling we want.
0:32
Here I've used two numbers to describe the
margin.
0:35
Margin and padding works in directions,
starting at the top and going clockwise.
0:39
Top, right, bottom, and left.
0:44
However, in our body styling.
0:46
We only use two values to describe the
margin, zero and auto.
0:48
This means the top and
0:53
bottom will have the same value, and the
left and right will have the same value.
0:54
The zero says there's zero top and bottom
margin, and
0:59
auto tells the browser to automatically
determine the left and right margin.
1:03
And set them equal.
1:08
That was a lot of information.
1:11
Stay tuned for a code challenge on how to
add a background color, margin, and
1:12
padding in your CSS.
1:17