Cascading Style Sheets or CSS define the look and feel of the web as we know it. While HTML and JavaScript focus on the functional side of the web, CSS deals with the visual aspects of it.
Need help navigating the world that is CSS3? Download our “Essential CSS3 Properties Cheat Sheet” today!
After you’ve learned how to build static webpages with HTML, it’s time to discover how to style them and make them presentable with CSS. And our CSS3 properties cheat sheet below can help you with that! It covers the essential syntax you need to know about in CSS3, which is the latest version of CSS.
A working knowledge of CSS helps you customize colors, fonts, borders, backgrounds, layouts, and much more on webpages in a streamlined manner. What’s more, it comes in handy while designing web and mobile applications too.
FREE DOWNLOAD: This cheat sheet is available as a downloadable PDF from our distribution partner, TradePub. You will have to complete a short form to access it for the first time only. Download Essential CSS3 Properties Cheat Sheet.
The Essential CSS3 Properties Cheat Sheet
| Shortcut | Action |
|---|---|
| Background Properties | |
| background | Defines a variety of background properties within one declaration. |
| background-attachment | Specifies whether the background image is fixed or scrolls with the webpage. |
| background-color | Defines the background color of an element on the webpage. |
| background-image | Defines an element’s background image. |
| background-clip | Specifies how far the background images or color extends for an element. |
| background-origin | Specifies the positioning area of the background images. |
| background-position | Defines the origin of a background image. |
| background-repeat | Specifies how the background image is tiled. |
| background-size | Specifies the size of the background images. |
| Border Properties | |
| border | Sets the border width, style, and color for all four sides of an element. |
| border-bottom | Sets the width, style, and color for the bottom border of an element. |
| border-bottom-color | Sets the color of the bottom border of an element. |
| border-bottom-left-radius | Defines the shape of the bottom-left border corner of an element. |
| border-bottom-right-radius | Defines the shape of the bottom-right border corner of an element. |
| border-bottom-style | Sets the style of the bottom border of an element. |
| border-bottom-width | Sets the width of the bottom border of an element. |
| border-color | Sets the color of the border on all the four sides of an element. |
| border-image | Specifies how an image is to be used in place of the border styles. |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box. |
| border-image-repeat | Specifies how the border image is tiled. |
| border-image-slice | Specifies the inward offsets of the image-border. |
| border-image-source | Specifies the location of the image to be used as a border. |
| border-image-width | Specifies the width of the image-border. |
| border-left | Sets the width, style, and color of the left border of an element. |
| border-left-color | Sets the color of the left border of an element. |
| border-left-style | Sets the style of the left border of an element. |
| border-left-width | Sets the width of the left border of an element. |
| border-radius | Defines the shape of the border corners of an element. |
| border-right | Sets the width, style, and color of the right border of an element. |
| border-right-color | Sets the color of the right border of an element. |
| border-right-style | Sets the style of the right border of an element. |
| border-right-width | Sets the width of the right border of an element. |
| border-style | Sets the style of the border on all the four sides of an element. |
| border-top | Sets the width, style, and color of the top border of an element. |
| border-top-color | Sets the color of the top border of an element. |
| border-top-left-radius | Defines the shape of the top-left border corner of an element. |
| border-top-right-radius | Defines the shape of the top-right border corner of an element. |
| border-top-style | Sets the style of the top border of an element. |
| border-top-width | Sets the width of the top border of an element. |
| border-width | Sets the width of the border on all the four sides of an element. |
| Color Properties | |
| color | Defines and sets the color for text. |
| opacity | Defines the transparency of an element. |
| Dimension Properties | |
| height | Defines the height of an element. |
| max-height | Defines the maximum height of an element. |
| max-width | Defines the maximum width of an element. |
| min-height | Defines the minimum height of an element. |
| min-width | Defines the minimum width of an element. |
| width | Specify the width of an element. |
| Generated Content Properties | |
| content | Inserts generated content. |
| quotes | Specifies quotation marks for embedded quotations. |
| counter-reset | Creates or resets one or more counters. |
| counter-increment | Increments one or more counter values. |
| Flexible Box Layout | |
| align-content | Specifies the alignment of flexible container’s items. |
| align-items | Specifies the default alignment for items. |
| align-self | Specifies the alignment for selected items. |
| flex | Specifies the components of a flexible length. |
| flex-basis | Specifies the initial main size of the flex item. |
| flex-direction | Specifies the direction of the flexible items. |
| flex-flow | A shorthand property for the flex-direction and the flex-wrap properties. |
| flex-grow | Specifies how the flex item will grow relative to the other items inside the flex container. |
| flex-shrink | Specifies how the flex item will shrink relative to the other items inside the flex container. |
| flex-wrap | Specifies whether the flexible items should wrap or not. |
| justify-content | Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved. |
| order | Specifies the order in which a flex items are displayed and laid out within a flex container. |
| Font Properties | |
| font | Defines a variety of font properties within one declaration like the font-style, font-variant, font-weight, font-size/line-height, and the font-family. |
| font-family | Defines a list of fonts for element. |
| font-size | Defines the font size for the text. |
| font-size-adjust | Preserves the readability of text when font fallback occurs. |
| font-stretch | Selects a normal, condensed, or expanded face from a font. |
| font-style | Defines the font style for the text. |
| font-variant | Specifies the font variant. |
| font-weight | Specifies the font weight of the text. |
| List Properties | |
| list-style | Defines the display style for a list and list elements. |
| list-style-image | Specifies the image to be used as a list-item marker. |
| list-style-position | Specifies the position of the list-item marker. |
| list-style-type | Specifies the marker style for a list-item. |
| Margin Properties | |
| margin | Sets the margin on all four sides of the element. |
| margin-bottom | Sets the bottom margin of the element. |
| margin-left | Sets the left margin of the element. |
| margin-right | Sets the right margin of the element. |
| margin-top | Sets the top margin of the element. |
| Multi-Column Layout Properties | |
| column-count | Specifies the number of columns in a multi-column element. |
| column-fill | Specifies how columns will be filled. |
| column-gap | Specifies the gap between the columns in a multi-column element. |
| column-rule | Specifies a straight line, or “rule”, to be drawn between each column in a multi-column element. |
| column-rule-color | Specifies the color of the rules drawn between columns in a multi-column layout. |
| column-rule-style | Specifies the style of the rule drawn between the columns in a multi-column layout. |
| column-rule-width | Specifies the width of the rule drawn between the columns in a multi-column layout. |
| column-span | Specifies how many columns an element spans across in a multi-column layout. |
| column-width | Specifies the optimal width of the columns in a multi-column element. |
| columns | A shorthand property for setting column-width and column-count properties. |
| column-count | Specifies the number of columns in a multi-column element. |
| Outline Properties | |
| outline | Sets the width, style, and color for all four sides of an element’s outline. |
| outline-color | Sets the color of the outline. |
| outline-offset | Set the space between an outline and the border edge of an element. |
| outline-style | Sets a style for an outline. |
| outline-width | Sets the width of the outline. |
| Padding Properties | |
| padding | Sets the padding on all four sides of the element. |
| padding-bottom | Sets the padding to the bottom side of an element. |
| padding-left | Sets the padding to the left side of an element. |
| padding-right | Sets the padding to the right side of an element. |
| padding-top | Sets the padding to the top side of an element. |
| Print Properties | |
| page-break-after | Inserts a page break after an element. |
| page-break-before | Inserts a page break before an element. |
| page-break-inside | Inserts a page break inside an element. |
| Table Properties | |
| border-collapse | Specifies whether table cell borders are connected or separated. |
| border-spacing | Sets the spacing between the borders of adjacent table cells. |
| caption-side | Specifies the position of table’s caption. |
| empty-cells | Shows or hides borders and backgrounds of empty table cells. |
| table-layout | Specifies a table layout algorithm. |
| border-collapse | Specifies whether table cell borders are connected or separated. |
| Text Properties | |
| direction | Defines the text direction/writing direction. |
| tab-size | Specifies the length of the tab character. |
| text-align | Sets the horizontal alignment of inline content. |
| text-align-last | Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify. |
| text-decoration | Specifies the decoration added to text. |
| text-decoration-color | Specifies the color of the text-decoration-line. |
| text-decoration-line | Specifies what kind of line decorations are added to the element. |
| text-decoration-style | Specifies the style of the lines specified by the text-decoration-line property |
| text-indent | Indents the first line of text. |
| text-justify | Specifies the justification method to use when the text-align property is set to justify. |
| text-overflow | Specifies how the text content will be displayed, when it overflows the block containers. |
| text-shadow | Applies one or more shadows to the text content of an element. |
| text-transform | Transforms the case of the text. |
| line-height | Sets the height between lines of text. |
| vertical-align | Sets the vertical positioning of an element relative to the current text baseline. |
| letter-spacing | Sets the extra spacing between letters. |
| word-spacing | Sets the spacing between words. |
| white-space | Specifies how white space inside the element is handled. |
| word-break | Specifies how to break lines within words. |
| word-wrap | Specifies whether to break words when the content overflows the boundaries of its container. |
| Transform Properties | |
| backface-visibility | Specifies whether or not the “back” side of a transformed element is visible when facing the user. |
| perspective | Defines the perspective from which all child elements of the object are viewed. |
| perspective-origin | Defines the origin (the vanishing point for the 3D space) for the perspective property. |
| transform | Applies a 2D or 3D transformation to an element. |
| transform-origin | Defines the origin of transformation for an element. |
| transform-style | Specifies how nested elements are rendered in 3D space. |
| Transition Properties | |
| transition | Defines the transition between two states of an element. |
| transition-delay | Specifies when the transition effect will start. |
| transition-duration | Specifies the number of seconds or milliseconds a transition effect should take to complete. |
| transition-property | Specifies the names of the CSS properties to which a transition effect should be applied. |
| transition-timing-function | Specifies the speed curve of the transition effect. |
| Visual Formatting Properties | |
| display | Specifies how an element is displayed onscreen. |
| position | Specifies how an element is positioned. |
| top | Specifies the location of the top edge of the positioned element. |
| right | Specifies the location of the right edge of the positioned element. |
| bottom | Specifies the location of the bottom edge of the positioned element. |
| left | Specifies the location of the left edge of the positioned element. |
| float | Specifies whether or not a box should float. |
| clear | Specifies the placement of an element in relation to floating elements. |
| z-index | Specifies a layering or stacking order for positioned elements. |
| overflow | Specifies the treatment of content that overflows the element’s box. |
| overflow-x | Specifies how to manage the content when it overflows the width of the element’s content area. |
| overflow-y | Specifies how to manage the content when it overflows the height of the element’s content area. |
| resize | Specifies whether or not an element is resizable by the user. |
| clip | Defines the clipping region. |
| visibility | Specifies whether or not an element is visible. |
| cursor | Specifies the type of cursor. |
| box-shadow | Applies one or more drop-shadows to the element’s box. |
| box-sizing | Alters the default CSS box model. |
| Animation Properties | |
| animation | Specifies the behavior of all animations. |
| animation-delay | Specifies when the animation will start with a delay. |
| animation-direction | Specifies whether the animation should play forward, backward, or in alternate cycles. |
| animation-duration | Specifies the number of seconds or milliseconds an animation should take to complete one cycle. |
| animation-fill-mode | Specifies how a CSS animation should apply styles to its target before and after it is executing. |
| animation-iteration-count | Specifies the number of times an animation cycle should be played before stopping. |
| animation-name | Specifies the name of @keyframes defined animations that should be applied to the selected element. |
| animation-play-state | Specifies whether the animation is running or paused. |
| animation-timing-function | Specifies how a CSS animation should progress over the duration of each cycle. |
Go Beyond the Basics of CSS
Once you’ve mastered the building blocks of CSS, we recommend upgrading your CSS skills and learning JavaScript to take your webpages to a new level of stunning.
Image Credit: Nick Karvounis on Unsplash
Read the full article: The Essential CSS3 Properties Cheat Sheet
