Posts
Block, Inline
some tags like <h>, <p> takes a whole line, i.e. they have display type of block which means they are gonna take whole width and have a line break. such items can have attributes like height width. some tags like <a>, <img> have display inline properties, i.e. if we add something else, they are gonna stack on same line. such cannot have attributes like height width. those can be changed by display attribute. some basic display attributes are: display: inline, block, inline-block, etc. display: block; drop to a new line where we can have height, text-align, etc. display: inline; brings two items to a same line inlined, margin affects left and right sides only inline-block: respects top and bottom padding as well
pixels, rem, em
<html> has default font size ok 16px. 1em=16px Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). .text-section{ font-sze: 1.5em; } /* its parent element is <html> which have default size 16px. so its font size will be 1.5*16=24px*/ .text-section div{ /* Its parent element is .text-section whose parent is font-size:1.5em <html...
padding and margins
when the paddings and margins are added. the actual size of the div changes. the width grows as we add paddings and margins. There, it means 100% + 20 px padding. So, in order to fix the actual size of div, we need to add: *{ margin:0; //removes all the basic stylings padding:0; box-sizing: border-box; }
some syntax of CSS *{ selects everything in the page and edit them } classes .classname{ } IDs #id_name{ } IDs have higher priority than classes. !important has the greatest priority. eg: h1{ color: blue !important; } Syntax text-align: centre, right, left, justify border-right-style : dotted ; border-top-style : dashed ; border-bottom-style : dashed ; border-left-style : dotted ; border-radius : 100px ; Eadius of border 100px border-width : 2px ; ...