00:00bismillah hir rahman nir raheem
00:04so as we have already covered our html
00:07we will cover some other things along with our posts
00:11so let's start with css
00:14css is actually used for website styling, interactive and user interface
00:20user interface, styling etc are the same things
00:25which makes website eye catching
00:28when a user downloads your website
00:31and sees that everything is perfectly aligned
00:34there are animations
00:36everything is giving you a pixel perfect view of your website
00:42so that is an eye catching thing
00:45so all those things are possible through css
00:50so today we will cover some main points of css
00:55in this video
00:57we will put our html boilerplate
00:59and in head tag
01:02we will link our style sheet
01:07style.css
01:10which is the file of css
01:13so I have put this file here
01:17from now on whatever we will do
01:20we will use external style sheets
01:24so let's write our div
01:27div element is actually a block level element
01:31block level element means
01:34an element which covers the entire width
01:37whether the element is giving 1 3rd screen width
01:42or 1 12th screen width
01:46but this element will cover the entire screen
01:50block level element
01:53span
01:56eye
01:59all these are inline elements
02:02inline elements will cover the entire screen width
02:06so let's see from the perspective of css
02:10what is the use of these elements
02:13the div element which we will use a lot
02:16the purpose of this is that
02:19we make different sections in our websites
02:22so that we can modify each section separately
02:25and make changes in it
02:28if all the content is in one place
02:31then it will be very difficult to manage it
02:34so that's why we use div element
02:37we use div tag
02:40so that we put everything in a separate div
02:43so that we can personally
02:46change different things
02:49so that the effect of one change does not come in another
02:52so first of all let's give them a class
02:55before class let's see one more thing
02:58that in css
03:01how can we
03:04target our elements
03:07and implement their styling
03:10so in css
03:13we can write the name of our tag
03:16as we saw in the previous video
03:19that we use b tag
03:22we have 4 b tags
03:25we give one b tag and style it
03:28and all the b tags get styled
03:31so in the same way we use div tag
03:34first we put some content in it
03:40div content
03:46in the same way
03:49we put content in span
03:52span content
03:55so let's implement
03:58styling on it
04:01which we will see first in css
04:04padding, margins, borders
04:07we will see these 3 things
04:10first we will see border
04:13we have borders in different varieties
04:16solid, dotted, dashed
04:19there are many other types of borders
04:22we can use our images instead of borders
04:25so first we will see
04:28we will tell it the value
04:31how much width it should have
04:34and what type it should have
04:37we use solid
04:40we tell it the color
04:43this is our div element styling
04:46in the same way we will use span
04:49we will tell it the border
04:52how much width it should have
04:55border type
04:58we use dotted
05:01border color will be blue
05:04so see this
05:07now we have div element
05:10which I told you block level element
05:13and its content is coming up to this
05:16but it has given its full width
05:19and on the other side
05:22span tag which is an inline element
05:25its content is coming up to here
05:28and if we see borders
05:31this is pixel border
05:34and this is solid form
05:37and this is dotted border
05:40in the same way we have borders
05:43now if we see
05:46what is padding
05:49so first
05:52we do
05:55padding
05:58we tell it 50 pixels
06:04we put 50 pixels on div
06:07so now if we see
06:10top, bottom, right and left
06:13everywhere it has
06:16a space
06:19like air
06:22for example
06:25we hide this padding
06:28we put our content in div
06:31we put it in p tag
06:34so that it is easy to understand
06:37what is actually in our code
06:43now we give a border to p tag
06:46p
06:49we give border 2 pixels
06:52solid
06:55green
06:58now you can see
07:01this border is attached with this
07:04green border
07:07now we use padding in this
07:10we understand the concept of padding
07:13padding we give 20 pixels
07:16now we refresh it
07:19so you will see
07:22right, left, up, down
07:25everywhere it has
07:28a space
07:31so padding will be used
07:34on external
07:37if we use it in div element
07:40if we use it in p tag
07:43it will create a space in p tag
07:46and open it
07:49we take 10 pixels
07:52now you can see
07:55this content is in p tag
07:58it is well aligned
08:01as we refresh the page
08:04it has taken padding
08:07so this is the concept of padding
08:10now we see
08:13div tag
08:16div tag
08:19by default
08:22it has taken padding and margin
08:25of html document
08:28but to clear margin
08:31we put margin in div tag
08:34let's suppose
08:3750 pixels
08:40now you can see
08:43it is in p tag
08:46we saw padding has html document
08:49but what margin does
08:52it removes the content
08:55of screen
08:58top, left, bottom, right
09:01it removes the content of screen
09:04it removes the content of screen
09:07so this concept
09:10we are using
09:13we have used margin and padding
09:16it is used everywhere
09:19the concept of margin and padding
09:22it is used everywhere
09:25but for example
09:28but i say
09:31i want margin from top
09:34so we use a property
09:37margin top
09:40margin top, margin left, bottom, right
09:43we can use all these properties
09:46but there is a solution
09:49if you want margin top
09:52so you can say
09:55we can use 4 attributes
09:58according to 4 positions
10:01top, right, bottom, left
10:04let's go clockwise
10:07we need margin from top
10:10so we give 20 pixels
10:13then we need 0 from right
10:16then we need 0 from right
10:1920 pixels from top
10:220 pixels from bottom
10:250 pixels from right and left
10:28so let's implement it
10:31so as you can see
10:34we got margin of 20 pixels from top
10:37for example
10:40we make it 200
10:43so 200 pixels from top
10:46it shows the item
10:50so this was our margin and
10:53margin and padding concept
10:56along with borders
10:59so we will meet in our next videos
11:02so take care, Allah Hafiz
Comments