HTML and CSS

HTML AND CSS Course Part2
In the first part we covered the fundamental of CSS, in this part we are going to talk
about Advanced HTML and CSS Topics. That are used in building almost every website.
ALL these topics are so important,
We will talk about
You’ll Learn
1. Layouts
2. Typography
3. Images
4. Forms
5. Transformations
6. Animations
7. Clean CSS
What you need to Know
 Basic HTML elements

 Basic CSS properties
 CSS selectors & pseudo-selectors
 Chrome DevTools
Layout
We have learned basic of CSS, let’ talking about creating Layouts. So in this section. We
will learn everything we need to know Sizing and positioning element on the serene.
We will cover so many topics such as.

You’ll Learn
 CSS box model

 Sizing elements
 Overflowing
 Measurement units
 Positioning
 Floating elements
 Flexbox & grid layouts
 Media queries
1- Box model
…
2- Sizing Elements
Now let’s talking about sizing elements, let’s create two pages the one for HTML
(Index.html) the anther for CSS (styles.css).
- I am going to define a <div> with class of .box.

<body>
<div class="box"></div>
</body>
- Now let’s define a rules (styling) for box, and gave (width, height, background-
color).
.box {
width: 100px;
height: 100px;
background-color: gold;
}
- So here what we get.

If we hover our mouse over this box in the DOM, here we can see the
actual size of this element. (100 x 100) pixels.
DOM element
This where a lot of people new to CSS get confuse, if we apply padding
or border our box is will be bigger. Let me show you.
Let’s set padding 20px and border 10 solid and color orange.
.box {
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid orange;
}
Look our box is bigger

Because by-default the width and height property are applying to the
content box, so any padding or border that we apply will increase the
size of visible box, now the actual size of this box is (160 x 160)
pixels.
Look at the Lagen of DevTools,
Left Right
So we have left border 10 pixels and left padding 20 pixels the

content aria is 100 X 100 pixels then we have right padding 20
pixels and right border 10 pixels. When we add all these number
together will come out (160) pixels.
So by-default the width and height property are applying to the

content box or any padding or border that we apply will increase the
size of the box.
So this where the (box-sizing) property we use, by-default this

property is set to (content-box) , but we use (border-box.
.box {
width: 100px;
height: 100px;
padding: 20px;
box-sizing: border-box;
}
So look our box is now (100 x 100) pixels,
- If we remove the padding and border property, our box is still (100 x
100) the pixels is.
.box {
width: 100px;
height: 100px;
}
- By setting the box-sizing property calculating the size of elements
become easy and more predictable. But there is problem, we don’t want
to apply this property to every single HTML element, what if we have
another element with class of product we don’t want to repeat this. This
where we use the universal selector, so on the top we can use universal
selector to select all HTML selectors.
* {
}
.box {
width: 100px;
height: 100px;
}
See we get the same result
- There is just one problem this rules *{box-sizing: border-box;} does not

apply to pseudo element, remember Pseudo elements, like before or
after element if we insert the pseudo element in the DOM.this rules will
not apply on that element, let me show you.
I am going to define new rule. .box::before, so we going insert

something before the content our box. I going say (Hello);
* {
}
.box::before {
content: "Hello";
}
.box {
width: 100px;
height: 100px;
}
Take look here is our box, we have pseudo element ::before , this
element (::before) is using default box sizing that is content box, let
me show you, look up the computed tab in DevTools, we have just
four properties (content, display, height, width) there is no box-sizing
Computed Tab
Pseudo Element
But if we select another element like our box, here we have the box-
sizing property.
Computed Tab
Box-sizing
Box Element
- So to solve this problem we need to extend this rules
like this all element befor(*::before) and all element
after (*::after)
*,
*::before,
*::after {
}
.box::before {
content: "Hello";
}
.box {
width: 100px;
height: 100px;
}
Now this box-sizing property is applying to all element (*) as will all
the elements are inserted before and after the content of this element.
3- Overflowing
An important concept you need to know, when dealing with fixed size element
is that sometimes Overflow may happen, so you may have container with fixed
size, and you may have too much content inside this container, so the container
can’t fit the entire content, that is when Overflow is happen.
For example: just like when we have a glass of water, and we put too much
water in.
- So let’s create a <div> with class of (box) and add a long paragraph
<div class="box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aper
iam amet
iste similique consequuntur a quod laudantium modi consectetur
voluptatibus, provident commodi sed error eveniet eligendi nat
us fuga
voluptas corrupti sunt earum quis, ad quae maiores excepturi?
Nostrum,
</div>
- And let’s define a rules for our box, give border with
3px and width 150px or height 150px.
.box {
border: 5px solid gold;
width: 150px;
height: 150px;
overflow: hidden;
}
- Save the changes, and back to the browser.
- Now we can use overflow property, to control how

overflow behave, if we set the overflow property to,
the default value of overflow is (visible) that why we see the overflow.
- But if we set to (hidden) so the extra content will be

hidden.
.box {
width: 150px;
height: 150px;
overflow: hidden;
}
- Another passable is value is (scroll), we use this, we see two scroll bar, a
horizontal and vertical.
.box {
width: 150px;
height: 150px;
overflow: scroll;
}
- We can set overflow property to (auto), with this the

scroll bars will only appear if overflow happens.
- This overflow has two properties which is short hand for two property’s
(overflow-x) and (overflow-y).
4- Measurement Units
We have only use pixels to size elements, but in CSS we have units of
measurement that divided in two categories. (Absolute) and (Relative).
Absolute: absolute units also fixed the value doesn’t change, example units
absolute categories are (pixels (px), point (pt), inches (in), centimeter (cm))
Relative: relative unis are relative something else, for example.
percentage (%) that are relative to the size of parent element .
vw and vh which is relative the size of viewport.
em and rem which are relative to the font size.
What units we are using depend, what
- I am going to start by creating a <div> with .box class.

<body>
<div class="box"></div>
</body>
- Let’s give some style to this box, I going to give width 100px and height
100px and background color.
.box {
width: 100px;
height: 100px;
}
- The size of this box is always the same, no matter how big is the screen is,
so if we view this page on small devise like (Mobil,
tablet), our box is gone stay at the same size. We
can verify this by resizing browser windows.
So look our box is staying at the same size
- For this reason, some people are agree that we should never use pixel values,
because they are not scalable we cannot use them to create webpages, that
are responsive to screen sizes, I am disagree, pixel values also have
applications.
- Now let’s talk about relative values, I am going to change the width of this
to 50% that means of the width of the parent element what is the parent of
this element the <body>. The body element currently doesn’t have width, so
let’s give a width of 300px, that’s mean our box will be 150px.
body {
width: 300px;
}
.box {
width: 50%;
height: 100px;
}
- So let’s verify this, here is our box let’s inspect (DevTool) , go to the
computed tab, down look up the width property is 150px .
Computed Tab
So all these relative values, eventually get converted to pixel value by the
browser.
- What if we remove this property from body class, what is the default
width of this element, the body element is block level element and by-
default the width of block level element is one hundred percent (100%), so
our body element takes 100% width of the page and our box takes half of
the page.
body {

}
.box {
width: 50%;
height: 100px;
}
The box takes exactly

50% of the page .
- Here is
the
interesting part if we resize the browser window our box also get resize,
this the benefit of using relative units, with relative units we can create
layouts that are adjust to screen sizes, with relative units we can create
more scalable layouts.
What if we want this box to take up the available vertical space, you may say
we can set the height to 100%. Let see what happen.
body {
}
.box {
width: 50%;
height: 100%;
border-top: 3px solid orange;
}
Where is the box, are saying the height of this box should be 100%
percent of the height of its parent element, the parent element which is
the body element, currently doesn’t have height property so by-default
its height gone be zero (0). The only absolute unit we are using the
border-top property, so the height of body element will increase 3px,
that the reason why we see the border, but not the box,
So how can we make the box take of entire available vertical space
(height) this is where we use (viewport) units, with this unit we can
size our elements according to width or height of viewport.
So I am going to change the height:100px to height 100vh, (vh) viewport

height. so this unit means one hundred (100%) percent of the height of
the viewport.
.box {
width: 50%;
height: 100vh;
}
Save the changes, come back to the browser.

our box takes of entire available vertical space (height), and if we
resize the browser window our box also resizes.
We also have (vw) viewport width, so the width: 50vw, means 50%
percent of the width viewport.
- We have two more relative units called (em and rem) which are relative
to the Font Size, we use these units in situation where we want to adjust the
layout according to the Font Size for example if the font come bigger we
want the width increase as will.
So if we set the (width to 10em), 10em means 10 time the font size of
the current element. (10 * font size of the current element), now the .box
element doesn’t have the font size which is going to inherit font size
property from its parent element which is the body element, but the body
element also have not the font size property, so it’ going to inherit the
font size property from html element .
body {
}
.box {
width: 10em;
height: 100vh;
}
All the browser gives the html element the base font size 16px. So the
10em means, 10 times 16px which mean 160px. ( 10*16px = 160px ).
body {
}
.box {
/* 10 x 16px = 160px */
width: 10em;
height: 100vh;
}
So in this case our box inherit the font size of the root element which
is the html element.
If we set the font size direct here in box 20px (font-size:20px), so the
width will be 20 times 10 which is 200px (10*20 = 200px).
.box {
/* 10 x 20px = 200px */
font-size: 20px;
width: 10em;
height: 100vh;
}
So let’s verify this

- Another unit call (rem), if we change width to 10rem (width:10rem) that
mean’s 10 times the font size of the root element, what is the font size of
root element by-default is 16px, there is only one number we have to member to
calculate the actual length, don’t have to inherit.
If we set our width to 10rem that mean’s 10 times 16px = 160px

.box {
/* 10 x 10px = 160px */
width: 15em;
height: 100vh;
}
The benefit of using the (rem) units is that if we change our

browser font size from setting, so our styling font also be increase
5- Positioning
In this section we will learn about, how we have position element on the screen.
Position property have some value which are (static, relative, absolute, fixed).
Relative Position: with relative positioning we can position element relative to its
normal position. The other’s element is not affected.
Absolute Positon: with
absolute positon we can
position an element
relative to its position
container, that’ why we
have to apply relative
position on the container.
Fixed Position: with

fixed position we can position an element relative to the viewport.
- So let’s start by creating a <div> with classes of .boxes and

inside of this div we have threes div each with class of box and
box name.
<div class="boxes">
<div class="box box-one">box one</div>
<div class="box box-two">box two</div>
<div class="box box-three">box three</div>
</div>
- Now let’s define styling for our .boxes container, we define

(border: 3px solid orange) with 3px and border style is solid.
.boxes{
}
- And for each .box we define a width 5rem and height 5rem.
.boxes{
}
.box{
width: 5rem;
height: 5rem;
}
- Now for our box-one we set property, background-color to gold color,

For box-two we set background-color to tomato, and for box-three we
set background-color to dodgerblue.
.boxes{
}
.box{
width: 5rem;
height: 5rem;
}
.box-one{
}
.box-two{
background-color: tomato;
}
.box-three{
background-color: dodgerblue
}
- Let’s we want to position this second box (.box-two) and move to the
right, this where we use positon property, now to position this element
we need to change the positon to (relative) so we can position this
element to relative to its normal position.
to use these property (top, left, bottom, right) we can move this box
around, so if we set left to 5rem (left:5rem), we are adding 5rem of space
on the left side of this box, and this will push to the right side.
.box-two {
position: relative;
left: 5rem;
}
Here we can also use negative value like -4rem (left:4rem) and this will
move the box to the left side.
- we also have right property if we set to 4rem, this exactly like setting
left property to negative 4 rem (left: -4rem)
.box-two {
position: relative;
right: 4rem;
}
and look we get same result
-
we also have top and button, we can add some space at top the box, so we
can say (top:2rem).
.box-two {
position: relative;
left: 4rem;
top: 2rem;
}
Or we can add space from bottom, let’s say bottom: 4rem
.box-two {
position: relative;
left: 4rem;
bottom: 4rem;
}
One thing I want pay attention and the yellow and blue box are
exactly where they supposed to be they are not effected by position of
this element.
also note here we have overlapping this (tomato
box) is appear on top the (yellow box) element,
because it’s come last in the DOM, but we can
easily change it.
So back to the second box (.box-two) we can set the (z-index) property to
positive or negative value, to move this box to z-index. Now let set
z-index value to (-1)
.box-two {
position: relative;
left: 4rem;
bottom: 4rem;
z-index: -1;
}
So with relative positioning we can move an element relative to its
normal position and this doesn’t affect the others element on the page.
Absolute position, with absolute positioning we can position an element relative to

its container, let me show you how to do it.
- First we have go to the boxes class which is the container of boxes. And
set position property to relative (position:relative) and this very important,
if we want position our tomato box relative to its container, the container
must be position relatively.
.boxes {
position: relative;
}
- Now we go to second box and set the position to absolute,

(position:absolute) then we set right to 0px and bottom to 0px.
.box-two {
position: absolute;
left: 0;
bottom: 0;
}
Save the
changes, and
see what we
get.
Our tomato box is position relative to its container. Here is important

part, look at the blue box the blue box moves up previously the tomato
box was here and the blue box was below, but now we absolutely
positioning the tomato box the blue box move up. Why this happening?
When we absolutely position an element that element is re-move from
the normal flow of the page, which means from the parent point of view
that element doesn’t exist.
Position Fixed: sometimes we want to positon element relative to viewport, for

example we have a navigation bar that always stays on the top.
-back to the second box (box-two) lets have position: fixed, and remove the
right property, and set top property to zero 0,
.box-two {
position: fixed;
top: 0;
}
If you pay attention the tomato box is now outside of container because
it’s position relative to the viewport, so this element always stays on the
top even if we scroll down,
To check this I am going to body height of 200vh, height:200vh, its make

our page longer.
body {
height: 200vh;
}
now let’s scroll down, look the tomato box always stays on the top
- One last thing there is two ways to set the size of element, one we use to
the width and height property’s, anther way is use the combination of
left and right or top and button.
For example, for our second box lets set left to 2rem (left:2rem) and right
to 2rem (right:2rem) and also set the width to auto (width:auto),
because we use width auto we have already use the width and height in
the box property (.box).
.box-two {
position: fixed;
top: 0;
left: 2rem;
right: 2rem;
width: auto;
}
6- Floating Elements
Now let’s talk about floating elements this is another technique for positioning
elements and creating layouts.
Let’s say we want to display a tweet; what HTML element can be used to
represent tweet.
- We can use <article> element, because with article element we can represent
any independent sub content piece of content.
So we have an <article> with class of (tweet) for styling and inside of this
article we have another <div> with class of (avatar) for image. After that we
have one paragraph <p>.

<body>
<article class="tweet">
<div class="avatar"></div>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
Now let’s defining a styling for class of .avatar
.avatar {
width: 5rem;
height: 5rem;
}
Our paragraph is appear

in new line,
Because all paragraph are block level Elements, as we know block level
element begin in new line.
- To put this paragraph next to the avatar (to the right side) we use float
property (float: left) and this will float the avatar (box) element to left
side of its container and all the sub sequins element will flow rounded
.avatar {
width: 5rem;
height: 5rem;
background-
color: gold;
float: left;
}
See our paragraph

is flow rounded
- let’s add paragraph with some more text. Let’s say 50 words.
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo beatae
deserunt saepe soluta enim quam impedit. Alias quis facere veritatis
magni aliquam, rem eligendi, nihil nesciunt rerum libero in illum eum
exercitationem ipsam cumque optio cum, aperiam fuga? Laborum officia non
at incidunt autem delectus harum eaque amet inventore omnis.
</p>
</article>
</body>
See our text is flowing around the box (avatar/image) this how float
working.
See currently our text is so close to our box (avatar/image) what CSS
property should we use to space them the (Margin) property right.
.avatar {
width: 5rem;
height: 5rem;
float: left;
margin-right: 10px;
}
- we can also float element to the right side of the container, so if we set
float the right (float:right).
.avatar {
width: 5rem;
height: 5rem;
float: right;
margin-right: 10px;
}
- sometimes we don’t want the second element here to flow around the box
(avatar/image) floated element. Maybe we have here link or icon for like
this tweet or retweeting it. We want all these icons appear below the
tweet box (avatar/image), so how can we push the second paragraph
below the box (avatar/image.
This where we use the (clear) property (clear:both) if we have
element that floated to the left or right, this will clear all of those floats.
So let’s create another class call it (.clear) in this class set the clear
property to (clear: both).
.avatar {
width: 5rem;
height: 5rem;
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
Now let’s apply this class (.clear) to the second element

<body>
<p class="clear">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo beatae
deserunt saepe soluta enim quam impedit. Alias quis facere veritatis
at incidunt autem delectus harum eaque amet inventore omnis.
</p>
</article>
</body>
Save the changes, come back to the browser, see our second paragraph
is below the box
- but there is problem with float called (Parent Collapsing) which means
parent element don’t see floated elements and they collapse. Let me show
what I mean.
Back to our stylesheet I am going to define a rules for tweet (.tweet) and
give border 3px (border: 3px solid lightgrey).
.tweet {
border: 3px solid lightgrey;
}
.avatar {
width: 5rem;
height: 5rem;
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
Everything looks fine now, but let’s see what happen if we remove
the second paragraph,
<body>

</article>
</body>
Article element
avatar
See what happen our parent element which is the article with class of
(tweet) has collapse, now it only content this single paragraph
element, it’s not contenting the box (avatar) because avatar is
floated element, and by-default parent element don’t see the floated
element it’s invisible to them.
- How we can solve this problem, we different solutions.
1. One way to solve this problem is to add empty <div> at

the end of the container. So add the <div> with class of
(clear).
<body>
<div class="clear"></div>
</article>
</body>
Save the changes and back to the browser

See this solve the problem
But there is problem with this approach, the empty <div> is

not meaningfully.
2. Second way to solve this problem, to use pseudo elements, with
this Pseudo element we can add content (before) or (after) the
content of the element. So remove the empty <div>, back to our
stylesheet, and write new rule like this (.clearfix) our class name
so we want to insert an element after the content of (tweet) box
element, so we say (.clearfix::after) and here we use display
property to converted to block level element just like div.
.tweet {
border: 3px solid lightgrey;
}
.clerfix {
content: "";
display: block;
clear: both;
}
.avatar {
width: 5rem;
height: 5rem;
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}
Save the changes. So look we get same result before.

7- Flex Box
FlexBox or Flexible box layout is basically a layout method for laying element in
one direction, like in Row or in Column, it’s easy and more powerful then floats.
- So let’s start by creating a <div> with Class of (container) in side this

<div> we will have three 3 more <div> and each one with class of (box)
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
Now let define a bunch of rules, for our .container we set the border
and for our box we set (width, height, background-color, margin).
.container {
border: 3px solid lightgray;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
See we get three

boxes in vertical style
- (display: flex) If we want these in horizontal style, so we use Flexbox, in
common application this is navigation bars, because in navigation bars we
have bunch of menu items or hyperlinks, laid out in horizontal style.
So first we go to the .container class and set the display property to flex.
(display: flex).
.container {
display: flex;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
Look our boxes are laid out in horizontals style, with single line of code,
we didn’t have to use float we didn’t have to clear everything this is
beauty of Flex.
- (flex-deirection:column) So with flex we can layout a bunch of element

in one direction either in row or in column. We can control a direction by
using the (flex-direction) property the default value is (row) that’s why our
box laid out in the row, but we can set this to column. (flex-
deirection:column).
.container {
display: flex;
flex-direction: column;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
- (fl ex-
direction: column-reverse) we can also use to

column-reverse to laid out in reverse style.
.container {
display: flex;
flex-direction: column-reverse;
}
- (flex-direction: row-reverse) we
can also use (row-reverse) to reverse the
row. And this useful for right to left languages like (Pashto, Dari)
.container {
display: flex;
flex-direction: row-reverse;
}
- Now let’s talk about

alignment, to align items we need to understand the concept of (Axes
and flex). In flex we have two Axes (Main / primary) or (Cross /
Direction: Row:
If we set the direction to the (Row) the (Main) axes is going to be
horizontal axes. And the (Cross) axes is going to be vertical axes.
Direction: Column:
If we set the direction to the (Column) the (Main) axes is going to be
vertical axes and the (Cross) axes is going to be horizontal axes.
using these axes, we can easily align item, inside the container.
- Now to align items there is two properties we need to remember (justify-
content and align-items).
1. Justify-content: is use to align items along the (main / primary) axis.

2. Align-items: and we use align-items property to align items along
the (cross / secondary) axis.
These are the property that we are using most of time
- (justify-content) So we want to move the items at end of horizontal

axis this where we use (justify-content) (justify-content:flex-end)
property. So here is our container class let’s set this property.
.container {
border: 3p x solid lightgr
ay;
display: f lex;
flex-direction: row;
justify-content: flex-end;
}
See our item are push to at end of horizontal axis

- We also have (center) justify-content: center.
.container {
display: flex;
justify-content: center;
}
- We can also distribute these items along the horizontal axis, here we have
three 3 property’s (space-evenly, space-between, space-around)
1.The first one is space-evenly which distribute our item with equal spacing
between them, (justify-content:space-evenly).
.container {
display: flex;
justify-content: space-evenly;
}
2.The second one is space-between , the first and last items push to the end of
horizontal axis, and other item are distribute equal space between them .
.container {
display: flex;
justify-content: space-between;
}
3.The third one is space-around , with space around we have some space before the
first box and after the last item, but the amount of space we have here, is half of space
we have in between other items.
.container {
display: flex;
justify-content: space-around;
}
- Align-items: using the align-items property we can align item along the
(cross / secondary) axis which is in this case vertical axis. The default value
is (align-items: flex-start), but we can set flex-end to push these items to the
end of vertical axis (align-items: flex-start).
.container {
display: flex;
align-items: flex-end;
}
now in this case nothing happens, because there is not enough space in
our container .
Container
that brings us important concept in flex event though we set the
(display:flex) property to flex here, this container is still block level
element, so by-default it’s get tall enough to fit it’s children, so on
the outset this element is block level element but on the inset it
behave according to the flex box rules.
So now to align item vertically, first we have to give

this .container some height, so I am going to set height to 90vh
(height:90vh) which mean’s 90 percent of viewport.
.container {
display: flex;
align-items: flex-end;
height: 90vh;
}
s
Container
Vertical axis
See now we have a lot of space here and our boxes are push end of
the vertical axis.
We can also set (center)

.container {
display: flex;
align-items: center;
height: 90vh;
}
Container
Vertical axis
See with flex it so easy to put an element in the center of container,

this wasn’t easy in the past.
- Align-content: this property only works if we have multiple lines in our

container, currently we have a single line, but let’s add a few more boxes
to create a second line.
so back to our index.html page and add more boxes here.

<body>
<div class="box">A</div>
<div class="box">D</div>
<div class="box">E</div>
<div class="box">F</div>
<div class="box">G</div>
<div class="box">H</div>
</div>
</body>
See our boxes get smaller this default behaver of flex container, these
items get smaller so they can fit in one line.
flex-wrap: We can change this behaver using the flex-wrap

property, here in .container, the default value is (flex-
wrap:nowrap ) that is why our items fit in one line, but if we change
this to wrap (flex-wrap:wrap).
.container {
display: flex;
flex-wrap: wrap;
height: 90vh;
}
See, now items keep its original size and any extra items can not fit
in one-line wrap to second line.
So early when we have second line we put our elements in the center
of vertical axis, but now that we have multiple lines look our
element not to the center, the first line is closer to the beginning of
vertical axis, and the second line is closer to the end. This is where
beginning
end
align-content: This is where the align-content property comes to the
play, with this property we can align multiple lines or entire content as
whole, so we can put the entire content in the center (align-content:
center) on the vertical axis.
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
height: 90vh;
}
And with this we get this beautiful layout
Simplify your code
Now we have just three 3 boxes in the center of our container.
- align- self:
We have three 3
boxes in the center of our container, now what if we want to change the
alignment one of these boxes, like if we want to move the first box to the
Top this where we use the align-self property.
Frist we give to this box an extra class like (box-one)
<div class="box box-one">A</div>
</div>
Now back to our stylesheet let’s define a new rule. For box-one we set
the align-self to flex-start, (align-self: flex-start).
.container {
display: flex;
height: 90vh;
}
.box-one {
align-self: flex-start;
}
.box {
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
We can also move down by setting (flex-end)
.box-one {
align-self: flex-end;
}
so this is all about aligning

now let’s talk about Sizing items
- sizing items, there is a few properties that we need to member.
Flex-basis: which is use for setting the initial size of a flex item.
Flex-grow: for setting the growth factor.
Flex-shrink: for seeing the shrink factor.
Flex : which is the short hand property which is combine all top
three property’s
All these properties should be applying on flex items not flex container.
- so let’s see them in action, back to our stylesheet, here in (.box) class, we
can use the flex-basis property to set the initial size of boxes, by-default
it’s set to (auto) (flex-basis:auto) which mean’s the browser is going to
look up the width property.
. box
{
al
i gn-
self
: aut
o ;
wi
dth: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
so now nothing is going happen,

however, if we change this, let’s say flex-basis: 10rem; this going
overwrite the width property, the reason this happening is because we

have set the direction to row, so flex-basis translate the width property, if
we set the direction to column flex-basis will translate the height
property.
.container {
display: flex;
height: 90vh;
}
.box {
Flex-basis: 10rem;
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
So now look our boxes are bigger

Now we can apply this property an individual item also, for example for our first
box, we can set flex-basis: 5re.
.box-one {
flex-basis: 5rem;
}
So our first box is now smaller
- flex-grow: the second property we will about is flex-grow which

determine the growth factor of flex items.
So
currently our boxes are each one is 5rem and we have extra space
available, on left and right side. With flex-grow we can allow these
items to grow and take the available space.
So by-default flex-grow is set to zero 0 flex-grow:0; that is why our
box are not growing, but if we set to 1 one. Flex-grow:1; now all
these boxes are growing at same factor.
.box {
flex-basis: 5rem;
flex-grow: 1;
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
We can change grow factor for one or more boxes, for example for
our first box we can set flex-grow to 0 zero, flex-grow:0;
.box-one {
flex-grow: 0;
}
So now all
the
available
space is
allocated to second (B) box and to third box (C) boxes, now we can
change this to two 2 flex-grow:2;
.box-one {
flex-grow: 2;
}
Now you can see the first box has growing more than others boxes, you
may be thinking why the first box is not twice as biggest others boxes,
well this common miss concept about flex grow property.
See this example.
We have
space here on left or right side, when we set flex grow property the
browser is going to look at the grow factor of each these boxes, for the
first box the grow factor is 2 for two others boxes the grow factor is
one 1, so (2+1+1= 4) so the browser is going to take up entire available
space divided for four 4 slices then it’s gone allocate 2 two slices to box
A, one slice to box B and one slice to box C. this how flex grow
- Flex-shrink: we have another property called flex-shrink which is the
opposite of flex-grow, it tells the browser how these element should
shrink if there is not enough space to fit in the container.
So for this demo I am going to change flex-basis property size to 15rem

flex-basis:15rem; and flex-shrink to 1 one, flex-shrink:1; and this the
default value.
.box {
flex-basis: 15rem;
flex-shrink: 1;
width: 5rem;
height: 5rem;
background: gold;
margin: 1rem;
}
See our boxes is bigger
But if we resize the

browser window look they
are shrinking at same rate.
It is like responsive
- Flex: now we have this flex property which short hand for these
peripteries (flex-basis,flex-grow,flex-shrink).
so if we apply single value (flex:1) that is going to be use for the (flex-
grow) property and if we apply the second value (flex:1 2) that is going
to be use for the flex-shrink property and the third property is for (flex-
basis).
One thing I want to know here is that (flex-grow and flex-shrink) just take a
number they don’t take unite.
We have cover a lot of in this section, but trust me flex easy then we think as we
practice more it be come easy.
So it’s all about flex. 

HTML and CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and CSS

Uploaded by

Copyright:

Available Formats

HTML AND CSS Course Part2

We will talk about

What you need to Know

 Basic HTML elements

We will cover so many topics such as.

 CSS box model

- I am going to define a <div> with class of .box.

- So here what we get.

Look our box is bigger

Look at the Lagen of DevTools,

So we have left border 10 pixels and left padding 20 pixels the

So by-default the width and height property are applying to the

So this where the (box-sizing) property we use, by-default this

So look our box is now (100 x 100) pixels,

See we get the same result

- There is just one problem this rules *{box-sizing: border-box;} does not

I am going to define new rule. .box::before, so we going insert

- Save the changes, and back to the browser.

- Now we can use overflow property, to control how

- But if we set to (hidden) so the extra content will be

- We can set overflow property to (auto), with this the

What units we are using depend, what

- I am going to start by creating a <div> with .box class.

So look our box is staying at the same size

The box takes exactly

So I am going to change the height:100px to height 100vh, (vh) viewport

Save the changes, come back to the browser.

So let’s verify this

If we set our width to 10rem that mean’s 10 times 16px = 160px

The benefit of using the (rem) units is that if we change our

Fixed Position: with

- So let’s start by creating a <div> with classes of .boxes and

- Now let’s define styling for our .boxes container, we define

- Now for our box-one we set property, background-color to gold color,

and look we get same result

Absolute position, with absolute positioning we can position an element relative to

- Now we go to second box and set the position to absolute,

Our tomato box is position relative to its container. Here is important

Position Fixed: sometimes we want to positon element relative to viewport, for

To check this I am going to body height of 200vh, height:200vh, its make

have one paragraph <p>.

Now let’s defining a styling for class of .avatar

Our paragraph is appear

See our paragraph

Now let’s apply this class (.clear) to the second element

- How we can solve this problem, we different solutions.

1. One way to solve this problem is to add empty <div> at

Save the changes and back to the browser

But there is problem with this approach, the empty <div> is

Save the changes. So look we get same result before.

- So let’s start by creating a <div> with Class of (container) in side this

See we get three

- (flex-deirection:column) So with flex we can layout a bunch of element

direction: column-reverse) we can also use to

- Now let’s talk about

1. Justify-content: is use to align items along the (main / primary) axis.

These are the property that we are using most of time

- (justify-content) So we want to move the items at end of horizontal

See our item are push to at end of horizontal axis

So now to align item vertically, first we have to give

We can also set (center)

See with flex it so easy to put an element in the center of container,

- Align-content: this property only works if we have multiple lines in our