the art of css
TRANSCRIPT
![Page 1: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/1.jpg)
THE ART OF CSSBECAUSE IT CAN BE A MESS
PRISCILACNG
![Page 2: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/2.jpg)
![Page 3: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/3.jpg)
WHENEVER THERE A CHANGE IN VIEW INWEBPAGE THAT IS CSS CHANGE THATEFFECTS POSITION, WIDTH ORANYTHING ELSE, THE GEOMETRY OFELEMENTS AND ALL THE OTHERELEMENTS AFFECTED IS CALCULATED BYTHE BROWSER. THIS PROCESS ISKNOWN AS REFLOW
REFLOWONCE THE REFLOW IS DONE THEBROWSER PAINTS THE AFFECTED PARTON THE SCREEN THIS IS KNOWN ASREPAINT
REPAINT
![Page 4: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/4.jpg)
LAYOUT DISPLAYFLOATPOSITION
![Page 5: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/5.jpg)
"THE MOST IMPORTANT PROPERTY FORCONTROLLING LAYOUT. EVERY ELEMENTHAS A DEFAULT DISPLAY VALUEDEPENDING ON WHAT TYPE OF ELEMENTIT IS. THE DEFAULT FOR MOST ELEMENTSIS USUALLY BLOCK OR INLINE"
THE PROPERTYDISPLAY
![Page 6: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/6.jpg)
THE PROPERTYDISPLAY
![Page 7: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/7.jpg)
FLEXBOX
![Page 8: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/8.jpg)
GRID
![Page 9: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/9.jpg)
"THE FLOAT CSS PROPERTY SPECIFIESTHAT AN ELEMENT SHOULD BE TAKENFROM THE NORMAL FLOW AND PLACEDALONG THE LEFT OR RIGHT SIDE OF ITSCONTAINER, WHERE TEXT AND INLINEELEMENTS WILL WRAP AROUND IT"
THE PROPERTYFLOAT
![Page 10: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/10.jpg)
THE PROPERTY FLOAT
![Page 11: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/11.jpg)
"THE POSITION CSS PROPERTY CHOOSESALTERNATIVE RULES FOR POSITIONINGELEMENTS, DESIGNED TO BE USEFUL FORSCRIPTED ANIMATION EFFECTS."
THE PROPERTYPOSITION
![Page 12: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/12.jpg)
THE PROPERTY POSITION
![Page 13: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/13.jpg)
SELECTORS CSS COMBINATORSPSEUDO-CLASSESPSEUDO-ELEMENTS
![Page 14: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/14.jpg)
"A COMBINATOR IS SOMETHING THATEXPLAINS THE RELATIONSHIP BETWEENTHE SELECTORS"
CSSCOMBINATORS
![Page 15: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/15.jpg)
CSS COMBINATORS
![Page 16: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/16.jpg)
"PSEUDO-CLASS IS A KEYWORD ADDED TOSELECTORS THAT SPECIFY A SPECIAL STATE OFTHE ELEMENT. A PSEUDO-CLASS ALWAYSCONSISTS OF A "COLON" ( : ) FOLLOWED BY THENAME OF THE PSEUDO-CLASS AND OPTIONALLYBY A VALUE BETWEEN PARENTHESES."
PSEUDOCLASSES
![Page 17: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/17.jpg)
PSEUDO CLASSES
![Page 18: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/18.jpg)
PSEUDO CLASSES
![Page 19: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/19.jpg)
PSEUDO CLASSES
![Page 20: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/20.jpg)
PSEUDO CLASSES
![Page 21: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/21.jpg)
"PSEUDO-ELEMENTS ARE LIKE VIRTUALELEMENTS THAT WE CAN TREAT AS REGULARHTML ELEMENTS. A PSEUDO-ELEMENT ISMADE OF TWO COLONS (: : ) FOLLOWED BYTHE NAME OF THE PSEUDO-ELEMENT."
PSEUDOELEMENTS
![Page 22: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/22.jpg)
PSEUDO ELEMENTS
![Page 23: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/23.jpg)
UNITSEMREMVH/VW
![Page 24: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/24.jpg)
UNITS
![Page 25: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/25.jpg)
REAL LIFEEXAMPLE
![Page 26: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/26.jpg)
![Page 27: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/27.jpg)
A FRIENDLYWARNING
![Page 28: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/28.jpg)
![Page 29: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/29.jpg)
http://bit . ly/2kFALWdhttp://bit . ly/2ldmoF8http://bit . ly/2l93zabhttp://bit . ly/2kDoGkchttp://bit . ly/2l8SSEC
https://mzl. la/1O9wNfHhttp://bit . ly/2k0xEsphttp://bit . ly/2loxpr8
https://mzl. la/2kx3YzZhttp://bit . ly/2k83naY
- REFERENCES -
![Page 30: The Art of CSS](https://reader031.vdocuments.net/reader031/viewer/2022021918/58a3dbb71a28ab7f0b8b5641/html5/thumbnails/30.jpg)
MERCIET À BIENTÔT
PRISCILACNG