[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-573158-105":3,"detail-sidebar-cat-1-en-105":80,"doc-detail-573158-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","css-quick-reference","CSS - Quick Reference","","Quick Reference / CSS compacts core Cascading Style Sheets knowledge into a structured cheatsheet. It covers selectors and styling rules, common everyday selector patterns, states and pseudo-elements, and how cascade, specificity, and inheritance determine the final rendering. It also summarizes box model and sizing behavior, spacing and centering shorthand, practical units and functions like calc(), clamp(), and rem/em, typography fundamentals, and guidance for color, borders, and backgrounds. Finally, it explains layout and responsiveness with flexbox, grid, positioning, images and aspect ratios, custom properties, and transitions with reduced-motion considerations.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/css-quick-reference/573158/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/css-quick-reference/573158.png","ImageObject",442,249,{"name":42,"@type":43},"Marglet","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-18","2026-10-13",true,{"@type":52,"interactionType":53,"userInteractionCount":30},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"How do selectors and declarations work in CSS?","Question",{"text":62,"@type":63},"A selector chooses elements, while declarations pair CSS properties with values. Together they define styling rules applied by matching the selected elements.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"How does CSS cascade and specificity affect which styles win?",{"text":67,"@type":63},"Within the same origin, importance, and layer, specificity compares IDs, then classes/attributes/pseudo-classes, then types. Later rules break ties, and some values like text color inherit while margins do not.",{"name":69,"@type":60,"acceptedAnswer":70},"What is the difference between flexbox and grid for layout?",{"text":71,"@type":63},"Flexbox is a one-dimensional layout for arranging items along a main axis and cross axis, while grid provides rows and columns using grid lines and track sizing. Both support responsiveness through different techniques like media queries.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},573158,1792014484,{"code":4,"msg":81,"data":82},"success",[83,87,92,97,102,107,112,117,122],{"id":84,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":85,"slug":86},11,90,"presentations",{"id":88,"doc_module":22,"doc_module_name":25,"category_name":89,"show_sort_weight":90,"slug":91},12,"Resumes",80,"resumes",{"id":93,"doc_module":22,"doc_module_name":25,"category_name":94,"show_sort_weight":95,"slug":96},14,"Invoices",70,"invoices",{"id":98,"doc_module":22,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},15,"Posters",60,"posters",{"id":103,"doc_module":22,"doc_module_name":25,"category_name":104,"show_sort_weight":105,"slug":106},16,"Social Media",50,"social-media",{"id":108,"doc_module":22,"doc_module_name":25,"category_name":109,"show_sort_weight":110,"slug":111},17,"Forms",40,"forms",{"id":113,"doc_module":22,"doc_module_name":25,"category_name":114,"show_sort_weight":115,"slug":116},18,"Letters",30,"letters",{"id":118,"doc_module":22,"doc_module_name":25,"category_name":119,"show_sort_weight":120,"slug":121},21,"Paper Templates",5,"papers-templates",{"id":123,"doc_module":22,"doc_module_name":25,"category_name":124,"show_sort_weight":4,"slug":125},158,"General","general-158",{"code":4,"msg":81,"data":127},{"doc_id":78,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":84,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":30,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":26,"language":135,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":12,"update_tm":139,"read_time":22},2336477982702,"https://ap-avatar.wpscdn.com/davatar_9964176cb1d06d4a9deccf72a44ae3dc","QUICK REFERENCE / CSS  \nCSS Style, spacing, and everyday layout.  \n  DevSheets  \n01 / SELECTORS & STYLING  \n 01  Rules & declarations  \n.card {  \ncolor : \\#18302b;  \nbackground : white;  \npadding : 1rem;}  \nA selector chooses elements. Declarations pair properties with values. Link a .css file from the HTML head using rel=\"stylesheet\".  \n 02  Everyday selectors  \n\n| p / .card | Element / class |\n| --- | --- |\n| \\#intro | Element with this id |\n| .card p | Descendant paragraphs |\n| .card > p | Direct child paragraphs |\n| h2 + p | Next sibling paragraph |\n| [type=\"email\"] | Matching attribute |\n\nSeparate selectors with commas to share a rule. Prefer reusable classes for component styling.  \n 03  States & pseudo-elements  \na:hover { text-decoration : underline; } button : focus-visible {  \noutline : 2px solid currentColor;  \noutline-offset : 3px;}  \nli : first-child { font-weight : 700 ; } p :: first-letter { font-size : 1.5em; }  \n: selects a state or condition; :: targets a pseudo-element. Keep keyboard focus visible.  \n 04  Cascade & inheritance  \nbody { color : \\#222 ; } p { color : navy; }  \n.note { color : teal; }  \n.note { color : purple; }  \nWithin the same origin, importance, and layer, specificity compares IDs, classes/attributes/pseudo-classes, then types. Later rules break ties here. Text color inherits; margins do not.  \n 05  Box model & sizing  \n*, *:: before , *::after { box-sizing : border-box;  \n}  \n.card {  \nwidth : 20rem;  \nmax-width : 100%;  \npadding : 1rem;  \nborder : 1px solid \\#ccc;}  \nborder-box includes padding and border in the declared width and height. Margin sits outside.  \n 06  Spacing & centering  \n.page {  \nwidth : min (100% -2rem , 70rem);  \nmargin-inline : auto;  \npadding-block : 2rem;}  \n.card { margin : 1rem 2rem; }  \nTwo shorthand values mean vertical, horizontal; four mean top, right, bottom, left. Some vertical block margins collapse.  \n 07  Units & useful functions  \npx CSS pixel  \nrem Root font size  \nem Contextual font size  \n% Relative to the property  \nvw / vh 1% of viewport dimensions  \nclamp(a,b,c) Min, preferred, max  \ncalc() combines units; space + and-operators. On font-size, em uses the parent font size.  \n 08  Typography  \nbody {  \nfont-family : system-ui , sans-serif;  \nfont-size : 1rem; line-height : 1.5 ;}  \nh1 { font-size : clamp (2rem , 5vw , 3rem); } p { max-width : 65ch; }  \nUnitless line-height scales with font size. font-weight sets weight; text-align aligns inline content.  \n 09  Color, borders & backgrounds  \n.card {  \ncolor : \\#18302b;  \nbackground : rgb (240 248 244);  \nborder : 1px solid \\#cbd5d1 ;  \nborder-radius : 0.75rem;  \nbox-shadow : 0 2px 8px \\#0002 ;}  \nUse named, hex, rgb(), or hsl() colors. currentColor uses textcolor. Check readable contrast.  \nQUICK REFERENCE / CSS  \nCSS Build flexible interfaces.  \n  DevSheets  \n02 / LAYOUT & RESPONSIVENESS  \n 10  Display & overflow  \n. row { display : flex; }  \n.badge { display : inline-block; }  \n.hidden { display : none; }  \n.panel {  \nmax-height : 20rem;  \noverflow : auto;}  \ndisplay: none removes layout space; visibility: hidden keeps it.  \noverflow: auto adds scrolling when needed.  \n 11  Flexbox: one-dimensional layout  \n.toolbar { display : flex;  \nflex-wrap : wrap;  \ngap : 1rem;  \njustify-content : space-between;  \nalign-items : center;}  \njustify-content aligns on the main axis; align-items on the cross axis. flex-direction sets the main axis (row by default).  \n 12  Flexible children  \n.sidebar { flex : 0 0 14rem; }  \n.content { flex : 1 1 0 ; min-width : 0 ;  \n}  \n.actions { margin-left : auto; }  \nflex is grow, shrink, basis. min-width: 0 lets a flex child shrink below its content's automatic minimum. Use gap on the parent for spacing.  \n 13  Grid: rows & columns  \n.grid { display : grid ;  \ngrid-template-columns : repeat (3 , minmax (0 , 1fr));  \ngap : 1rem;}  \n.wide { grid-column : 1 / -1 ; }  \nfr shares leftover space. minmax(0, 1fr) lets tracks shrink. grid-column and grid-row place direct children on g","cbCaioiv7DDpn4DR","https://ap.wps.com/l/cbCaioiv7DDpn4DR","pdf",79850,"English","# 01 / Selectors & Styling\n## 01 Rules & declarations\n## 02 Everyday selectors\n## 03 States & pseudo-elements\n## 04 Cascade & inheritance\n## 05 Box model & sizing\n## 06 Spacing & centering\n## 07 Units & useful functions\n## 08 Typography\n## 09 Color, borders & backgrounds\n# 02 / Layout & Responsiveness\n## 10 Display & overflow\n## 11 Flexbox: one-dimensional layout\n## 12 Flexible children\n## 13 Grid: rows & columns\n## 14 Responsive layouts\n## 15 Positioning & stacking\n## 16 Images & aspect ratios\n## 17 Custom properties\n## 18 Transitions & reduced motion","[{\"question\":\"How do selectors and declarations work in CSS?\",\"answer\":\"A selector chooses elements, while declarations pair CSS properties with values. Together they define styling rules applied by matching the selected elements.\"},{\"question\":\"How does CSS cascade and specificity affect which styles win?\",\"answer\":\"Within the same origin, importance, and layer, specificity compares IDs, then classes/attributes/pseudo-classes, then types. Later rules break ties, and some values like text color inherit while margins do not.\"},{\"question\":\"What is the difference between flexbox and grid for layout?\",\"answer\":\"Flexbox is a one-dimensional layout for arranging items along a main axis and cross axis, while grid provides rows and columns using grid lines and track sizing. Both support responsiveness through different techniques like media queries.\"}]","CSS - Quick Reference | PDF",1791933630]