CSE 154 CSS Cheat Sheet - Summer 2019 - Version 06/23/19

Oct 14, 2026

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.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages5

Reading Time2 min

AccessFree to download

Selector Types

Background Styles

Border Styles

Font and Text Styles

Color Values

Box Model

Flex Box

CSE 154: Web Programming CSS “Cheat Sheet” Selector Types | Name | Description | Example(s) | | --- | --- | --- | | Universal | Any element | . foo * { font : 10pt Arial; } | | Element | Any element of a given type | h1 { text-decoration : underline; } | | Grouping | Multiple elements of different types | h1, h2, h3 { color: purple; } | | Class | Elements with the given class name | .example { text-decoration : underline; } | | Id | Single element with the given id | \#example { text-decoration : overline; } | | Descendant | Elements that are children at any level of another specified element | \#example h1 {
text-decoration : underline;
} | | Child | Elements that are direct children of another specified element | \#example > p { font-weight : bold; } | | Attribute | Elements that have the specified attribute | input [selected] - inputs that have the selected attribute
input [name=’test’] - inputs that have a name ’test’ | CSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19 For 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) . A 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) . Background Styles | Property | Values | | --- | --- | | background-color | color | transparent | | background-image | url | none | | background-origin | border-box | padding-box | content-box | | background-position | top left | top center | top right |
center left | center center | center
right | bottom left | bottom center |
bottom right [x-% y-% ] | [x-pos y-pos
] | | background-size | length | % | auto | cover | contain | | background-repeat | repeat | repeat-x | repeat-y | no-repeat | | background-attachment | scroll | fixed | CSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19 Border Styles Note: Replace ’*’ with any side of the border (top, right, left, bottom) for the desired effect. Example 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’. | Property | Values | | --- | --- | | border , border- * (shorthand) | border-width ,
border-*-width
border-style ,
border-*-style
border-color , border-*-color | | border-width ,
border-*-width | thin | medium | thick | length | | border-style ,
border-*-style | none | hidden | dotted | dashed | solid |
double | groove | rigid | inset | outset | | border-color ,
border-*-color | color | | box-shadow | none | inset | [h-shadow v-shadow blur spread color ] | | border-radius | length | Font and Text Styles | Property | Values | | --- | --- | | font-style | normal | italic | oblique | inherit | | font-family | fontname | | font-size | length | % | | font-weight | normal | bold | inherit | | text-align | left | right | center | justify | | text-decoration | none | [underline overline line-through blink] | | text-shadow | none | [ color length ] | | text-indent | length | % | | text-transform | none | capitalize | uppercase | lowercase | | list-style-type | none | asterisks | box | check | diamond | disc |
hyphen | square | decimal | lower-roman | upper-roman | kower-alpha | upper-alpha | lower-greek | upper-greek | lower-latin | upper-latin | footnotes | CSE 154 CSS Cheat Sheet Summer 2019-Version 06/23/19 Color Values | Value | Description | | --- | --- | | colorname | Standard name of color, such as red, blue, purple, etc. | | rgb (redvalue,
greenvalue,
bluevalue) | Example: red = rgb(255 , 0 , 0) or red = rgb( 100%,

FAQs

What are the main CSS selector types included in this cheat sheet?

It lists universal, element, grouping, class, id, descendant, child, and attribute selectors, each with a short example syntax.

Which CSS background-related properties and values are summarized here?

It provides tables for background-color, background-image, background-origin, background-position, background-size, background-repeat, and background-attachment.

How does the cheat sheet describe flexbox layout configuration?

It summarizes key flexbox properties including display: flex, flex-direction, justify-content, align-items, order, and align-self, along with brief meanings for each.

Oct 14, 2026

Upload by Rainbow Cat