HTML – a must-know for building responsive and dynamic layouts.
Box Model
<!-- at core we have content, padding, border, margin
inspect the browser we can see the detail diagram of box model -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
/* padding: 1px 2px 1px 2px; */
/* we give padding value as T R B L -> top right bottom left
if we give single value, it will same value for all direction
last value is not given then, left value will be right value
if 2 value given bottom, will use 1st value, and left will use 2nd value
*/
padding: 0px;
margin: 20px;
/* in margin we have concept of margin collapsing means if we have 2 element that have margins then their margin are collapsed into
single margin that confused a lot of developer */
border: 1px dashed green;
/* border value are -> border_width border_pattern border_color -> this is short form to give value to border, we can also give
seperate value to them*/
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Measurement Unit in Html
<!-- we have different units of measurement
they fall under 2 category
-absolute
-relative
------------------------------------------------------------------------------------
absolute relative
------------------------------------------------------------------------------------
px //size according to pixel value
pt //mainly used in printing % //relative to size of container
in //mainly used in printing vw //relative to view port
cm //mainly used in printing vh //relative to view port
mm //mainly used in printing em //relative to font size
rem //relative to font size
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
/* if we give body width */
width: 300px;
/* box will be 150px */
}
.box {
/* px unit */
width: 100px;
height: 100px;
/* size of box never change with pixel value, it is not responsive, but it is useful when we don't want value to change
with value like border we want fix border */
border-top: 3px solid orange;
/* percentage unit */
width: 50%;
/* means 50% width of parenet element in this case div have parent of body so 50% of body
body is block level element so by default it takes entire width then our box will be half of browser window
if we give body width box will be 150px half of body*/
/* if we resize window our box also get resized, it is benefit of using relative unit */
height: 100%;
/* now if we give height to 100%, then our box collapse, because default height of body parent in this case is 0,
so it inherit body height
block level height increase according to content inside it, if we don't give them hight manually,no content height is 0 */
background-color: gold;
/* viewport unit */
/* to take entire vertical space we can use viewport unit like */
height: 100vh;
width: 50vw;
/* if we resize our window, our box will also get resized */
/* em unit */
width: 10em;
/* means 10 * font size of current element. if it doen't have fontsize will take parent element recursively until it find fontsize
In this case we have parent body don't have fontsize,body parent is html element, every html element have fontsize of 16px
10em = 10 * 16px = 160px
if we give it fontsize of 20px*/
font-size: 20px;
/* width will be 200px
problem with that is if we don't have fontsize property we have to trace fontsize of parent until it find it is complicated*/
/* so we have another unit called rem unit */
/* rem unit */
/* 10rem = 10 * fontsize of root element(i.e.(html) 16px) ->10*16 = 160px
for simplicity we give root element fontsize of 62.5% -> 62.5% of 16px = 10px, to make calculation easier
html {
font-size: 62.5%;
}
width:15rem; means 150px
*/
}
</style>
</head>
<body>
<!-- if we type some thing in div height increase to accoring to contenet, height accoring hello height -->
<div class="box">hello</div>
</body>
</html>
SizingElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: teal;
/* if we give padding to the box our box size will grow*/
padding: 20px;
display: inline-block;
/* box size will be 140*140 */
/* beacuse default box-sizing is content-box
if we give box-sizing to border box our content will be decreased and box actual size remain 100*100 */
/* box-sizing: border-box; */
}
/* so to give all element of box-sizing to border-box we use universal selector like '*' */
* {
box-sizing: border-box;
/* now all element will have border-box */
}
.box::before {
/* box-sizing propery will not applicable for pseudo element
if we inspect and see pseudo element we can't even find box-sizing propery which menas it is default value content-box
we can't see difference but it might create bug in future*/
content: "hello";
}
/* to implement to pseudo element we do */
*,
*::before,
*::after {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- width and heigh property are only respected by block level element -->
<!-- block level element are inserted in new line means they take entire available horizonal space if we duplciate above div
we see it in new line -->
<!-- <div class="box"></div> -->
<!-- if we replace above div with span -->
<span class="box"></span>
<!-- box dimension vanish, so we have inline-block value for display property which have property of both inline and block
we can replace the span with div also-->
<div class="box"></div>
<!-- tiny space are because of white space we have between these element -->
<span class="box"></span><span class="box"></span>
</body>
</html>
Controlling Overflow of Content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
height: 100px;
width: 100px;
background-color: gold;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quod
officiis quis reprehenderit, voluptates quos animi minus eos dolores vel
necessitatibus, ipsum a voluptate. Expedita odio quisquam iure eveniet id
voluptas amet quis eligendi. Ab repellat sequi nihil, nam recusandae rem
iste ipsa mollitia officiis iusto id provident, dolore non.
<!-- we have fixed size container and we have too much content so we have overflow -->
<!-- to handel it we have overflow property we can set it to hidden, visible,auto,scroll
visible is default value of it-->
<!-- overflow-x and overflow-y are long hand property of overflow
overflow: hidden auto // we can also do this
-->
<!-- -->
</div>
</body>
</html>
Positioning Element
<!-- we will see various technique for positioning element and creating layout -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.boxes {
border: 2px solid lightgreen;
position: relative;
}
.box {
height: 5rem;
width: 5rem;
}
.box-one {
background-color: gold;
}
.box-two {
background-color: red;
/* relative position */
/* to position this class relatively we can apply few value like realtive,absolute,static and so on
by default position value is static */
position: relative;
/* we can use left right top bottom properties to move this box around contianer1 */
left: 3rem;
/* move towards right 5rem from left
we can also give -ne value -rem opposite direction move */
top: 2rem;
bottom: 4rem;
z-index: 1;
/* defualt value of z-index(represent depth) in 0 for all element, higher its value more priority it have to show in front
if it is overlap with order element
with relative positioning we can move element relative to normal position */
}
/* absolute position */
/* we have absolute position, we can position an element relative to its container but container must be positon relative
here we have to position boxes container relative */
.box-three {
background-color: green;
/* position: absolute;
top: 1px;
left:1rem */
/* absolute positioning
when we give absolute positing it remove from normal flow of page means parent point of view, it doesn't exist
z-index don't work for this */
}
/* box-two overwrite previous properties */
/* fixed positioning */
/* these element are position accoring to viewport and always stay on same position */
.box-two {
position: fixed;
top: 0;
/* it always stay on top we can also give width with left and right property like */
width: auto;
left: 1rem;
right: 1rem;
}
body {
height: 200vh;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
</div>
</body>
</html>
Floating Element
<!-- This is another technique for positioning element and creating layouts -->
<!-- example -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.avatar {
width: 5rem;
height: 5rem;
background-color: gold;
margin-right: 0.5rem;
float: left;
/* to put avatar to left side */
/* we don't want 2nd p element to float around so */
}
.clear {
clear: left;
/* we apply this class to element that we don't want to float around. Now, 2nd p tag is not folating around */
/* we can set both if we don't want element to float around both right and left */
clear: both;
}
.tweet {
border: 3px solid lightgrey;
/* method 3 */
overflow: auto;
/* to overflow we can set other value except visible, auto sometime gives scroll bar
this is hack means dirty solution */
/* Note:- float is bit hard to work, we have to deal with parent collapsing and we have to clear float after
to create layout we should use flexbox and gird */
}
.tweet::after {
content: "";
display: block;
clear: both;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<article class="tweet clearfix">
<div class="avatar"></div>
<p>Lorem ipsum dolor sit amet.</p>
<!-- <p class="clear">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam
provident vel magni incidunt at, earum autem, magnam labore perspiciatis
accusamus deleniti, quibusdam ducimus adipisci ipsam assumenda veniam
illo iure? Nobis vel fuga minus maxime quos tenetur ab ullam placeat
magni quaerat iure molestiae autem commodi nulla provident eveniet,
eaque hic.
</p> -->
<!-- everthing is fine if we remove 2nd p element we got layouy issue, to
solve this issue -->
<!-- Method 1 -->
<div class="clear"></div>
<!-- above div with clear class slove the problem but this div is not meaningful or descriptive to search engine
and screen reader
Method 2
Another method to solve this is using pseudo element
.tweet::after{
content:""; -> this element by default is inline
display:block; -> to make block level element
clear:both;
} -->
<!-- if we want to use clear to other element then
.clearfix::after{
content:""; -> this element by default is inline
display:block; -> to make block level element
clear:both;
}
now we can apply clearfix to other element-->
<!-- method 3 -->
<!-- .tweet{
overflow:auto
} -->
</article>
</body>
</html>
Flexbox
<!-- using flex we can layout element in one direction row or column -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
font-size: 62.5%;
}
body {
margin: 10px;
}
.container {
display: flex;
/* our box laid out horizontally because by default flex direction for web application is row */
flex-direction: row;
/* we have column, column-reverse,row-reverse,row */
/* in flex we have 2 axis
-main(primary) axis and if(flex-direction:column) then column is main axis and row is secondary axis or viceversa
-cross(secondary) axis
justify-content (along the main axis)
align-item (along the secondary or cross axis)*/
justify-content: center;
/* default value is flex-start, we have flex-end, center,space-beween,space-around and many more */
align-items: center;
/* default value is flex-start, we have many value
we didn't see any changes because we don't have enough vertical
Note:- even we give display to flex but it act as block element
*/
height: 90vh;
/* now we see content centered in vertical direction */
align-content: center;
/* align-content only works if we have multiple line in our flex container currently we have single line add item to create 2nd line
and give flex direction to row */
/* we add more box, flex container get small to fit more contaier that is default behaviou to solve this we
give flex-wrap:wrap ,no-warp is default value*/
flex-wrap: wrap;
}
.box {
width: 5rem;
height: 5rem;
background-color: gold;
margin: 1rem;
flex-grow: 1;
}
.box-one {
align-self: flex-start;
/* applies to individual item overwirte align-item property */
flex-basis: 10rem;
/* used to send initial size of a flex item
width will be 10rem, overwite width property because we give flex-direction to row*/
flex-grow: 2;
/* no unit, the growth factor */
flex-shrink: 2;
/* no unit, the shrink factor
flex is short hand property of all these 3 property */
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">F</div>
<div class="box">G</div>
<div class="box">H</div>
<!-- -->
</div>
</body>
</html>
Grid
<!-- when we want to layout element in both row and column direction, we use gird -->
<!-- defining gird
display:gird;
gird-template-rows:100px 100px 100px; //3 rows
gird-template-column:repeat(2,100px); // can use repeat function
gird-template:repeat(3,100px)/100px 30fr 70fr //short hand property of above, 3column 1st column->100px ,2nd column 30%of available space
70% of available space
justified-item:center ->for gird item to align horizonatally
align-item:center -> for gird item to align vertically
justified-content:center ->for gird container to align horizonatally
align-content:center -> for gird container to align vertically
//unit
fr -> fraction unit
%,
auto
gird-template-rows:100px auto 100px;
now middle row will adjust, other remian intacted.
//for gap
row-gap,
column-gap,
gap is short hand property
//placing item in grid
gird-row: ; -> value is line in gird start/end/start/end
gird-column -> value is line in gird start/end/start/end
gird-area -> it is short hand poperty of above 2 properties
it is diffcult to remember line name
//placing item in named area
gird-template-areas:'header herader' 'siderbar main' 'footer footer'
gird-area: header; -> we don't need quote here
<div class="box box-one">A</div>
.box-one{
gird-column:2;
}
it will start fron 2 column
by default each item take 1 cell in grid
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
/* height: 5rem;
width: 5rem; */
background-color: gold;
}
.container {
border: 3px solid yellow;
display: grid;
/* grid-template: repeat(3, 100px) / repeat(2, 100px); */
justify-items: stretch;
align-items: stretch;
/* above 2 properties default value is streatch
if we set to streatch, it will not streatch because we give height and width to box */
/* justify-items: stretch; */
/* align-items: stretch; */
/* align-content: center;
justify-content: center; */
height: 100vh;
grid-template-areas: "header header" "sidebar main" ". footer";
/* we use dot . to empty space */
}
.box-one {
/* Placing item in grid */
/* grid-row: 2/3; */
/* line 2 to 3 of gird-line horizontally*/
/* grid-column: 2/-1; */
/* line 2 to -1 of gird-line vertically
3 is last line so 3=-1 line
*/
/* we can also use span keyword if we find difficult to track line */
/* grid-row: 1 / span 2; */
/* span 2 row */
/* also have gird-area -> start row columne and end row column*/
/* grid-area: 1/1/1/3; */
/* it is not as much readable
another way to place item is by defining specific area in gird
define gird-template-area in container class */
grid-area: header;
}
.box-two {
grid-area: sidebar;
}
.box-four {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box box-two">B</div>
<div class="box box-three">C</div>
<div class="box box-four">D</div>
</div>
</body>
</html>
Media Query
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: column;
}
.box {
background-color: gold;
margin: 2px;
padding: 1rem;
}
.box-two {
background-color: dodgerblue;
}
/* media query starts with @media screen and (min-width: 600px) and define css property
for screen min-width of 600
if we resize our browser window we get different layout
we can set print instead of screen by this we get applied css when printing document
also have max-width */
/* remaining styling according to width to make page responsive */
@media screen and (min-width: 600px) {
.container {
flex-direction: row;
}
}
@media screen and (max-width: 900px) {
.container {
flex-direction: row;
}
.box {
background-color: white;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box box-one">A</div>
<div class="box box-two">B</div>
</div>
</body>
</html>
Comments
Post a Comment