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.