CSS Cheatsheet4% Font There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text. Font-Family cron TCC Font-Style Bete tots) Font-Variant cae Seo Font-Weight BOG Font-Size Been Font CRE SCUd Text Text properties allow one to manipulate alignment, spacing, decoration, indentation, ete, in the document.Text-Align Scar serra] Letter-Spacing Secreta eee c yy Text-Decoration Per ee SC nee eu Cy) Word-Spacing Peete ee | Text-Transform emerge aT Text-Indent peer Urea oy Line-Height See sree Background As the name suggests, these properties are related to background, i.e, you can change the color, image, position, size, etc, of the document. Background-Image Perea tCesuLyBackground-Position Cera ee eee C LES an Background-Size Pera ees ed Background-Repeat eee eee cat Background-Attachment Sera eee Lame TED Background-Color Perea E yy Background Peete CC asta Border Border properties are used to change the style, radius, color, etc,, of buttons or other items of the document Border-Width CoCo 3 Border-Style CrierBorder-Color Pele aera Border-Radius Cee ee CE EEaE Cla Border border: width style color; Box Model In laymen's terms, the CSS box model is a conti consists of margins, borders, padding, and the actual content. It is used to create the design ‘er that wraps around every HTML element. It and layout of web pages. Float eas Clear Grea ra Display Cre see Ce} Height eee Sterns WidthSEE Margin pea MC acess Padding Pe Me Ce oss aa Overflow Onsen Visibility SESU BEES EAR? Colors With the help of the color property, one can give color to text, shape, or any other object. Color Soeur s Opacity Cote | Template Layout Specifies the visual look of the content inside a template Box-AlignCetin cas) Box-Direction Perr as Cue ry ey Box-Flex Box-Flex-Group seer Box-Orient Peas tareae uF Box-Pack Box-Sizing Pertsa ea sun max-width CeCe na min-width CeCe. amax-height Cees eee oa min-height Crest ee Sa} Table Table properties are used to give style to the tables in the document. You can change many things like border spacing, table layout, caption, etc. Border-Collapse Ee Empty-Cells COSC seeRer CoH Border-Spacing Cemetary Table-Layout Pes sey ner Caption-Side CSC UESC CE asc Columns ‘These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.Column-Count OUTS eC Column-Gap oer ce Column-rule-width SU eee ea HLS Column-rule-style se SreCeeos Eas) Column-rule-color Crt eter SET 39 Column-width CoCr eS Column-span COU CUPaeT Ee} List & Markers List and marker properties are used to customize lists in the document. List-style-type PCaList-style-position SER eras se Trea) Se} Sees eemS Rec sta Marker- offset ns CSS animations allow one to animate transitions or other media files on the web page. Anima Animation-name animation-name: myanimation; Animation-duration EOS Le ta stane Cs Animation-timing-function animation-timing-function: ease; Animation-delay ERicst er se year Ce Animation-iteration-countAnimation-direction Pst eer tas. Lory ey Animation-play-state EOS Cie Eee eau Animation-fill-mode POU rst meee TET} Transitions Transitions let you define the transition between two states of an element. Transition-property Sr SstsC Le esas Transition-duration transition-duration: 2s; Transition-timing-function Seats ra raat CSS Flexbox Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will flex’ to different sizes to fill the space. And overall, it makes the responsive design more manageable.Parent Properties (flex container) display Creat flex-direction flex-direction: row | row-reverse | column | column-reverse; flex-wrap See ae ee ad flex-flow al align-items See eae ee ose oan reSecs align-content Child Properties (flex items) orderflex-grow flex-shrink Patrons flex-basis cater TH flex shorthand esas oe ee oS User aos align-self align-self: auto | flex-start | flex-end | center | baseline | Css Grid Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers. Parent Properties (Grid container) displaygrid-template-rows See SESS a Er grid-template column-gap row-gap grid-column-gap Pte stint reese Carre Coys grid-row-gap PRC ee ESE Ur gap shorthand grid-gap shorthand justify-itemsTee a Cor cc align-items See Teee re a i ec Ua Sc place-items cH justify-content Sees sc ee ce align-content See eee ca see eee place-content Cnc ew Meets oa grid-auto-columns grid-auto-rows grid-auto-flow ‘low: row | column | row dens.Child Properties (Grid items) grid-column-start Se eee eee eee grid-column-end eC ee CUES). name> | span | span | auto; grid-row-start a eR ee oe a grid-row-end Cee eee Ue ee eee grid-column shorthand Pee Stee ete eee Suwa eS grid-row shorthand RSS RU SM ARC SeU ec a sear COC ICs grid-area Pee See ew eC ee woe Ace Ee justify-self Siieaa ion Lia he align-self‘tart | end | center | stretch; place-self Best) QB CodeWithHarry — copyright © 2024 CodewithHarry.com f¥@Q90