Up next in 10
Want to master CSS from scratch? 🚀 This complete CSS tutorial is perfect for CSS beginners who want to learn styling step by step in a simple and practical way.
In this video, you’ll learn how HTML CSS work together to design beautiful and responsive websites. I’ll explain every important concept with real examples and easy-to-understand CSS code so you can follow along without confusion.
You’ll also discover some powerful CSS tricks that will help you design like a pro — even if you’re just starting out! 💻✨
Whether you're a student, beginner developer, or someone switching careers, this tutorial will give you a strong foundation in CSS.
🔹 What You’ll Learn:
âś” CSS basics for beginners
âś” How to connect HTML CSS properly
âś” Writing clean and structured CSS code
âś” Useful CSS tricks for better design
âś” Styling text, colors, layouts, and more
Start your web development journey today and become confident with CSS!
Don’t forget to Like 👍, Comment 💬, and Subscribe 🔔 for more web development tutorials.
#csstutorial #cssbeginners #htmlcss #csstricks #csscode #webdevelopment
Show More Show Less View Video Transcript
0:01
Hi friends, welcome to tutor funny
0:03
channel. Today I'm going to start the
0:07
CSS. Okay, HTML with CSS from the
0:11
scratch. So CSS are needed for the web
0:15
page styling. Without of CSS, we can't
0:18
style the website. Okay, even though if
0:20
you have make make the website, you must
0:22
style it. So website styling is very
0:26
important part for CSS. So first I'm
0:28
going to go to create one web page.
0:33
You can name it as index.html.
0:36
Okay. This is my VS code editor. If you
0:37
have not installed the VS Codator you
0:39
have to install them. So here in VS Cord
0:41
editor hold on the shift key down and
0:43
press one. You can get this mark. Click
0:46
on it. The you will be able to import
0:49
this one. All the HTML standards. Okay.
0:54
So inside the body we are going to build
0:57
the website. So first what I'm going to
1:00
do is I'm going to make the style. Okay.
1:02
So from the scratch what you're going to
1:04
do is I'm going to go to
1:07
write the heading H1.
1:11
You tell them heading.
1:14
Okay. This is called as a heading.
1:18
Now I'm going to under the heading I'm
1:20
going to write a paragraph. So I write
1:22
paragraph. Uh I'm going to go to
1:26
uh get some
1:30
I'm going getting some uh dummy text. So
1:33
dummy content I'm just copy this some
1:35
dummy content for my web page. Copy this
1:38
back to my web page and paste to that
1:41
inside the paragraph. So I'm going to go
1:44
to that
1:46
uh you have to press tap key to align
1:49
it. Okay. Now what you're going to do is
1:51
you have to done it. So what I'm going
1:53
to do is now if you save it
1:58
and bring back to the application you
2:00
have to this is your web page. Double
2:01
click on it.
2:12
Now you will be able to say this is your
2:15
heading and paragraph. Okay. Simple. Now
2:20
what you're going to do is this is a
2:21
plain HTML and CSS. Now if you are going
2:25
to implement the styles so how to
2:28
implement so it's very easy to implement
2:31
the styling part. So so in order to do
2:35
this we have to first I'm going to go to
2:41
press the space bar on your keyboard and
2:43
you have to type style.
2:46
You have to implement this one. So here
2:49
we have to have a styling. So first
2:52
style
2:54
I need to change the background. So how
2:58
would be change? So you there is a
3:01
property called background color. Select
3:04
the appropriate color what you need. So
3:06
this is a color of the background of the
3:09
heading only. I have implemented for
3:11
heading only not entire paragraph and
3:15
all. I just implement the background
3:17
color for the head. Okay. Style
3:20
background color. What is the color you
3:22
need? You simply you have to pick up the
3:24
color from the palette. Okay. Simple
3:27
your colon here. There are
3:30
various colors are there. You can get it
3:33
out of this. You can get one out of
3:35
this. So uh so here if you have a some
3:39
custom color that also you will be able
3:41
to select that. Okay. Okay. So you have
3:43
to go to the go Google it and here here
3:45
also you can if you implement the color
3:47
here also there has a palette is coming.
3:48
If you click on it palette if you want
3:50
to implement this color you can select
3:52
this color as that is your wish. What is
3:55
the color you need you will be able to
3:57
select the color what you need according
3:59
to your web page requirements. Okay.
4:02
Right.
4:04
Now let let's test out
4:08
save all. Bring back to the application
4:10
again. refresh them here. Background
4:14
color has been changed as a
4:17
this scal. Okay. Now I feel to change
4:22
the four font color as well. So how to
4:26
change the font color as well? So here
4:29
in in between this double quotation mark
4:34
press space bar we have another property
4:37
which called as
4:39
color.
4:41
color here. You can get the property
4:42
color. So
4:48
you can write this one colon and you can
4:50
write color here. This color here color
4:52
pick up the color. Uh what is the color
4:55
is matched to this blue or foreground
4:58
color is black. So let's select as
5:00
black. It would be the foreground color.
5:03
Font color. Okay. It's foreground color
5:05
mean it is a font color. Let's sorry
5:09
back. This is a default color. No back.
5:11
Black is any other color. If you change
5:13
it red
5:16
is a color red. Let's change.
5:20
Check the color has been changed as a
5:22
red. It's very simple. Okay.
5:27
Okay. Okay. It is very very simple. If
5:30
you want to do any modification, it is
5:32
effective. Okay. It's very simple stuff.
5:36
Okay.
5:38
Okay. Now what you're going to do is
5:41
this is the simple way to we have to
5:44
implement the styling. This this is
5:46
called as inline CSS. It's called as a
5:49
inline CSS. Okay. You simply you have to
5:52
style it. Whatever style you need, you
5:54
can implement it. Now I'm going to
5:57
implement the style as a four font
5:59
family. I want to change the font
6:01
family. How would I change it?
6:05
can here keep in your mind after done
6:08
any property.
6:10
Okay, don't forget to close the
6:13
colon mark if it is okay. If you if you
6:16
put the colon mark that style has been
6:19
after that you are moving to the another
6:20
styling part. You have to implement
6:22
another property which is a font family.
6:24
Select the font family. Here you have to
6:26
select the font part font you go along
6:29
with your website. So now I'm going to
6:31
go along with my font as this one.
6:35
Franklin this one. Okay, this is
6:37
styling. What are the what is the
6:38
meaning of this one? Okay. If the
6:42
okay uh sometime it may be this font is
6:45
not available in your machine. It is
6:48
take care of this. If it is not
6:50
installed this one it is take care of
6:52
it. This font is always available in
6:53
every computer. So that it is that it it
6:56
will be take care of the font. Okay.
6:58
That's why that there are four fonts
7:00
there are displaying automatically. If
7:03
you have to keep only this yeah other
7:04
things you have to get rid of that. uh
7:07
so that let's we have to remove them
7:09
okay at the moment I keep as it is okay
7:11
so let's save all and bring back to the
7:15
application again
7:19
okay so here it's it it has been changed
7:22
font family has been changed simply it
7:24
has been changed okay what is the font
7:26
you are gave here according to the font
7:28
the font family has been changed okay
7:31
very simple okay so so on you have to do
7:36
any every changes. So if you want to uh
7:39
increase the size of the font, you'll be
7:40
able to increase the font size. There is
7:42
a property called font size here you can
7:45
implement as you have select as 50
7:46
pixel. Control S to save and bring back
7:49
to the application again. You'll be able
7:51
to see here font size has been changed.
7:55
Okay, this we have to do the
7:59
CSS part very simple way. Okay, very
8:03
simple way we have to do the HTML with
8:07
CSS. Okay, this is completely HTML with
8:09
CSS. Very simple way to be out study
8:11
rather than we have to go go through the
8:14
many tutorials and all this is very
8:17
simple stuff. Okay, first you study
8:19
inline CSS the okay after that you have
8:22
to write other you can go through that
8:25
linking and every part you can cover
8:26
about that. Okay. So, first you have to
8:29
even you don't you don't have a
8:31
knowledge about this one, you can't go
8:33
to that uh advanced CSS. Okay. This is a
8:36
simple way the font. How do you how do
8:40
we styling? Okay. First you have to
8:45
understand that one. Right. This is a
8:47
very simple uh beginner friendly
8:51
uh font styling tutorial. So very
8:54
simple. Okay. Okay, we have what but
8:55
what but we studied that so far how to
8:58
change the background color how to
9:00
change the font color how to change the
9:02
font family as well and how to change
9:04
the font size or these are the things we
9:08
have studied so far this is very crucial
9:10
things uh every web designer uh should
9:14
aware about that one so when when
9:16
someone interesting in uh web
9:19
development part and web designing part
9:22
this must this is very must. Okay, this
9:25
is this is simple styling you must know.
9:27
Okay, so the same thing you have to
9:29
implement this here as well. The styling
9:31
here also style. Okay, so here so I the
9:35
uh this heading color I have changed it.
9:38
Uh the paragraph color I keep as it is
9:42
the that uh black is the default color
9:45
that is that would be the uh good one.
9:48
Okay. So now here what I'm going to do
9:50
is I'm going to I feel to increase the
9:53
font size as well. So I'm going to write
9:55
font size. I'm going little bit I'm
9:58
going to increase it uh 40 pixel.
10:02
Control S to save. Bring back to the
10:04
application and check. It's it is not uh
10:08
good. Let's increase it 16.
10:13
Okay. Now you can see it's look fine.
10:16
Okay. Everything we can manage by the
10:19
entire website we can manage by this
10:22
style. It is works correctly. Okay.
10:25
Simply they implement. If you want to
10:26
change the font size, you can uh
10:29
implement this property. If you want to
10:30
change the background color, you have to
10:32
implement this property. Everything they
10:34
implemented simple rather than you have
10:37
to uh do the advanced style. So this is
10:39
the important stuff you must study. Uh
10:42
so that uh if you want to have a any any
10:45
other things you have to go here line
10:48
height so line height in between this
10:51
sentence you can see what the meaning of
10:54
line this is another property this also
10:56
that here in between the sentence we
10:58
need a height so it implemented as a
11:01
one g what happen you can see it is a
11:05
you can see that what happen here simply
11:09
it is the one
11:12
7
11:14
this is a simple subile everyone using
11:17
this kind of a space here this spacing
11:20
it is managed with this line spacing if
11:22
you feel 1.5 is enough
11:25
okay so that the web page we have to
11:28
okay okay okay this is in between these
11:31
two sentences we need a gap that is
11:34
called as line because this is very
11:35
important for when you when the user
11:38
come across your website they go through
11:41
articles and start to read. They don't
11:44
have dist. So they have to have a clear
11:47
understanding uh clear land uh read
11:50
reading we have to convert transform
11:52
them as a clear reading uh platform.
11:56
Okay. So that we have to have a good
12:00
alignment. Okay. This is uh this is very
12:03
important when you are you must focus on
12:05
these all the things when you are uh
12:07
creating the web page. So that we have
12:09
that uh spacing is very much so that
12:11
this face uh when when you write the
12:14
paragraph you have to keep remember this
12:16
property which called as line height.
12:18
This is very important property that
12:19
there are lot of blocks I am uh I go
12:22
through it no one can no one can
12:24
implement this one. This is very
12:26
important line height is a property.
12:29
Okay. Uh okay. Today uh tutorial is
12:34
uh we we can finish the tutorial. Next
12:37
tutorial if you feel this tutorials uh
12:40
much helpful you are to learn CSS with
12:45
HTML journey please comment it please
12:49
comment it and comment it uh like it and
12:52
subscribe everything. Thank you for
12:54
watching.