HTML Module 10x Academy

  1) Audio tag 2) Video tag

  1) img tag and it's attribute alt is used incase our image doesn't load in the browser, it will serve as the description of the image.a 2) Thumb-rule of img tag: a) We should never stretch an image beyond it's original dimension, be it height or width. b) We should never go against the aspect ratio of the original image. Aspect ratio is the ratio width: height. for example lets say the image has 1000px and 700px height, so the aspect ratio is 10:7, to maintain the aspect ratio we can give 200px width : 140px height as the ratio is still 10:7 , but we cannot provide width as 400px : 80 px height as the aspect ratio will be 5:1, which is the violation of aspect ratio because this does not maintain the 10:7 ratio. Therefore we should only specific one of the dimension either height or width ( preferably width), the other dimension will scale accordingly to the aspect ratio c) we should never specify absolute width/height to an image, rather we should have a container (ex- di...

 

  * Clear property is used to make the non-floating sibling start after the floating sibling ends. 1) when there is only 2 children and one of them is floating: Child 3 used the property clear: left; because child 1 is floating in the left, if child 1 was floating right , child 3 would have use clear: right; The green box is child 1 with float: left; , blue box is the parent and brown box is child 3 with clear: left; 2) When there is 3 children and 2 of them is floating one in right and one in left Here child 1 is floating left , child 2 is floating right and child 3 is non floating , therefore child 3 uses clear: both; to start at the end of both Here green box is child 1 , blue box is the parent div , orange box is child 2 and brown box is child 3 with clear: both;

  * Float property is mainly used when we want 2 or more boxes side by side of one another like in the example below: This is the HTML file: This is the CSS file: This is the Output:

  Margin auto will shift our element to the center. If we only give margin-right: auto ; our element will be shifted to the left side and if we only give margin-left: auto; , our element will be shifted to the right.

  I will demonstrate all the shorthand with margin property only, it'll be same for all. 1)   when we want to give 4 values: { margin: 5px 10px 15px 20px; } 5px - margin-top 10px - margin-right 15px - margin-bottom 20px - margin-left  (we will go clockwise) 2) when we want top and bottom same and left and right same: { margin: 5px 10px; } 5px - margin -top and bottom 10px - margin left and right 3) When we want top and bottom different but left and right same: { margin: 5px 10px 15px; } 5px - margin-top 10px - margin- right and left 15px - margin bottom

  1)   Suppose if we give width of 200px to our elements and our elements have have some padding and border, by default the width of 200px is applied only on the content   and the overall size of the box increases as there is horizontal padding and horizontal border too (vertical padding and vertical border is of no concern to us) .  2) Suppose the padding is 30px on each horizontal side and border is 5 px on each horizontal side. The effective width of the element box will be => 200 + 60 + 10                                                                                                           =    270px 3)  if we want the width of 200px from border to border and not only on the conten...

  1) Both inline and block box will have these 4 properties: 2) Visual Representation of the 4 properties

  1) By default every HTML element will have a box around it's content 2) 3) The display property in CSS lets us decide and manipulate what type of box we need according to our requirement and there are 3 main values in the display property: block inline inline-block { display: inline-block; } is the best value of display property. Because with display: inline; , we cannot give box properties like width, height, and other box properties to them. 3) Important topics on Box Model

 Index.html file: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < ul > < li > list item 1</ li > < li > list item 2</ li > < li > list item 3</ li > < li > list item 4</ li > </ ul > < Ol > < li > ol 1</ li > < li > ol 2</ li > < li > ol 3</ li > < li > ol 4</ li > </ Ol > </ body > </ html > style.css file: ul>li :nth-child ( 2n ) { color : bl...

  Index.html file: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < ul > < li > list item 1</ li > < li > list item 2</ li > < li > list item 3</ li > < li > list item 4</ li > </ ul > < Ol > < li > ol 1</ li > < li > ol 2</ li > < li > ol 3</ li > < li > ol 4</ li > </ Ol > </ body > </ html > style.css file: ul>li :last-child { color : bluevi...

  1) Normal combinator =>  Suppose we have several h2 in an Html file and some h2's are with the class ="orange_color" , and there are some p and div tags too with the class = "orange_color". Now we only want to color h2 with the class="orange color" as red , but if we use the class selector the p and div tags with the same class will also color as red. In this situation we use combinators and the combinators will only color those h1 red which has the class="orange_color", rest of the h2's with different class and other elements with the same class will be ignored.  The syntax of Normal cominator is : h1.orange_color{ color: red; } Index.html file: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device...

  1) pseudo class : hover =>   To use the pseudo class hover, we write the selector name and then given : sign and then write hover. ex- p: hover{ color: Pink: } Index.html file: <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < p >My favourite color is < span class = "fav_color" > Blue</ span ></ p > </ body > </ html > style.css file: p { color : red ; } p :hover { color : pink ; } .fav_color { color : aquamarine ; } Output when we don't hover: My favourite color is  Blue Output when we ...