Up next in 10
CSS Background, Fonts, Margin | CSS Course for Beginners
3K views
Oct 16, 2024
CSS Course for Beginners: CSS Properties. In this video, you'll learn about CSS Background, Fonts, and Margin. Get Certification in Web Development: https://www.tutorialspoint.com/certification/web-developer-guide-for-2022/index.asp Use coupon ""YOUTUBE12"" to get “FLAT 12%’’ OFF at Checkout. Quality Learning to UPSKILL yourself only at TutorialsPoint. Timestamps: 00:00 Introduction 00:14 background color property 00:40 background image property 02:40 fonts 09:17 margin property CSS background: https://www.tutorialspoint.com/css/css_backgrounds.htm CSS fonts: https://www.tutorialspoint.com/css/css_fonts.htm CSS margin: https://www.tutorialspoint.com/css/css_margins.htm In this CSS course for beginners, you’ll learn important CSS concepts step by step to help build beautiful, responsive websites. This series will cover essential topics like Flexbox, Positioning, the Box Model, Layout, Typography, Colors, Project, and more to help you master web design. Whether you're new to coding or looking to refine your skills, this course will guide you through each concept simply, ensuring a strong foundation in CSS.
View Video Transcript
0:00
Hello and welcome to Tutorials Point
0:02
In this video, we will learn about CSS background properties. We will also learn about CSS fonts and margin property
0:10
So without wasting time, let's get started. Starting with the background properties, the first property we have already used it multiple times is the background color itself, right
0:20
Now, we can use any color here in the form of this hash and then the red, green and blue values
0:26
or we can use the RGBA format or the HSS format, right? the recommended is to use
0:31
RGBA or just use this or just anyone you like, all right? Now, this was
0:36
the first type of background property that we have already used. Now, the
0:40
next background property that we are going to talk about is going to be
0:43
a background image. How can we do that? For example, let's go to index.t.html and let's
0:50
create a new dev or we already have this deal. Let's target this one
0:55
Now, for this deal, let's give it a width of, let's say 600 pixels and a height of let's say 500 pixels something like this let's just remove this background
1:08
color okay so we have this table now I want to use something called as background image property
1:14
so I'll write background image and in here we are going to specify location or we will call it
1:21
URL of the image now I already have an image I'm just going to bring it into my folder
1:26
and this will be the image let me just bring it here and we have this my image of trees or something
1:36
Now to have this inside the URL, what we are going to do is I'm going to write my image inside the codes
1:44
And see, once I, let me just close the explorer and once I save this, as you can see, we have this image inside our deal
1:52
So this is one of the properties that we can use. That is background image and then we can insert an image here
1:58
Similarly, if we want this for our entire page, I'm just going to cut it and save it
2:04
And right now we will select the entire HTML document and here I'm going to insert the image
2:08
If I save it, the whole page is covered with this image. Now, as you can see this, there are some repetitions or some dots or, you know, some weird
2:17
issues with these images, but these are nothing but CSS properties which we are going to talk about shortly
2:22
So let me just put it back to where it was inside our dev, something like this
2:27
So this property is called background image and is used to insert images into our HTML elements
2:33
After this, we also have many other background properties that we are going to use
2:37
But when we will start doing a project, then I'll show you many other background properties
2:41
So don't worry for now. We will use those properties to show how to implement them in real life situations
2:48
Right. So let's move on to CSS fonts or typography. So talking about CSS fonts, let me just remove this image, right
2:55
I mean, it's not looking that good. it was just to show you what different properties are
2:58
We are going to implement them in projects later on. So let me just comment it out and it gone Okay Now let talk about the font families Now there are different types of font families in CSS You know these fonts that we are talking about right
3:14
So if we go to simply Google and we search for a font families and hit enter, you will see that there is this website of W3.org
3:25
If we click on it, as you can see, it talks about how there are different types of fonts, namely Serious
3:31
San Serif, Monospace, Curseo, and Fantasy. All right. Now, here you can see the font name, that's Ariel, and it is, and the fallback is San Serif, right
3:41
So basically, this is the font family. This is how our browser looks, and this is how it will look if we apply this font family
3:48
So basically, the main types here are serif. Now, first one, this serif, basically, they have a small stroke at the edge, if you would notice
3:57
So the serif one, let me just scroll down. As you can see, the serif fonts, they have this smaller stroke at the ends, as you may see for this T, for example
4:08
And the San Serif, you just observe this T for the serif
4:13
You see, it has strokes on the corners. While as for the San Serif fonts, they don't have strokes
4:20
Observe this T and this T, you will get the difference. So that is what it is, the difference between serif and san serif
4:27
Next, we also have the monospace fonts. They basically give you that mechanical or coding look, you would call it, or that typewriter look for your font, right
4:37
So these are the monospace fonts. Then we have the cursue fonts that basically try to imitate human writing itself, all right
4:47
And the last one is fantasy fonts, you know, different types of fonts with different curves and etc., right
4:53
Fancy stuff. So we are going to use all of these fonts
4:57
we can actually easily use them. We'll just go back here and we have the normal font here right now
5:04
Now if we want to get a font, just simply go to Google and just search for Google fonts
5:10
Because that's the easiest way to get any type of fonts. And here is the website, fonts.com
5:16
I'll just click on it. And once we click on it, as you can see, there are many fonts that we can choose here
5:23
So let me just select this roboto for font. this is a very famous font so I'll just click on it and as you can see it just gives us the demo
5:33
of what it looks like and it has different you know basically font weights right and bold we have
5:40
thin we have light we have light italics we have regular we have medium italics we have bold
5:46
different stuff right so how do we get this right if we click on get this font as you can see
5:52
here is an option to get embed code we can also download it but the best part is to just use embed code Now here here we have the link Okay so I going to use this link or we can use the import So I just click on here to import and I just copy this inside our style So basically it is asking to put this stuff put this line into our CSS file That is the style file So just copy this at the rate import
6:19
Right click to copy. And in our CSS here, for the body, I'll just target the whole body
6:27
And I am going to write. But before targeting the whole body at the top, I'm going to paste this
6:32
So I'll just paste this and save it. And if you check, nothing will happen
6:36
So what do we need to do next? We need to use the font family property
6:40
So let's go back here and check as you can see we need to use this font family property
6:46
So for example, if I just go to my body and let's go back to the document and for the body, I can write something like font family
6:56
And what font family do I want that I already got from Google fonts
7:01
That is this Roboto. So here I'm going to specify a Roboto
7:07
I'll write Roboto something like this. And in case the Roboto doesn't exist, we need to specify a fallback font
7:15
If by any means the Roboto font is not available or the Google servers are not responding, right
7:21
So in that case, just use any type of Sanserif font because Roboto is a type of sans serif font
7:26
So I'll hit Enter and once I save it, as you can see, our font changes to sans serif
7:32
right and as I told you earlier Sandserif have no strokes so they give you a minimal
7:39
and modern look to your website alright so now our whole website
7:43
will use this Roboto font similarly there are thousands of font if you go here to
7:48
font you have multiple fonts that you can use for completely free
7:54
in your website as you can see we have different types of fonts here you can check all of them
7:59
we have Poppins jersey Mukta and whatnot. We have a lot of open sense
8:05
We have jerseys, different types of right. We have Roboto that we already used
8:10
So we can use multiple fonts for example. Now, let's say I have this paragraph here, right
8:15
I want to use a different font for it. For example, we can do that too
8:19
It's very simple. Let's just select that font. For example, let's just choose one font
8:27
Which font should we use? Okay, let's say I want to use this font for my paragraph. I'll just click on it
8:34
and then I'll just say get font and then get Mbit code and here
8:40
I would want to copy, I would select this import and then I'll copy this line. After I copy this line I'll paste it here
8:49
Okay, once I'll paste it and then I would want to just simply say
8:53
font family right and the font family is this. What is this called? This is called
8:59
Sevilana So I going to use this one So this is a type of cursive font that we talked about earlier I just copy And I going to go into style And for my paragraph I targeting So all of my paragraphs the font should be seveliana Now once I save this as you can see the font change After the font family we will talk about margins so let me just zoom out okay now what are margins basically as you can see we have different elements we have
9:27
h2 then we have this deal with different elements inside what if i want to have some space between
9:33
those elements what i'll do is i'll use a property called as margin all right so basically margins
9:39
is used to create space around elements all right and these are outside any borders don't worry what i mean by
9:45
outside any borders. We'll discuss all of these. What is the relationship between borders and margin
9:50
In the next video, we will talk about CSS box or basically a CSS box model
9:59
So here, for the H1, for example, I want to have some space between this element H1 and this two right here
10:05
So I'll simply say margin and then I'll write how much I want. For example, 20 pixels
10:12
When I save it, as you can see, we have a margin of 20 pixels
10:17
But you may say that we have this gap here from the above, from the right and from the bottom
10:22
Now, this margin basically means that the margin will be from all four sides, from top, bottom, left and right
10:29
Okay? Now, to show it more clearly, let me just say 40 pixels. As you can see, we have a margin top of 40 pixels, bottom of 40 pixels, right 40 pixels and left 40 pixels
10:40
But to be more specific, I don't want a margin from top, right and left
10:44
I only want it from bottom. So I'll cut this property and instead of writing margin, I'll write margin and then I'll
10:51
specify bottom with it. Something like this. And then I'll write 40 pixels
10:56
If I save it, as you can see, the margin is only from bottom. We can also increase it
11:01
Instead of 40 pixels, I will write 100 pixels. So if I save it, as you can see, now there is much more margin
11:08
okay so this is a bit about margin and we can have it for multiple elements for example right here between
11:15
this do and this paragraph and this heading we need some margin so just about the paragraph i can
11:21
easily say now i want margin on top of the paragraph so i'll simply write something called as
11:28
margin and then i'll say top and let's say 50 pixels once i save it as you can see there is some
11:34
margin to show it more clearly let's say instead of 50 and
11:38
I'll write 100 pixels and I'll save it and we have much more margin
11:43
How about 400 pixels? As you can see, the margin is huge
11:47
So this is the margin property in CSS. So basically margins are like space around elements, right
11:54
We can increase or decrease this space to control how close or far apart elements are from each other
12:01
or from the edges of our viewpoint or basically our browser itself
12:06
That will be enough for this video. In the next video, we will learn about CSS box model, box sizing and how to use Chrome developer tools
12:15
So make sure to subscribe to the channel, hit that like button and I will see you in the next video
#Computers & Electronics
#Online Goodies
#Skins
# Themes & Wallpapers
#Web Design & Development