Part of the CSS3 For Dummies Cheat Sheet
Some CSS3 properties are rarely used; many others are used frequently enough that developers should know about them. Properties and their associated values form the basis of the formatting you perform using CSS3. Here is a list of the properties you’ll find yourself using most often when working with CSS3:
background: Defines the content for the background of an element. The value for this property is often a function, such as linear-gradient().
background-attachment: Specifies how an image interacts with the rest of an element. You use the following keywords to configure this property: scroll, fixed, and local.
background-color: Specifies the background color of an entity, such as the underlying page color. You can use one of these techniques for defining the background color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.
background-image: Provides the location of a resource to use as the graphic for the background of an element. You use the url() function to specify the location.
background-repeat: Allows the background image to repeat or not repeat (using the no-repeat keyword) as needed. You can also choose to repeat the image only the horizontal (repeat-x) or vertical (repeat-y) directions.
background-size: Determines the size of the background image as an absolute value or a percentage.
border: Defines the kind of border to create by specifying one of the following keywords: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit. It’s also possible to individually change the style of each side of a border using the border-bottom-style, border-left-style, border-right-style, and border-top-style properties.
border-color: Specifies the color of the border surrounding an entity. You can use one of these techniques for defining the background color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.
border-image: Defines an image to use for the border content, rather than a line type. You normally use the url() function to specify the value of this property.
border-radius: Determines whether the corners of a border are rounded and the amount of rounding. When creating a rounded corner, you specify the amount of rounding. To remove a rounded corner, use the none keyword.
border-width: Determine the thickness of the border surrounding an element. You can define the border width using a keyword (medium, thick, or thin) or an actual measurement.
column-count: Specifies the number of columns to create. The width of the columns automatically fluctuates as the user resizes the browser window (or the browser displays a horizontal scrollbar to make it possible to scroll across columns when a specific width is set as well).
column-fill: Determines how the browser fills the columns (either filling one column at a time or filling all columns simultaneously with an even amount of content).
column-gap: Creates a gap between columns to make it easier to determine where one column ends and another begins.
column-rule: Creates a rule between columns so the user can see a physical separator. This property consists of color, style, and width.
column-rule-color: Determines with color of the rule used between columns.
column-rule-style: Determines the style of the rule used between columns.
column-rule-width: Determines the width of the rule used between columns.
column-span: Specifies the number of columns that an object can span.
column-width: Specifies a column width.
columns: Provides a shorthand method for defining both the column-count and column-width properties.
color: Specifies the foreground color of an entity, such as text. You can use one of these techniques for defining the color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.
content: Outputs the text or other resource specified as part of the element presentation. This property is often used to perform tasks such as adding arrows to visual elements. You specify the value using the url() function, Unicode character number preceded by a backslash (such as \27A8), or a keyword.
display: Specifies how to present certain element types on the page. You can use any of the following keywords to define the display type: none, box (or flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, or table-row-group.
float: Allows an image to float in the direction specified. You define this property using the following keywords: left, right, or none.
font-family: Defines the name of the font. Three are three font classifications typically used as part of CSS (and most CSS pages use all three unless you also specify the src property): specific, Web safe, and generic.
font-size: Determines the size of the font when compared to other fonts on the page or provides a specific font size. You can use one of these techniques for defining the font size: specific size, keyword (such as large or larger), and percentage.
font-style: Determines the style of font that the browser creates. The browser must support the style and the font must supply the style in order for this property to take effect. The font style keywords are: normal, italic, oblique (normally a stronger italic), and inherit.
font-variant: Specifies whether the font should be presented in a variant form. Not all browsers and fonts support this feature. The keywords for this property are normal, small-caps, and inherit.
font-weight: Determines the relative darkness of the font and the width of its strokes. There are two methods for defining the font weight: numeric and keyword (such as bold).
height: Indicates the vertical size of an element.
left: Indicates the leftmost location of an element on a page.
list-style: Defines the appearance of a list element. You can define the kind of markers to use, the position of the markers, and whether the markers are actually created using images, rather than standard characters.
margin: Specifies the amount of space between the border of an element and the margin of another element.
margin-bottom: Indicates the bottommost location of an element margin on a page.
margin-left: Indicates the leftmost location of an element margin on a page.
margin-top: Indicates the topmost location of an element margin on a page.
padding: Specifies the amount of space between the border of an element and the content within the element.
position: Indicates the placement of elements on a page. You specify the placement using these keywords: static (the elements are flowed), absolute (the elements appear in a specific location, even if such placement would overwrite another element), fixed (the elements are placed relative to the browser window), or relative (the elements are placed relative to parent elements).
text-align: Specifies the positioning of the text on a line. You specify the alignment using the justify, right, center, and left keywords.
text-decoration: Defines the addition of a characteristic, such as underline, overline, or line-through to the font. This property works everywhere, so you don’t need to worry whether someone viewing your page on a television or using a smartphone will get your message.
text-overflow: Defines the action that will take place when the text overflows the box used to contain it. Acceptable values are: clip, ellipses, or a string value you provide.
text-shadow: Displays a shadow of the target characters at the same width as the target character. The positioning, strength, and color of the shadow are determined by the following properties: h-shadow (determines the horizontal positioning of the shadow), v-shadow (determines the vertical positioning of the shadow), blur (specifies the clarity of the shadow text), and color (defines the color of the outline).
visibility: Specifies the level of visibility for an element. You use the following keywords to configure this property: visible, hidden, or collapse.
width: Indicates the horizontal size of an element.
word-break: Determines how text is wrapped within a containing box when working with a non-CJK (Chinese Japanese Korean) language. Acceptable values are: normal, break-all, and hyphenate.
word-wrap: Determines how text is broken and then wrapped to the next line in a containing box when working with a non-CJK language. Acceptable values are: normal and break-word.