- CSS and HTML 4:37
- CSS Selectors 6:26
- CSS Properties 5:20
- CSS Selectors and Properties Quiz 6 questions
- CSS Colors 4:19
- CSS Box Model 12:47
- Text and Fonts 7:32
- Colors, Box Model, Text, and Font Quiz 6 questions
- CSS Positioning 6:06
- CSS Images 3:31
- The Magic of CSS 2:31
- CSS Fundamentals Quiz 6 questions
Preview
Video Player
00:00
00:00
CSS Properties
5:20Learn the fundamentals of CSS properties and values, including color, background, and borders. Then, put your knowledge to the test by applying styling to selected elements, such as setting backgrounds, borders, and text colors.
Now that we know how to select HTML
elements, we can learn how to style them.
0:00
In this video, we're delving into
the world of CSS properties, and
0:06
we'll be introducing some common and
0:09
easy-to-work-with properties
to start our journey.
0:11
Let's have a look at our CSS syntax again.
0:16
We learned about the selector
in the last video, and
0:19
now we'll learn about what
goes in the declaration block.
0:22
The declaration block contains
declarations which each contain a CSS
0:26
property name and value, separated by
a colon and ending with a semicolon.
0:31
CSS properties allow
you to control various
0:37
aspects of your webpages appearance.
0:39
To showcase this, we'll introduce three
super common properties that you'll use in
0:43
almost all of your future projects.
0:48
Color, background color, and border.
0:51
The color property defines
the text color of an HTML element.
0:54
The syntax here is super simple.
0:58
We simply have to name the color property,
followed by a colon, and
1:00
the desired color such as red,
and conclude with a semicolon.
1:05
The background color property controls
the background color of an element.
1:10
The syntax here is as simple as color,
1:14
just named the background color
property followed by a colon and
1:17
the desired color such as green and
finishing it off with a semicolon.
1:21
The border property allows you to
find the border around an element.
1:26
The syntax here is a bit more involved,
but here's the breakdown.
1:30
We start off just like the other two, name
the border property followed by a colon.
1:34
Now, the border property has three values,
color, width, and style.
1:40
We simply have to declare these values one
after another with a space in between.
1:45
For example, a border that is black with
a width of three pixels and solid style.
1:51
There are many types of border
styles that we can choose from,
1:57
such as solid, dashed, and dotted.
2:01
Check the teacher's notes to
find out more about styles.
2:03
It also doesn't matter the order
that you place them in,
2:07
we could have set the value to solid black
three pixels, and that would work too.
2:10
Let's play around with these three
properties to see how much just a little
2:16
CSS can change the look of our web page.
2:20
In the universal selector
code block that we wrote,
2:23
will give everything a white text,
a black background color,
2:27
and a white solid border
that is three pixels wide.
2:32
To make everything much nicer to look at,
2:39
we can also separate each
declaration into its own line.
2:42
This is purely visual as the semi-colon
is what separates each declaration
2:47
from the others.
2:52
Let's save the file and
refresh our web page.
2:54
We can see that everything now has
a black background and white text, and
2:58
is surrounded by a white border.
3:03
See how much our webpage has changed
with just a few lines of CSS.
3:06
However, it's very rare that you'll
want everything to have the same CSS
3:11
properties.
3:16
So let's remove these styles and
apply some that are more applicable.
3:17
Using the body selector code block that we
wrote, let's change the background color.
3:22
I'm feeling a rosy brown, but
you're welcome to try other colors.
3:27
Again, let's save our file and
then refresh the web page.
3:32
And we can see that the body which
takes up the entire browser view is
3:37
now a lovely rosy brown.
3:42
Next up, let's use the grouping selector
that we wrote and give our header,
3:43
footer, main and div, some styles.
3:48
Pause this video and
try to apply the following styles.
3:51
A black solid border that is one
pixel wide and a white background.
3:55
How did it go?
4:04
Here's what I did,
I set the background color to white,
4:05
then set the border property to
a solid black, one pixel wide border.
4:09
Let's check this out by saving the file
and refreshing our page, great.
4:15
Now, we see that our header main, div, and
4:20
footer tags all have a white
background with a solid black border.
4:23
Now, it's your turn to write
a full CSS code block.
4:28
Pause this video, and give all
the anchor tags the text color of brown.
4:32
I'll see you in a bit.
4:37
Were you able to do it on your own?
4:41
Here's what I did.
4:43
At the bottom of our file, I selected all
the anchor tags by selecting the a, tags.
4:44
Then, in my declaration block,
I set all the text color brown by using
4:51
the color property and
setting its value to brown.
4:56
As always, let's save the file and refresh
the page to check out what we've done.
5:00
Nice, all our links now
have a brown text color.
5:06
Now that we know how to write declarations
using CSS properties and values,
5:10
let's dive into the nitty gritty of CSS
and what it can do for our website.
5:15