<!DOCTYPE html> <html> <head> <style> div.a { width: 150px; height: 80px; background-color: yellow; //-moz-transform: rotate(20deg); //-ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); //transform: rotate(20deg); } </style> </head> <body> <h1>The transform Property</h1> <div class="a">Hello World!</div> </body> </html>
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tuesday, May 18, 2021
Transform CSS Property
Sunday, April 18, 2021
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
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
}
float: left_Which side it goes
clear : which_Side_They are not allowed
}
//h1 in general
h1 {
}
h1 {
}
//h1 Nested inside div
div h1{
}
div h1{
}
.greet , .welcome .{
font: ;
color : black;
margin-
}
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.
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>
<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
https://sabe.io/classes/css/grouping-nesting-selectors
https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
https://www.youtube.com/watch?v=R7gqJkdc5dM
https://codepen.io/kevinpowell/pen/gzZpGL/
https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
https://www.youtube.com/watch?v=R7gqJkdc5dM
https://codepen.io/kevinpowell/pen/gzZpGL/
-------------------------------------------------------------
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 ???
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
Subscribe to:
Posts (Atom)