Tuesday, January 5, 2021

Float, Flexbox, Grid, Bootstrap, CSS, Less, SASS

 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


No comments:

Post a Comment

Azure - Pipeline - Add Approver for Stage

https://learn.microsoft.com/en-us/azure/devops/pipelines/process/approvals?view=azure-devops&tabs=check-pass