The Art of CSS

30
PRISCILACNG

Transcript of The Art of CSS

Page 1: The Art of CSS

THE ART OF CSSBECAUSE IT CAN BE A MESS

PRISCILACNG

Page 2: The Art of CSS
Page 3: The Art of CSS

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

LAYOUT DISPLAYFLOATPOSITION

Page 5: The Art of CSS

"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

THE PROPERTYDISPLAY

Page 7: The Art of CSS

FLEXBOX

Page 8: The Art of CSS

GRID

Page 9: The Art of CSS

"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

THE PROPERTY FLOAT

Page 11: The Art of CSS

"THE POSITION CSS PROPERTY CHOOSESALTERNATIVE RULES FOR POSITIONINGELEMENTS, DESIGNED TO BE USEFUL FORSCRIPTED ANIMATION EFFECTS."

THE PROPERTYPOSITION

Page 12: The Art of CSS

THE PROPERTY POSITION

Page 13: The Art of CSS

SELECTORS CSS COMBINATORSPSEUDO-CLASSESPSEUDO-ELEMENTS

Page 14: The Art of CSS

"A COMBINATOR IS SOMETHING THATEXPLAINS THE RELATIONSHIP BETWEENTHE SELECTORS"

CSSCOMBINATORS

Page 15: The Art of CSS

CSS COMBINATORS

Page 16: The Art of CSS

"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

PSEUDO CLASSES

Page 18: The Art of CSS

PSEUDO CLASSES

Page 19: The Art of CSS

PSEUDO CLASSES

Page 20: The Art of CSS

PSEUDO CLASSES

Page 21: The Art of CSS

"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

PSEUDO ELEMENTS

Page 23: The Art of CSS

UNITSEMREMVH/VW

Page 24: The Art of CSS

UNITS

Page 25: The Art of CSS

REAL LIFEEXAMPLE

Page 26: The Art of CSS
Page 27: The Art of CSS

A FRIENDLYWARNING

Page 28: The Art of CSS
Page 29: The Art of CSS

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

MERCIET À BIENTÔT

PRISCILACNG