CSS Cheat Sheet

CSS Properties

CSS Syntax

Definition and Usage

Property Values

align-content align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit; The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

Tip: Use the justify-content property to align the items on the main-axis (horizontally).

Note: There must be multiple lines of items for this property to have any effect.

Default value: stretch

JavaScript syntax:  object.style.alignContent=”center”

 

Stretch –Default value. Lines stretch to take up the remaining space

Center –Lines are packed toward the center of the flex container

flex-start –Lines are packed toward the start of the flex container

flex-end –Lines are packed toward the end of the flex container

space-between –Lines are evenly distributed in the flex container

space-around –Lines are evenly distributed in the flex container, with half-size spaces on either end

initial –Sets this property to its default value. Read about initial »

inherit — Inherits this property from its parent element. Read about inherit

align-items align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit; The align-items property specifies the default alignment for items inside the flexible container.

Tip: Use the align-self property of each item to override the align-items property.

 

Stretch–Default. Items are stretched to fit the container

Center–            Items are positioned at the center of the container

flex-start–            Items are positioned at the beginning of the container

flex-end–            Items are positioned at the end of the container

baseline–            Items are positioned at the baseline of the container

initial–  Sets this property to its default value. Read about initial

inherit– Inherits this property from its parent element. Read about inherit

align-self align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit; The align-self property specifies the alignment for the selected item inside the flexible container.

Note: The align-self property overrides the flexible container’s align-items property.

 

auto      Default. The element inherits its parent container’s align-items property, or “stretch” if it has no parent container

stretch  The element is positioned to fit the container

center   The element is positioned at the center of the container

flex-start            The element is are positioned at the beginning of the container

flex-end The element is positioned at the end of the container

baseline The element is positioned at the baseline of the container

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element. Read about inherit

Backface-visibility backface-visibility: visible|hidden|initial|inherit; The backface-visibility property defines whether or not an element should be visible when not facing the screen.

This property is useful when an element is rotated, and you do not want to see its backside.

To better understand this property, view a demo.

 

visible  Default value. The backside is visible

hidden The backside is not visible

initial   Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

Background      
Background-attachment background-attachment: scroll|fixed|local|initial|inherit; The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. scroll     The background scrolls along with the element. This is default

fixed     The background is fixed with regard to the viewport

local      The background scrolls along with the element’s contents

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element. Read about inherit

Background-blend-mode background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity; The background-blend-mode property defines the blending mode of each background layer (color and/or image). normal  This is default. Sets the blending mode to normal

multiply Sets the blending mode to multiply

screen   Sets the blending mode to screen

overlay Sets the blending mode to overlay

darken  Sets the blending mode to darken

lighten   Sets the blending mode to lighten

color-dodge            Sets the blending mode to color-dodge

saturation            Sets the blending mode to saturation

color     Sets the blending mode to color

luminosity            Sets the blending mode to luminosity

Background-clip background-clip: border-box|padding-box|content-box|initial|inherit; The background-clip property specifies the painting area of the background. border-box Default value. The background is clipped to the border box

padding-box            The background is clipped to the padding box

content-box            The background is clipped to the content box

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Background-color background-color: color|transparent|initial|inherit; The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Use a background color and a text color that makes the text easy to read.

 

color     Specifies the background color. Look at CSS Color Values for a complete list of possible color values.

transparent            Specifies that the background color should be transparent. This is default

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

Background-image background-image: url|none|initial|inherit; The background-image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Tip: Always set a background-color to be used if the image is unavailable.

 

url(‘URL’)            The URL to the image. To specify more than one image, separate the URLs with a comma

none     No background image will be displayed. This is default

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

       
Background-origin background-origin: padding-box|border-box|content-box|initial|inherit;

 

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to “fixed”, this property has no effect.

 

padding-box            Default value. The background image starts from the upper left corner of the padding edge

border-box            The background image starts from the upper left corner of the border

content-box            The background image starts from the upper left corner of the content

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Background-position background-position: value; The background-position property sets the starting position of a background image.

Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

 

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom    If you only specify one keyword, the other value will be “center”

x% y%  The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%

xpos ypos            The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

Background-repeat background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

 

repeat   The background image will be repeated both vertically and horizontally. This is default

repeat-x            The background image will be repeated only horizontally

repeat-y            The background image will be repeated only vertically

no-repeat            The background-image will not be repeated

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

 

 

 

 

 

 

 

     
Background-size background-size: auto|length|cover|contain|initial|inherit; The background-size property specifies the size of the background images. auto      Default value. The background-image contains its width and height

length   Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”

percentage            Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”

cover    Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

contain  Scale the image to the largest size such that both its width and its height can fit inside the content area

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

Box-sizing box-sizing: content-box|border-box|initial|inherit; The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?

 

content-box            Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box            The width and height properties (and min/max properties) includes content, padding and border, but not the margin

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Display display: value; The display property specifies the type of box used for an HTML element. inline     Default value. Displays an element as an inline element (like <span>)

block     Displays an element as a block element (like <p>)

flex       Displays an element as an block-level flex container. New in CSS3

inline-block            Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

inline-flex            Displays an element as an inline-level flex container. New in CSS3

inline-table-The element is displayed as an inline-level tab

list-item Let the element behave like a <li> element

run-in    Displays an element as either block or inline, depending on context

table     Let the element behave like a <table> element

table-caption      Let the element behave like a <caption> element

table-column-group            Let the element behave like a <colgroup> element

table-header-group            Let the element behave like a <thead> element

table-footer-group            Let the element behave like a <tfoot> element

table-row-group Let the element behave like a <tbody> element

table-cell           Let the element behave like a <td> element

table-column      Let the element behave like a <col> element

table-row           Let the element behave like a <tr> element

none     The element will not be displayed at all (has no effect on layout)

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

       
       
Flex flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.

Note: If the element is not a flexible item, the flex property has no effect.

 

flex-grow           A number specifying how much the item will grow relative to the rest of the flexible items

flex-shrink         A number specifying how much the item will shrink relative to the rest of the flexible items

flex-basis            The length of the item. Legal values: “auto”, “inherit”, or a number followed by “%”, “px”, “em” or any other length unit

auto      Same as 1 1 auto.

initial     Same as 0 1 auto.

none     Same as 0 0 auto.

inherit   Inherits this property from its parent element.

Flex-basis flex-basis: number|auto|initial|inherit; The flex-basis property specifies the initial length of a flexible item.

Note: If the element is not a flexible item, the flex-basis property has no effect.

 

number A length unit, or percentage, specifying the initial length of the flexible item(s)

auto      Default value. The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Flex-direction flex-direction: row|row-reverse|column|column-reverse|initial|inherit; The flex-direction property specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

 

row       Default value. The flexible items are displayed horizontally, as a row

row-reverse            Same as row, but in reverse order

column  The flexible items are displayed vertically, as a column

column-reverse            Same as column, but in reverse order

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Flex-flow flex-flow: flex-direction flex-wrap|initial|inherit; The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.

The flex-direction property specifies the direction of the flexible items.

The flex-wrap property specifies whether the flexible items should wrap or not.

Note: If the elements are not flexible items, the flex-flow property has no effect.

 

flex-direction            Possible values:

row

row-reverse

column

column-reverse

initial

inherit

Default value is “row”.

 

Specifying the direction of the flexible items

 

flex-wrap            Possible values:

 

nowrap

wrap

wrap-reverse

initial

inherit

Default value is “nowrap”.

 

Specifying whether the flexible items should wrap or not

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

       
       
Flex-grow flex-grow: number|initial|inherit; The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the flex-grow property has no effect.

 

number A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Flex-shrink flex-shrink: number|initial|inherit; The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Note: If the element is not a flexible item, the flex-shrink property has no effect.

 

number A number specifying how much the item will shrink relative to the rest of the flexible items. Default value is 1

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

Flex-wrap flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; The flex-wrap property specifies whether the flexible items should wrap or not.

Note: If the elements are not flexible items, the flex-wrap property has no effect.

 

nowrap  Default value. Specifies that the flexible items will not wrap

wrap     Specifies that the flexible items will wrap if necessary

wrap-reverse            Specifies that the flexible items will wrap, if necessary, in reverse order

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

@font-face @font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
With the @font-face rule, web designers do no longer have to use one of the “web-safe” fonts.

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

 

font-family            name            Required. Defines the name of the font.

src        URL            Required. Defines the URL(s) where the font should be downloaded from

font-stretch            normal

condensed

ultra-condensed

extra-condensed

semi-condensed

expanded

semi-expanded

extra-expanded

ultra-expanded            Optional. Defines how the font should be stretched. Default value is “normal”

font-style            normal

italic

oblique  Optional. Defines how the font should be styled. Default value is “normal”

font-weight            normal

bold

100 200 300 400 500 600 700 800 900       Optional. Defines the boldness of the font. Default value is “normal”

unicode-range            unicode-range    Optional. Defines the range of unicode characters the font supports. Default value is “U+0-10FFFF”

       
       
Font-family font-family: font|initial|inherit; The font-family property specifies the font for an element.

The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

  • family-name – The name of a font-family, like “times”, “courier”, “arial”, etc.
  • generic-family – The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the “style” attribute in HTML.

family-name

generic-family    A prioritized list of font family names and/or generic family names

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

Font-size font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit; The font-size property sets the size of a font. medium Sets the font-size to a medium size. This is default

xx-small            Sets the font-size to an xx-small size

x-small  Sets the font-size to an extra small size

small     Sets the font-size to a small size

large     Sets the font-size to a large size

x-large  Sets the font-size to an extra large size

xx-large            Sets the font-size to an xx-large size

smaller  Sets the font-size to a smaller size than the parent element

larger    Sets the font-size to a larger size than the parent element

length   Sets the font-size to a fixed size in px, cm, etc.

%         Sets the font-size to a percent of  the parent element’s font size

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

       
       
       
       
Font-size-adjust font-size-adjust: number|none|initial|inherit; The font-size-adjust property gives you better control of the font size when the first selected font is not available.

When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.

All fonts have an “aspect value” which is the size-difference between the lowercase letter “x” and the uppercase letter “X”.

When the browser knows the “aspect value” for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.

number Defines the aspect value to use

none     Default value. No font size adjustment

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Font-stretch font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit; The font-stretch property allows you to make text wider or narrower. ultra-condensed            Makes the text as narrow as it gets

extra-condensed            Makes the text narrower than condensed, but not as narrow as ultra-condensed

condensed            Makes the text narrower than semi-condensed, but not as narrow as extra-condensed

semi-condensed            Makes the text narrower than normal, but not as narrow as condensed

normal  Default value. No font stretching

semi-expanded            Makes the text wider than normal, but not as wide as expanded

expanded            Makes the text wider than semi-expanded, but not as wide as extra-expanded

extra-expanded            Makes the text wider than expanded, but not as wide as ultra-expanded

ultra-expanded            Makes the text as wide as it gets

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element. Read about inherit

Font-style font-style: normal|italic|oblique|initial|inherit; The font-style property specifies the font style for a text. normal  The browser displays a normal font style. This is default

italic      The browser displays an italic font style

oblique  The browser displays an oblique font style

initial     Sets this property to its default value.

inherit   Inherits this property from its parent element.

Justify-content justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; The justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

Tip: Use the align-items property to align the items on the cross-axis (vertically).

flex-start            Default value. Items are positioned at the beginning of the container

flex-end Items are positioned at the end of the container

center   Items are positioned at the center of the container

space-between            Items are positioned with space between the lines

space-around            Items are positioned with space before, between, and after the lines

initial     Sets this property to its default value. Read about initial

inherit   Inherits this property from its parent element.

       
       
@keyframes @keyframes animationname {keyframes-selector {css-styles;}} The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

 

animationname            Required. Defines the name of the animation.

keyframes-selector            Required. Percentage of the animation duration.

Legal values:

 

0-100%

from (same as 0%)

to (same as 100%)

 

Note: You can have many keyframes-selectors in one animation.

 

css-styles            Required. One or more legal CSS style properties

@media @media not|only mediatype and (media feature) {
CSS-Code;
}
The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution
  • and much more
all         Used for all media type devices

aural            Deprecated. Used for speech and sound synthesizers

braille            Deprecated. Used for braille tactile feedback devices

embossed            Deprecated. Used for paged braille printers

handheld            Deprecated. Used for small or handheld devices

print      Used for printers

projection            Deprecated. Used for projected presentations, like slides

screen   Used for computer screens, tablets, smart-phones etc.

speech  Used for screenreaders that “reads” the page out loud

tty            Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals

tv            Deprecated. Used for television-type devices

 

Author: MLDBoston

Technology Enthusiast!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s