- Introduction to My First Web Page 4:32
- Changing Your HTML 3 objectives
- Changing Your CSS 2 objectives
- Text Editors and External Style Sheets 3:46
- Text Editors and External Style Sheets 5 questions
- What's New in Your HTML 2:52
- New HTML Features 3 questions
- Editing an Image Tag 2 objectives
- Comments, Selectors, and Syntax 2:36
- Comments, Selectors, and Syntax 3 questions
- Color Keywords, Hex Colors, and Font Families 3:13
- Color Keywords, Hex Colors, and Font Families 5 questions
- Wrap Up 0:11
- CSS Review 5 questions
Preview
Video Player
00:00
00:00
Comments, Selectors, and Syntax
2:36Use an external stylesheet to break down how CSS is organized, including comments, selectors, and syntax.
It's time to dive into our CSS and our
external style sheet.
0:00
We'll begin by breaking down the
organization of CSS, including comments,
0:04
selectors, and syntax.
0:08
In your external style sheet, you will
find it's been nicely organized with
0:11
comments to help you identify which CSS
rules go with what HTML elements.
0:15
These comments should look different than
what you've seen in HTML, like up here.
0:22
Because in CSS, all it uses a forward
slash and
0:28
a star to open the comment, and a star and
a forward slash to close the comment.
0:31
In our first comment, you can see it says
Top Bar color here.
0:36
When you look at it in the page, it's this
color here on top.
0:41
Right now, it's only 20 pixels, but if I
change it to 100, save, and
0:46
refresh the page, you can see it's a much
thicker bar across the top of our browser.
0:52
This is a great time to point out the
structure of CSS.
0:59
For all the basic selectors we are using,
it's very consistent.
1:02
You have a [SOUND] selector, a [SOUND]
property and a [SOUND] value.
1:07
[SOUND] Selectors select a part of the
HTML document so
1:10
you can change how it looks.
1:14
Inside the [SOUND] curly braces, you have
a property.
1:16
This identifies what you want to change.
1:19
And lastly, you have a [SOUND] value,
1:22
which says how you want a particular
property to change.
1:25
Let's add a new property to our HTML
selector.
1:28
And we can start up here and change the
background.
1:32
Let's say background and scroll down to
color.
1:36
And let's change the whole thing to
orange.
1:41
And save that out and refresh the page.
1:45
And oh, man.
1:48
That is terribly ugly.
1:50
But it's just something you can try and
do.
1:52
Before I'll go, I'll change it to, let's
say, lightblue.
1:54
Save.
2:01
Refresh.
2:02
And that's a little better, but I think I
like the white better.
2:04
Another thing you might want to try and
play around with is the margin in padding.
2:07
Margin applies space outside of an
element.
2:12
Padding works in a similar way,
2:15
only padding applies space inside of an
element before the border.
2:17
Using margins and
2:22
padding are a great way of adding space
between elements on a webpage.
2:23
Feel free to play with these values a bit
on your own and come back for
2:28
a quick quiz before moving into colors and
fonts in the next video.
2:32