[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573466-105":53,"doc-detail-573466-en":125},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":118,"head_meta":120,"extra_data":122,"updated_unix":124},105,"en","cse-154-css-cheat-sheet-summer-2019-version-062319","CSE 154 CSS Cheat Sheet - Summer 2019 - Version 06/23/19","","A practical CSS cheat sheet for CSE 154, organized into clear reference tables for common selector types and frequent styling properties. It covers selector categories such as universal, element, grouping, class, id, descendant, child, and attribute selectors, followed by property/value lists for background, border, font and text, color, box model, and flexbox layout behaviors. The sheet emphasizes replaceable placeholders for lengths and colors and uses compact syntax to speed up web styling tasks.",{"@graph":63,"@context":117},[64,80,100],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/cse-154-css-cheat-sheet-summer-2019-version-062319/573466/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":94,"encodingFormat":93,"isAccessibleForFree":95,"interactionStatistic":96},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/cse-154-css-cheat-sheet-summer-2019-version-062319/573466.png","ImageObject",442,249,{"name":88,"@type":89},"Rainbow Cat","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-14",true,{"@type":97,"interactionType":98,"userInteractionCount":9},"InteractionCounter",{"@type":99},"ViewAction",{"@type":101,"mainEntity":102},"FAQPage",[103,109,113],{"name":104,"@type":105,"acceptedAnswer":106},"What are the main CSS selector types included in this cheat sheet?","Question",{"text":107,"@type":108},"It lists universal, element, grouping, class, id, descendant, child, and attribute selectors, each with a short example syntax.","Answer",{"name":110,"@type":105,"acceptedAnswer":111},"Which CSS background-related properties and values are summarized here?",{"text":112,"@type":108},"It provides tables for background-color, background-image, background-origin, background-position, background-size, background-repeat, and background-attachment.",{"name":114,"@type":105,"acceptedAnswer":115},"How does the cheat sheet describe flexbox layout configuration?",{"text":116,"@type":108},"It summarizes key flexbox properties including display: flex, flex-direction, justify-content, align-items, order, and align-self, along with brief meanings for each.","https://schema.org",{"og:url":78,"og:type":119,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":121,"canonical":78},"index,follow",{"doc_id":123,"site_id":56},573466,1792014840,{"code":4,"msg":5,"data":126},{"doc_id":123,"user_id":127,"nickname":88,"user_avatar":128,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":129,"file_id":130,"file_url":131,"file_type":132,"file_size":133,"view_count":9,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":47,"language":134,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":135,"faqs":136,"seo_title":137,"seo_description":61,"update_tm":138,"read_time":73},962090769181,"https://ap-avatar.wpscdn.com/davatar_6f874abed73319feea01a86fa6f0fab8","CSE 154: Web Programming CSS “Cheat Sheet”  \nSelector Types  \n\n| Name | Description | Example(s) |\n| --- | --- | --- |\n| Universal | Any element | . foo * { font : 10pt Arial; } |\n| Element | Any element of a given type | h1 { text-decoration : underline; } |\n| Grouping | Multiple elements of different types | h1, h2, h3 { color: purple; } |\n| Class | Elements with the given class name | .example { text-decoration : underline; } |\n| Id | Single element with the given id | \\#example { text-decoration : overline; } |\n| Descendant | Elements that are children at any level of another specified element | \\#example h1 {\u003Cbr>text-decoration : underline;\u003Cbr>} |\n| Child | Elements that are direct children of another specified element | \\#example > p { font-weight : bold; } |\n| Attribute | Elements that have the specified attribute | input [selected] - inputs that have the selected attribute\u003Cbr>input [name=’test’] - inputs that have a name ’test’ |\n\nCSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19  \nFor the following property and value tables, anything emphasized represents values that should be replaced with specific units (e.g. , length should be replaced with a px , pt , or em for many properties, and color should be replaced with a valid color value such as a hex or rgb code) .  \nA use of | refers to separation of possible values (where you cannot provide two of these possible values for one property) and [value value value] refers to a grouping of possible values that can optionally be used together (e.g. , [h-shadow v-shadow blur spread color] for box-shadow) .  \nBackground Styles  \n\n| Property | Values |\n| --- | --- |\n| background-color | color | transparent |\n| background-image | url | none |\n| background-origin | border-box | padding-box | content-box |\n| background-position | top left | top center | top right |\u003Cbr>center left | center center | center\u003Cbr>right | bottom left | bottom center |\u003Cbr>bottom right [x-% y-% ] | [x-pos y-pos\u003Cbr>] |\n| background-size | length | % | auto | cover | contain |\n| background-repeat | repeat | repeat-x | repeat-y | no-repeat |\n| background-attachment | scroll | fixed |\n\nCSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19  \nBorder Styles  \nNote: Replace ’*’ with any side of the border (top, right, left, bottom) for the desired effect.  \nExample style: ’border: 2px solid red’ applies a solid red border with a width of 2px to all four sides of the element, while ’border-left : 2px solid red’ only applies that border to the left border’.  \n\n| Property | Values |\n| --- | --- |\n| border , border- * (shorthand) | border-width ,\u003Cbr>border-*-width\u003Cbr>border-style ,\u003Cbr>border-*-style\u003Cbr>border-color , border-*-color |\n| border-width ,\u003Cbr>border-*-width | thin | medium | thick | length |\n| border-style ,\u003Cbr>border-*-style | none | hidden | dotted | dashed | solid |\u003Cbr>double | groove | rigid | inset | outset |\n| border-color ,\u003Cbr>border-*-color | color |\n| box-shadow | none | inset | [h-shadow v-shadow blur spread color ] |\n| border-radius | length |\n\nFont and Text Styles  \n\n| Property | Values |\n| --- | --- |\n| font-style | normal | italic | oblique | inherit |\n| font-family | fontname |\n| font-size | length | % |\n| font-weight | normal | bold | inherit |\n| text-align | left | right | center | justify |\n| text-decoration | none | [underline overline line-through blink] |\n| text-shadow | none | [ color length ] |\n| text-indent | length | % |\n| text-transform | none | capitalize | uppercase | lowercase |\n| list-style-type | none | asterisks | box | check | diamond | disc |\u003Cbr>hyphen | square | decimal | lower-roman | upper-roman | kower-alpha | upper-alpha | lower-greek | upper-greek | lower-latin | upper-latin | footnotes |\n\nCSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19  \nColor Values  \n\n| Value | Description |\n| --- | --- |\n| colorname | Standard name of color, such as red, blue, purple, etc. |\n| rgb (redvalue,\u003Cbr>greenvalue,\u003Cbr>bluevalue) | Example: red = rgb(255 , 0 , 0) or red = rgb( 100%, ","cbCaiap0fb33hmd3","https://ap.wps.com/l/cbCaiap0fb33hmd3","pdf",164828,"English","# Selector Types\n# Background Styles\n# Border Styles\n# Font and Text Styles\n# Color Values\n# Box Model\n# Flex Box","[{\"question\":\"What are the main CSS selector types included in this cheat sheet?\",\"answer\":\"It lists universal, element, grouping, class, id, descendant, child, and attribute selectors, each with a short example syntax.\"},{\"question\":\"Which CSS background-related properties and values are summarized here?\",\"answer\":\"It provides tables for background-color, background-image, background-origin, background-position, background-size, background-repeat, and background-attachment.\"},{\"question\":\"How does the cheat sheet describe flexbox layout configuration?\",\"answer\":\"It summarizes key flexbox properties including display: flex, flex-direction, justify-content, align-items, order, and align-self, along with brief meanings for each.\"}]","CSE 154 CSS Cheat Sheet - Summer 2019 - Version 06/23/19 | PDF",1791940381]