Float Flexbox Grid Bootstrap
Tables as layout ??? ---- Very Bad - Very Primitive
Next Option was ::Float::
Images /text - Float was originally designed for text to be wrapped around image
img {
float: left_Which side it goes
clear : which_Side_They are not allowed
}
//h1 in general
h1 {
}
//h1 Nested inside div
div h1{
}
.greet , .welcome .{
font: ;
color : black;
margin-
}
float when applied to div inside a section becomes responsive kind of
and we get a layout, You also need holding Container 1st which will contain all div's.
<section>
<div> clear:both ---- Top
<div> float: left ---- Left
<div> float: none ---- Centre
<div> float:right ---- Right
<div> clear:both ---- Footer
<section>
Float Clear --> Flawed Logic --> Hackish
-------------------------------------------------------------
Multiple classes on 1 element in Html attribute - space separated - Inside HTML
Inside .css File
Define Multiple Class - Comma Separated - All styles shared by multiple classes
Nested Class - Space separated
Pseudo Classes ??? ::after ?
Selectors ???
Less SASS CSS ???
https://medium.com/@saanstone/understanding-css-precedence-specificity-d8ca24712417
https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css
https://www.w3schools.com/css/css_combinators.asp
Descendant vs Child Selector