کاربر:Zaman/صفحه تمرینcss5

از ویکی‌کد
پرش به ناوبری پرش به جستجو


///////////////////////////////////////////


CSS column-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify that the column width should be 100px:

div {

 column-width: 100px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The column-width property specifies the column width.

The number of columns will be the minimum number of columns needed to show all the content across the element.

column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columnWidth="100px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-width 50.0

4.0 -webkit-

10.0 52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1



CSS Syntax

column-width: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Default value. The column width will be determined by the browser Play it »
length A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

 column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

 column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columnWidth property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS columns Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the minimum width for each column, and the maximum number of columns:

div {

 columns: 100px 3;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The columns property is a shorthand property for:

  • column-width
  • column-count

The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns. By using this property, the multi-column layout will automatically break down into a single column at narrow browser widths, without the need of media queries or other rules.

Default value: auto auto
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.columns="100px 3"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
columns 50.0

4.0 -webkit-

10.0 52.0

9.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1



CSS Syntax

columns: auto|column-width column-count|initial|inherit;

Property Values

Value Description
auto Default value. Sets both the column-width and column-count to "auto"
column-width Defines the minimum width for each column
column-count Defines the maximum number of columns
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a <div> element into three columns:

div {

  column-count: 3;

}

Try it Yourself »

Example

Specify a 40 pixels gap between the columns:

div {

  column-gap: 40px;

}

Try it Yourself »

Example

Specify the width, style, and color of the rule between columns:

div {

 column-rule: 4px double #ff00ff;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Multiple Columns

HTML DOM reference: columns property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS content Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

The following example inserts the value of the href attribute in parenthesis after each <a> element:

a::after {

 content: " (" attr(href) ")";

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The content property is used with the ::before and ::after pseudo-elements, to insert generated content.

Default value: normal
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: You can't give an element a pseudo-class by using JavaScript,

but there are other ways to get the same result:Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
content 1.0 8.0 1.0 1.0 4.0


CSS Syntax

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Property Values

Value Description Example
normal Default value. Sets the content, if specified, to normal, which default is "none" (which is nothing) Try it »
none Sets the content, if specified, to nothing Try it »
counter Sets the content as a counter Try it »
attr(attribute) Sets the content as one of the selector's attribute Try it »
string Sets the content to the text you specify Try it »
open-quote Sets the content to be an opening quote Try it »
close-quote Sets the content to be a closing quote Try it »
no-open-quote Removes the opening quote from the content, if specified Try it »
no-close-quote Removes the closing quote from the content, if specified Try it »
url(url) Sets the content to be some kind of media (an image, a sound, a video, etc.) Try it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit Try it »

More Examples

Example

How to add bullet colors for <ul> or <ol> by removing their default bullets and adding an HTML entity that looks like bullets (•):

ul {

 list-style: none; /* Remove HTML bullets */

  padding: 0;

  margin: 0;

}


li {

  padding-left: 16px;

}


li::before {

  content: "•"; /* Insert content that looks like bullets */

  padding-right: 8px;

  color: blue; /* Or a color you prefer */

}

Try it Yourself »


Related Pages

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS counter-increment Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

  counter-reset: my-sec-counter;

}


h2::before {

 /* Increment "my-sec-counter" by 1 */

  counter-increment: my-sec-counter;

 content: "Section " counter(my-sec-counter) ". ";

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The counter-increment property increases or decreases the value of one or more CSS counters.

The counter-increment property is usually used together with the counter-reset property and the content property.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.counterIncrement = "subsection";Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
counter-increment 4.0 8.0 2.0 3.1 9.6


CSS Syntax

counter-increment: none|id|initial|inherit;

Property Values

Value Description
none Default value. No counters will be incremented
id number The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

  counter-reset: my-sec-counter;

}


h2::before {

 /* Decrement "my-sec-counter" by 1 */

  counter-increment: my-sec-counter -1;

  content: "Section " counter(my-sec-counter) ". ";

}

Try it Yourself »

Example

Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:

body {

  /* Set "section" to 0 */

 counter-reset: section;

}


h1 {

  /* Set "subsection" to 0 */

 counter-reset: subsection;

}


h1::before {

 /* Increment "section" by 1 */

  counter-increment: section;

  content: "Section " counter(section) ": ";

}


h2::before {

 /* Increment "subsection" by 1 */

  counter-increment: subsection;

  content: counter(section) "." counter(subsection) " ";

}

Try it Yourself »

Example

Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

 counter-reset: my-sec-counter;

}


h2::before {

 /* Increment "my-sec-counter" by 1 */

  counter-increment: my-sec-counter;

 content: counter(my-sec-counter, upper-roman) ". ";

}

Try it Yourself »


Related Pages

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element

CSS reference: content property

CSS reference: counter-reset property

HTML DOM reference: counterIncrement property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS counter-reset Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

  counter-reset: my-sec-counter;

}


h2::before {

 /* Increment "my-sec-counter" by 1 */

 counter-increment: my-sec-counter;

 content: "Section " counter(my-sec-counter) ". ";

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The counter-reset property creates or resets one or more CSS counters.

The counter-reset property is usually used together with the counter-increment property and the content property.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.counterReset="section"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
counter-reset 4.0 8.0 2.0 3.1 9.6


CSS Syntax

counter-reset: none|name number|initial|inherit;

Property Values

Value Description
none Default value. No counters will be reset
id number The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

  counter-reset: my-sec-counter;

}


h2::before {

 /* Decrement "my-sec-counter" by 1 */

  counter-increment: my-sec-counter -1;

 content: "Section " counter(my-sec-counter) ". ";

}

Try it Yourself »

Example

Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:

body {

  /* Set "section" to 0 */

  counter-reset: section;

}


h1 {

  /* Set "subsection" to 0 */

 counter-reset: subsection;

}


h1::before {

 /* Increment "section" by 1 */

  counter-increment: section;

  content: "Section " counter(section) ": ";

}


h2::before {

 /* Increment "subsection" by 1 */

  counter-increment: subsection;

  content: counter(section) "." counter(subsection) " ";

}

Try it Yourself »

Example

Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:

body {

 /* Set "my-sec-counter" to 0 */

  counter-reset: my-sec-counter;

}


h2::before {

 /* Increment "my-sec-counter" by 1 */

  counter-increment: my-sec-counter;

 content: counter(my-sec-counter, upper-roman) ". ";

}

Try it Yourself »


Related Pages

CSS reference: ::before pseudo element

CSS reference: ::after pseudo element

CSS reference: content property

CSS reference: counter-increment property

HTML DOM reference: counterReset property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS cursor Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

CSS can generate a bunch of different mouse cursors:

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

Try it Yourself »


Definition and Usage

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Default value: auto
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.cursor="crosshair"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
cursor 5.0 5.5 4.0 5.0 9.6


CSS Syntax

cursor: value;

Property Values

Value Description Play it
alias The cursor indicates an alias of something is to be created Play it »
all-scroll The cursor indicates that something can be scrolled in any direction Play it »
auto Default. The browser sets a cursor Play it »
cell The cursor indicates that a cell (or set of cells) may be selected Play it »
context-menu The cursor indicates that a context-menu is available Play it »
col-resize The cursor indicates that the column can be resized horizontally Play it »
copy The cursor indicates something is to be copied Play it »
crosshair The cursor render as a crosshair Play it »
default The default cursor Play it »
e-resize The cursor indicates that an edge of a box is to be moved right (east) Play it »
ew-resize Indicates a bidirectional resize cursor Play it »
grab The cursor indicates that something can be grabbed Play it »
grabbing The cursor indicates that something can be grabbed Play it »
help The cursor indicates that help is available Play it »
move The cursor indicates something is to be moved Play it »
n-resize The cursor indicates that an edge of a box is to be moved up (north) Play it »
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) Play it »
nesw-resize Indicates a bidirectional resize cursor Play it »
ns-resize Indicates a bidirectional resize cursor Play it »
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) Play it »
nwse-resize Indicates a bidirectional resize cursor Play it »
no-drop The cursor indicates that the dragged item cannot be dropped here Play it »
none No cursor is rendered for the element Play it »
not-allowed The cursor indicates that the requested action will not be executed Play it »
pointer The cursor is a pointer and indicates a link Play it »
progress The cursor indicates that the program is busy (in progress) Play it »
row-resize The cursor indicates that the row can be resized vertically Play it »
s-resize The cursor indicates that an edge of a box is to be moved down (south) Play it »
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) Play it »
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) Play it »
text The cursor indicates text that may be selected Play it »
URL A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used Play it »
vertical-text The cursor indicates vertical-text that may be selected Play it »
w-resize The cursor indicates that an edge of a box is to be moved left (west) Play it »
wait The cursor indicates that the program is busy Play it »
zoom-in The cursor indicates that something can be zoomed in Play it »
zoom-out The cursor indicates that something can be zoomed out Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

HTML DOM reference: cursor property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS direction Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the text direction to "right-to-left":

p.rtl {

 direction: rtl;

}

Try it Yourself »


Definition and Usage

The direction property specifies the text direction/writing direction within a block-level element.

Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.

Default value: ltr
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.direction="rtl"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
direction 2.0 5.5 1.0 1.3 9.2


CSS Syntax

direction: ltr|rtl|initial|inherit;

Property Values

Value Description Play it
ltr Text direction goes from left-to-right. This is default Play it »
rtl Text direction goes from right-to-left Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Text

HTML DOM reference: direction property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS display Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Use of some different display values:

p.ex1 {display: none;}

p.ex2 {display: inline;}

p.ex3 {display: block;}

p.ex4 {display: inline-block;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The display property specifies the display behavior (the type of rendering box) of an element.

In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

Default value: ?
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.display="none"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
display 4.0 8.0 3.0 3.1 7.0

Note: The values "flex" and "inline-flex" requires the -webkit- prefix to work in Safari.

Note: "display: contents" does not work in Edge/Internet Explorer.



CSS Syntax

display: value;

Property Values

Value Description Play it
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect Play it »
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width Play it »
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM Play it »
flex Displays an element as a block-level flex container Play it »
grid Displays an element as a block-level grid container Play it »
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Play it »
inline-flex Displays an element as an inline-level flex container Play it »
inline-grid Displays an element as an inline-level grid container Play it »
inline-table The element is displayed as an inline-level table Play it »
list-item Let the element behave like a <li> element Play it »
run-in Displays an element as either block or inline, depending on context Play it »
table Let the element behave like a <table> element Play it »
table-caption Let the element behave like a <caption> element Play it »
table-column-group Let the element behave like a <colgroup> element Play it »
table-header-group Let the element behave like a <thead> element Play it »
table-footer-group Let the element behave like a <tfoot> element Play it »
table-row-group Let the element behave like a <tbody> element Play it »
table-cell Let the element behave like a <td> element Play it »
table-column Let the element behave like a <col> element Play it »
table-row Let the element behave like a <tr> element Play it »
none The element is completely removed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

.a {

 display: contents;

  border: 2px solid red;

  background-color: #ccc;

 padding: 10px;

 width: 200px;

}


.b {

 border: 2px solid blue;

  background-color: lightblue;

 padding: 10px;

}

Try it Yourself »

Example

A demonstration of how to use the inherit property value:

body {

  display: inline;

}


p {

  display: inherit;

}

Try it Yourself »

Example

Set the direction of some flexible items inside a <div> element in reverse order:

div {

 display: flex;

 flex-direction: row-reverse;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Display and visibility

HTML DOM reference: display property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS empty-cells Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Display no borders on empty cells in a table:

table {

 empty-cells: hide;

}

Try it Yourself »


Definition and Usage

The empty-cells property sets whether or not to display borders on empty cells in a table.

Note: This property has no effect if border-collapse is "collapse".

Default value: show
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.emptyCells="hide"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
empty-cells 1.0 8.0 1.0 1.2 4.0


CSS Syntax

empty-cells: show|hide|initial|inherit;

Property Values

Value Description Play it
show Display borders on empty cells. This is default Play it »
hide Hide borders on empty cells Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Table

HTML DOM reference: emptyCells property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS filter Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Change all images to black and white (100% gray):

img {

 filter: grayscale(100%);

}

Try it Yourself »

Tip: More "Try it Yourself" examples below.


Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often <img>).

Default value: none
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.filter="grayscale(100%)"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
filter 53.0

18.0 -webkit-

13.0 35.0 9.1

6.0 -webkit-

40.0

15.0 -webkit-

Note: Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard "filter" property that has been deprecated. This was mostly used for opacity when needed support from IE8 and down.



CSS Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Tip: To use multiple filters, separate each filter with a space (See "More Examples" below).


Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Filter Description Play it
none Default value. Specifies no effects Play it »
blur(px) Applies a blur effect to the image. A larger value will create more blur.


If no value is specified, 0 is used.

Play it »
brightness(%) Adjusts the brightness of the image.


0% will make the image completely black.

100% (1) is default and represents the original image.

Values over 100% will provide brighter results.

Play it »
contrast(%) Adjusts the contrast of the image.


0% will make the image completely black.

100% (1) is default, and represents the original image.

Values over 100% will provide results with more contrast.

Play it »
drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image.


Possible values:

h-shadow - Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.


v-shadow - Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.


blur - Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).


spread - Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.


color - Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).


An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:


filter: drop-shadow(8px 8px 10px red);


Tip: This filter is similar to the box-shadow property.

Play it »
grayscale(%) Converts the image to grayscale.


0% (0) is default and represents the original image.

100% will make the image completely gray (used for black and white images).


Note: Negative values are not allowed.

Play it »
hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.


Note: Maximum value is 360deg.

Play it »
invert(%) Inverts the samples in the image.


0% (0) is default and represents the original image.

100% will make the image completely inverted.


Note: Negative values are not allowed.

Play it »
opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:


0% is completely transparent.

100% (1) is default and represents the original image (no transparency).


Note: Negative values are not allowed.

Tip: This filter is similar to the opacity property.

Play it »
saturate(%) Saturates the image.


0% (0) will make the image completely un-saturated.

100% is default and represents the original image.

Values over 100% provides super-saturated results.


Note: Negative values are not allowed.

Play it »
sepia(%) Converts the image to sepia.


0% (0) is default and represents the original image.

100% will make the image completely sepia.


Note: Negative values are not allowed.

Play it »
url() The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example:


filter: url(svg-url#element-id)

initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Blur Example

Apply a blur effect to the image:

img {

  filter: blur(5px);

}

Try it Yourself »

Blur Example 2

Apply a blurred background image:

img.background {

 filter: blur(35px);

}

Try it Yourself »

Brightness Example

Adjust the brightness of the image:

img {

  filter: brightness(200%);

}

Try it Yourself »

Contrast Example

Adjust the contrast of the image:

img {

  filter: contrast(200%);

}

Try it Yourself »

Drop Shadow Example

Apply a drop shadow effect to the image:

img {

  filter: drop-shadow(8px 8px 10px gray);

}

Try it Yourself »

Grayscale Example

Convert the image to grayscale:

img {

  filter: grayscale(50%);

}

Try it Yourself »

Hue Rotation Example

Apply a hue rotation on the image:

img {

  filter: hue-rotate(90deg);

}

Try it Yourself »

Invert Example

Invert the samples in the image:

img {

  filter: invert(100%);

}

Try it Yourself »

Opacity Example

Set the opacity level for the image:

img {

  filter: opacity(30%);

}

Try it Yourself »

Saturate Example

Saturate the image:

img {

  filter: saturate(800%);

}

Try it Yourself »

Sepia Example

Convert the image to sepia:

img {

  filter: sepia(100%);

}

Try it Yourself »

Using Multiple Filters

To use multiple filters, separate each filter with a space. Notice that the order is important (i.e. using grayscale() after sepia() will result in a completely gray image):

img {

 filter: contrast(200%) brightness(150%);

}

Try it Yourself »

All Filters

A demonstration of all filter functions:

.blur {

 filter: blur(4px);

}


.brightness {

  filter: brightness(0.30);

}


.contrast {

  filter: contrast(180%);

}


.grayscale {

 filter: grayscale(100%);

}


.huerotate {

  filter: hue-rotate(180deg);

}


.invert {

  filter: invert(100%);

}


.opacity {

 filter: opacity(50%);

}


.saturate {

 filter: saturate(7);

}


.sepia {

  filter: sepia(100%);

}


.shadow {

  filter: drop-shadow(8px 8px 10px green);

}

Try it Yourself »


Related Pages

CSS Tutorial: CSS Images

HTML DOM reference: filter property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let all the flexible items be the same length, regardless of its content:

#main div {

 -ms-flex: 1; /* IE 10 */

  flex: 1;

}

Try it Yourself »


Definition and Usage

The flex property is a shorthand property for:

  • flex-grow
  • flex-shrink
  • flex-basis

The flex property sets the flexible length on flexible items.

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

Default value: 0 1 auto
Inherited: no
Animatable: yes, see individual properties. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flex="1"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -ms- or -moz- specify the first version that worked with a prefix.

Property
flex 29.0

21.0 -webkit-

11.0

10.0 -ms-

28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Property Values

Value Description
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. Read about initial
none Same as 0 0 auto.
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex-basis property

CSS Reference: flex-direction property

CSS Reference: flex-flow property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

CSS Reference: flex-wrap property

HTML DOM reference: flex property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-basis Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the initial length of the second flex-item to 100 pixels:

div:nth-of-type(2) {

  flex-basis: 100px;

}

Try it Yourself »


Definition and Usage

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.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.flexBasis="200px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-basis 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-basis: number|auto|initial|inherit;

Property Values

Value Description Play it
number A length unit, or percentage, specifying the initial length of the flexible item(s) Play it »
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 Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex property

CSS Reference: flex-direction property

CSS Reference: flex-flow property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

CSS Reference: flex-wrap property

HTML DOM reference: flexBasis property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-direction Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the direction of the flexible items inside the <div> element in reverse order:

div {

  display: flex;

 flex-direction: row-reverse;

}


Try it Yourself »


Definition and Usage

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.

Default value: row
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flexDirection="column-reverse"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-direction 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Property Values

Value Description Play it
row Default value. The flexible items are displayed horizontally, as a row Play it »
row-reverse Same as row, but in reverse order Play it »
column The flexible items are displayed vertically, as a column Play it »
column-reverse Same as column, but in reverse order Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex-flow property

CSS Reference: flex-wrap property

CSS Reference: flex property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

CSS Reference: flex-basis property

HTML DOM reference: flexDirection property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-flow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make the flexible items display in reverse order, and wrap if necessary:

div {

  display: flex;

  flex-flow: row-reverse wrap;

}

Try it Yourself »


Definition and Usage

The flex-flow property is a shorthand property for:

  • flex-direction
  • flex-wrap

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

Default value: row nowrap
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flexFlow="column nowrap"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-flow 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Property Values

Value Description Play it
flex-direction Possible values:


row

row-reverse

column

column-reverse

initial

inherit

Default value is "row".

Specifying the direction of the flexible items

Play it »
flex-wrap Possible values:


nowrap

wrap

wrap-reverse

initial

inherit

Default value is "nowrap".

Specifying whether the flexible items should wrap or not

Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex property

CSS Reference: flex-direction property

CSS Reference: flex-wrap property

CSS Reference: flex-basis property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

HTML DOM reference: flexFlow property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-grow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let the second flex-item grow three times wider than the rest:

div:nth-of-type(1) {flex-grow: 1;}

div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

Try it Yourself »


Definition and Usage

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.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.flexGrow="5"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-grow 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-grow: number|initial|inherit;

Property Values

Value Description Play it
number A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0 Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex property

CSS Reference: flex-basis property

CSS Reference: flex-direction property

CSS Reference: flex-flow property

CSS Reference: flex-shrink property

CSS Reference: flex-wrap property

HTML DOM reference: flexGrow property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-shrink Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let the second flex-item shrink three times more than the rest:

div:nth-of-type(2) {

  flex-shrink: 3;

}

Try it Yourself »


Definition and Usage

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.

Default value: 1
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.flexShrink="5"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-shrink 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-shrink: number|initial|inherit;

Property Values

Value Description Play it
number A number specifying how much the item will shrink relative to the rest of the flexible items. Default value is 1 Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex property

CSS Reference: flex-basis property

CSS Reference: flex-direction property

CSS Reference: flex-flow property

CSS Reference: flex-grow property

CSS Reference: flex-wrap property

HTML DOM reference: flexShrink property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS flex-wrap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make the flexible items wrap if necessary:

div {

  display: flex;  

  flex-wrap: wrap;

}

Try it Yourself »


Definition and Usage

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.

Default value: nowrap
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.flexWrap="nowrap"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
flex-wrap 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Property Values

Value Description Play it
nowrap Default value. Specifies that the flexible items will not wrap Play it »
wrap Specifies that the flexible items will wrap if necessary Play it »
wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex property

CSS Reference: flex-flow property

CSS Reference: flex-direction property

CSS Reference: flex-basis property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

HTML DOM reference: flexWrap property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS float Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let an image float to the right:

img  {

  float: right;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The float property specifies how an element should float.

Note: Absolutely positioned elements ignore the float property!

Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.cssFloat="left"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
float 1.0 4.0 1.0 1.0 7.0


CSS Syntax

float: none|left|right|initial|inherit;

Property Values

Value Description Play it
none The element does not float, (will be displayed just where it occurs in the text). This is default Play it »
left The element floats to the left of its container Play it »
right The element floats the right of its container Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Let an image float to the left:

img  {

  float: left;

}

Try it Yourself »

Example

Let image be displayed just where it occurs in the text (float: none):

img  {

  float: none;

}

Try it Yourself »

Example

Let the first letter of a paragraph float to the left and style the letter:

span {

  float: left;

  width: 0.7em;

  font-size: 400%;

  font-family: algerian, courier;

 line-height: 80%;

}

Try it Yourself »

Example

Use float with a list of hyperlinks to create a horizontal menu:

.header, .footer {

  background-color: grey;

  color: white;

  padding: 15px;

}


.column {

  float: left;

  padding: 15px;

}


.clearfix::after {

 content: "";

  clear: both;

  display: table;

}


.menu {width: 25%;}

.content {width: 75%;}

Try it Yourself »

Example

Use float to create a homepage with a header, footer, left content and main content:

.header, .footer {

  background-color: grey;

  color: white;

 padding: 15px;

}


.column {

  float: left;

  padding: 15px;

}


.clearfix::after {

  content: "";

 clear: both;

 display: table;

}


.menu {width: 25%;}

.content {width: 75%;}

Try it Yourself »

Example

Do not allow floating elements on the left or the right side of a specified <p> element:

img {

  float: left;

}


p.clear {

  clear: both;

}

Try it Yourself »

Example

If a floating element is taller than the containing element, it will overflow outside its container. It is possible to fix this with the "clearfix hack":

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Float

HTML DOM reference: cssFloat property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set some font properties with the shorthand declaration:

p.a {

  font: 15px Arial, sans-serif;

}


p.b {

  font: italic small-caps bold 12px/30px Georgia, serif;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The font property is a shorthand property for:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Note: The line-height property sets the space between lines.

Default value: The default value of the font properties
Inherited: yes
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.font="italic small-caps bold 12px arial,sans-serif"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font 1.0 4.0 1.0 1.0 3.5

Note: See individual browser support for each value below.



CSS Syntax

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Property Values

Property/Value Description
font-style Specifies the font style. Default value is "normal"
font-variant Specifies the font variant. Default value is "normal"
font-weight Specifies the font weight. Default value is "normal"
font-size/line-height Specifies the font size and the line-height. Default value is "normal"
font-family Specifies the font family. Default value depends on the browser
caption Uses the font that are used by captioned controls (like buttons, drop-downs, etc.)
icon Uses the font that are used by icon labels
menu Uses the fonts that are used by dropdown menus
message-box Uses the fonts that are used by dialog boxes
small-caption A smaller version of the caption font
status-bar Uses the fonts that are used by the status bar
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A demonstration of some of the other font property values.

<p style="font:caption">The browser font used in captioned controls.</p>

<p style="font:icon">The browser font used in icon labels.</p>

<p style="font:menu">The browser font used in dropdown menus.</p>

<p style="font:message-box">The browser font used in dialog boxes.</p>

<p style="font:small-caption">A smaller version of the caption font.</p>

<p style="font:status-bar">The browser font used in the status bar.</p>

Try it Yourself »


Related Pages

CSS tutorial: CSS Font

HTML DOM reference: font property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS @font-face Rule

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify a font named "myFirstFont", and specify the URL where it can be found:

@font-face {

 font-family: myFirstFont;

  src: url(sansation_light.woff);

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.

In the @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:

div {

  font-family: myFirstFont;

}


Browser Support

The @font-face rule is supported in Internet Explorer, Firefox, Opera, Chrome, and Safari.

The numbers in the table specifies the first browser version that fully supports the font format.

Font format
TTF/OTF 4.0 9.0* 3.5 3.1 10.0
WOFF 5.0 9.0 3.6 5.1 11.1
WOFF2 36.0 Not supported 35.0* Not supported 26.0
SVG 4.0 Not supported Not supported 3.2 9.0
EOT Not supported 6.0 Not supported Not supported Not supported

*Edge and IE: The font format only works when set to be "installable".

*Firefox: Disabled by default, but can be enabled (need to set a flag to "true" to use WOFF2).



Syntax

@font-face {

 font-properties

}

Font descriptor Values Description
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"

More Examples

Example

You must add another @font-face rule containing descriptors for bold text:

@font-face {

 font-family: myFirstFont;

  src: url(sansation_bold.woff);

  font-weight: bold;

}

Try it Yourself »

The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.

This way you can have many @font-face rules for the same font.


Related Pages

CSS tutorial: CSS Web Fonts


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-family Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the font for two paragraphs:

p.a {

 font-family: "Times New Roman", Times, serif;

}


p.b {

  font-family: Arial, Helvetica, sans-serif;

}

Try it Yourself »


Definition and Usage

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.

Default value: depends on the browser
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.fontFamily="Verdana,sans-serif"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-family 1.0 4.0 1.0 1.0 3.5


CSS Syntax

font-family: family-name|generic-family|initial|inherit;

Property Values

Value Description Play it
family-name

generic-family

A prioritized list of font family names and/or generic family names Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontFamily property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-feature-settings Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify font-feature-settings:

/* enable small-caps */

.ex1 { font-feature-settings: "smcp" on; }


/* convert both upper and lowercase to small caps */

.ex2 { font-feature-settings: "c2sc", "smcp"; }


/* no common ligatures */

.ex3 { font-feature-settings: "liga" 0; }


/* enable automatic fractions */

.ex4 { font-feature-settings: "frac"; }

Try it Yourself »


Definition and Usage

The font-feature-settings property allows control over advanced typographic features in OpenType fonts.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.fontFeatureSettings="normal"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
font-feature-settings 48.0

16.0 -webkit-

10.0 34.0

15.0 -moz-

9.1 35.0

15.0 -webkit-



CSS Syntax

font-feature-settings: normal|feature-value;

Property Values

Value Description
normal Default. Use the default settings to lay out text
feature-value Format: string [1|0|on|off] Always a string of 4 ASCII characters.


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-kerning Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify that font kerning is applied:

div {

 font-kerning: normal;

}


Definition and Usage

The font-kerning property controls the usage of the kerning information stored in a font.

Tip: Kerning defines how letters are spaced.

Note: For fonts that do not include kerning data, this property will have no visible effect.

Default value: auto
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.fontKerning="normal"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
font-kerning 33.0

29.0 -webkit-

? 34.0 9.1

7.0 -webkit-

20.1

16.0 -webkit-



CSS Syntax

font-kerning: auto|normal|none;

Property Values

Value Description
auto Default. The browser determines whether font kerning should be applied or not
normal Specifies that font kerning is applied
none Specifies that font kerning is not applied


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-size Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the font size for different elements:

div.a {

  font-size: 15px;

}


div.b {

  font-size: large;

}


div.c {

  font-size: 150%;

}

Try it Yourself »


Definition and Usage

The font-size property sets the size of a font.

Default value: medium
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.fontSize="14px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-size 1.0 5.5 1.0 1.0 7.0


CSS Syntax

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Property Values

Value Description Play it
medium Sets the font-size to a medium size. This is default Play it »
xx-small Sets the font-size to an xx-small size Play it »
x-small Sets the font-size to an extra small size Play it »
small Sets the font-size to a small size Play it »
large Sets the font-size to a large size Play it »
x-large Sets the font-size to an extra large size Play it »
xx-large Sets the font-size to an xx-large size Play it »
smaller Sets the font-size to a smaller size than the parent element Play it »
larger Sets the font-size to a larger size than the parent element Play it »
length Sets the font-size to a fixed size in px, cm, etc. Read about length units Play it »
% Sets the font-size to a percent of  the parent element's font size Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Fonts

CSS reference: font property

HTML DOM reference: fontSize property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-size-adjust Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

By specifying the font-size-adjust property, the browser will adjust the font size to be the same regardless of the font family ("verdana" has the aspect value 0.58)

div {

 font-size-adjust: 0.58;

}

Try it Yourself »


Definition and Usage

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.

Default value: none
Inherited: yes
Animatable: yes. Read about animatable
Version: CSS3
JavaScript syntax: object.style.fontSizeAdjust="0.58"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-size-adjust Not supported Not supported 3.0 Not supported Not supported

Syntax

font-size-adjust: number|none|initial|inherit;

Property Values

Value Description
number Defines the aspect value to use
none Default value. No font size adjustment
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

HTML DOM reference: fontSizeAdjust property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-stretch Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make the text in <div> elements wider:

div {

  font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

 font-stretch: expanded;

}


Definition and Usage

The font-stretch property allows you to make text narrower (condensed) or wider (expanded).

Note: Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to selct a normal, condensed, or expanded font face.

Note: This property has no effect if the selected font does not offer condensed or expanded faces!

Default value: normal
Inherited: yes
Animatable: yes. Read about animatable
Version: CSS3
JavaScript syntax: object.style.fontStretch="expanded"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-stretch 48.0 9.0 9.0 11.0 35.0


Syntax

font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;

Property Values

Value Description
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


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different font styles for three paragraphs:

p.a {

 font-style: normal;

}


p.b {

  font-style: italic;

}


p.c {

  font-style: oblique;

}

Try it Yourself »


Definition and Usage

The font-style property specifies the font style for a text.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.fontStyle="italic"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-style 1.0 4.0 1.0 1.0 7.0


CSS Syntax

font-style: normal|italic|oblique|initial|inherit;

Property Values

Value Description Play it
normal The browser displays a normal font style. This is default Play it »
italic The browser displays an italic font style Play it »
oblique The browser displays an oblique font style Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontStyle property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-variant Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a paragraph to a small-caps font:

p.small {

  font-variant: small-caps;

}

Try it Yourself »


Definition and Usage

In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

Default value: normal
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.fontVariant="small-caps"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-variant 1.0 4.0 1.0 1.0 3.5


CSS Syntax

font-variant: normal|small-caps|initial|inherit;

Property Values

Value Description Play it
normal The browser displays a normal font. This is default Play it »
small-caps The browser displays a small-caps font Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontVariant property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS font-weight Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different font weight for three paragraphs:

p.normal {

 font-weight: normal;

}


p.thick {

  font-weight: bold;

}


p.thicker {

 font-weight: 900;

}

Try it Yourself »


Definition and Usage

The font-weight property sets how thick or thin characters in text should be displayed.

Default value: normal
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.fontWeight="bold"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font-weight 2.0 4.0 1.0 1.3 3.5


CSS Syntax

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Property Values

Value Description Play it
normal Defines normal characters. This is default Play it »
bold Defines thick characters Play it »
bolder Defines thicker characters Play it »
lighter Defines lighter characters Play it »
100

200

300

400

500

600

700

800

900

Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Font

CSS reference: font property

HTML DOM reference: fontWeight property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make a three columns grid layout where the first row is 150px high:

.grid-container {

 display: grid;

  grid: 150px / auto auto auto;

}

Try it Yourself »


Definition and Usage

The grid property is a shorthand property for:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
Default value: none none none auto auto row
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.grid="250px / auto auto auto"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid 57 16 52 10 44


CSS Syntax

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Property Values

Value Description Play it
none Default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns Specifies the size(s) of the columns and rows Play it »
grid-template-areas Specifies the grid layout using named items Play it »
grid-template-rows / grid-auto-columns Specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns Specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Specify two rows, where "item1" spans the first two columns in the first two rows (in a five columns grid layout):

.item1 {

  grid-area: myArea;

}

.grid-container {

 display: grid;

  grid:

   'myArea myArea . . .'

   'myArea myArea . . .';

}

Try it Yourself »

Example

Name all items, and make a ready-to-use webpage template:

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }


.grid-container {

 display: grid;

  grid:

   'header header header header header'

   'menu main main main right right'

   'menu footer footer footer footer';

}

Try it Yourself »


Related Pages

CSS Tutorial: CSS Grid Container

CSS Reference: The grid-template-areas property

CSS Reference: The grid-template-rows property

CSS Reference: The grid-template-columns property

CSS Reference: The grid-auto-rows property

CSS Reference: The grid-auto-columns property

CSS Reference: The grid-auto-flow property

CSS Reference: The grid-row-gap property

CSS Reference: The grid-column-gap property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-area Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" start on row 2 column 1, and span 2 rows and 3 columns:

.item1 {

  grid-area: 2 / 1 / span 2 / span 3;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

The grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced to by the grid-template-areas property of the grid container. See examples below.

Default value: auto / auto / auto / auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridArea="1 / 2 / span 2 / span 3"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-area 57 16 52 10 44


CSS Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Property Values

Value Description
grid-row-start Specifies on which row to start displaying the item.
grid-column-start Specifies on which column to start displaying the item.
grid-row-end Specifies on which row-line to stop displaying the item, or how many rows to span.
grid-column-end Specifies on which column-line to stop displaying the item, or how many columns to span.
itemname Specifies a name for the grid item

More Examples

Example

Item1 gets the name "myArea", and spans all five columns in a five columns grid layout:

.item1 {

  grid-area: myArea;

}

.grid-container {

  display: grid;

  grid-template-areas: 'myArea myArea myArea myArea myArea';

}

Try it Yourself »

Example

Let "myArea" span two columns in a five columns grid layout (period signs represent items with no name):

.item1 {

  grid-area: myArea;

}

.grid-container {

  display: grid;

  grid-template-areas: 'myArea myArea . . .';

}

Try it Yourself »

Example

Make "item1" span two columns and two rows:

.grid-container {

  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';

}

Try it Yourself »

Example

Name all items, and make a ready-to-use webpage template:

.item1 { grid-area: header; }

.item2 { grid-area: menu; }

.item3 { grid-area: main; }

.item4 { grid-area: right; }

.item5 { grid-area: footer; }


.grid-container {

  grid-template-areas:

   'header header header header header header'

   'menu main main main right right'

   'menu footer footer footer footer footer';

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-auto-columns Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a default size for the columns in a grid:

.grid-container {

 display: grid;

  grid-auto-columns: 50px;

}

Try it Yourself »


Definition and Usage

The grid-auto-columns property sets a size for the columns in a grid container.

This property affects only columns with the size not set.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridAutoColumns="120px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-columns 57 16 52 10 44


CSS Syntax

grid-auto-columns: auto|max-content|min-content|length;

Property Values

Value Description Play it
auto Default value. The size of the columns is determined by the size of the container Play it »
fit-content()
max-content Sets the size of each column depending on the largest item in the column Play it »
min-content Sets the size of each column depending on the smallest item in the column Play it »
minmax(min.max) Sets a size range greater than or equal to min and less than or equal to max
length Sets the size of the columns, by using a legal length value. Read about length units Play it »
% Sets the size of the columns, by using a percent value Play it »

Related Pages

CSS Tutorial: CSS Grid Layout

CSS Reference: The grid-auto-rows property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-auto-flow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Insert auto-placed items column by column:

.grid-container {

 display: grid;

  grid-auto-flow: column;

}

Try it Yourself »


Definition and Usage

The grid-auto-flow property controls how auto-placed items get inserted in the grid.

Default value: row
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridAutoFlow="row dense"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-flow 57 16 52 10 44


CSS Syntax

grid-auto-flow: row|column|dense|row dense|column dense;

Property Values

Value Description Play it
row Default value. Places items by filling each row Play it »
column Places items by filling each column Play it »
dense Place items to fill any holes in the grid Play it »
row dense Places items by filling each row, and fill any holes in the grid Play it »
column dense Places items by filling each column, and fill any holes in the grid Play it »

More Examples

Example

Fill any holes in the grid by adding the "dense" value:

.grid-container {

 display: grid;

  grid-auto-flow: row dense;

}

Try it Yourself »


Related Pages

CSS Tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-auto-rows Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a default size for the rows in a grid:

.grid-container {

 display: grid;

  grid-auto-rows: 150px;

}

Try it Yourself »


Definition and Usage

The grid-auto-rows property sets a size for the rows in a grid container.

This property affects only rows with the size not set.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridAutoRows="60px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-rows 57 16 52 10 44


CSS Syntax

grid-auto-rows: auto|max-content|min-content|length;

Property Values

Value Description Play it
auto Default value. The size of the rows is determined by the size of the largest item in the row Play it »
max-content Sets the size of each row to depend on the largest item in the row Play it »
min-content Sets the size of each row to depend on the largest item in the row Play it »
length Sets the size of the rows, by using a legal length value. Read about length units Play it »

Related Pages

CSS Tutorial: CSS Grid Layout

CSS Reference: The grid-auto-columns property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-column Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" start on column 1 and span 2 columns:

.item1 {

  grid-column: 1 / span 2;

}

Try it Yourself »


Definition and Usage

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

  • grid-column-start
  • grid-column-end
Default value: auto / auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumn="2 / span 2"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-column 57 16 52 10 44


CSS Syntax

grid-column: grid-column-start / grid-column-end;

Property Values

Value Description
grid-column-start Specifies on which column to start displaying the item.
grid-column-end Specifies on which column-line to stop displaying the item, or how many columns to span.

More Examples

Example

You can use column-line values instead numbers of columns to span:

.item1 {

  grid-column: 1 / 3;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-column-end Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" span 3 columns:

.item1 {

  grid-column-end: span 3;

}

Try it Yourself »


Definition and Usage

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end (see example at the end of this page).

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumnEnd="5"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-column-end 57 16 52 10 44


CSS Syntax

grid-column-end: auto|span n|column-line;

Property Values

Value Description Play it
auto Default value. The item will span one column Play it »
span n Specifies the number of columns the item will span Play it »
column-line Specifies on which column to end the display of the item Play it »

More Examples

Example

You can use column-line values instead numbers of columns to span:

.item1 {

  grid-column-end: 3;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-column-gap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the gap between columns to 50px:

.grid-container {

  grid-column-gap: 50px;

}

Try it Yourself »


Definition and Usage

The grid-column-gap property defines the size of the gap between the columns in a grid layout.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumnGap="50px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-column-gap 57 16 52 10 44


CSS Syntax

grid-column-gap: length;

Property Values

Value Description Play it
length Any legal length value, like px or %. 0 is the default value. Read about length units Play it »

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grip-gap property

CSS reference: The grip-row-gap property


❮ PreviousComplete CSS ReferenceNext ❯

CSS grid-column-start Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" start on column 2:

.item1 {

  grid-column-start: 2;

}

Try it Yourself »


Definition and Usage

The grid-column-start property defines on which column-line the item will start.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumnStart="3"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-column-start 57 16 52 10 44


CSS Syntax

grid-column-start: auto|span n|column-line;

Property Values

Value Description Play it
auto Default value. The item will be placed following the flow Play it »
span n Specifies the number of columns the item will span Play it »
column-line Specifies on which column to

start the display of the item

Play it »

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grid-column Property

CSS reference: The grid-column-end Property

CSS reference: The grid-row-start Property

CSS reference: The grid-row-end Property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-gap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the gap between rows and columns to 50px:

.grid-container {

  grid-gap: 50px;

}

Try it Yourself »


Definition and Usage

The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties:

  • grid-row-gap
  • grid-column-gap
Default value: 0 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridGap="50px 100px"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-gap 57 16 52 10 44


CSS Syntax

grid-gap: grid-row-gap grid-column-gap;

Property Values

Value Description Play it
grid-row-gap Sets the size of the gap between the rows in a grid layout. 0 is the default value
grid-column-gap Sets the size of the gap between the columns in a grid layout. 0 is the default value Play it »

More Examples

Example

Set the gap between rows to 20px, and the columns to 50px:

.grid-container {

  grid-gap: 20px 50px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grip-row-gap property

CSS reference: The grip-column-gap property


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-row Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" start on row 1 and span 2 rows:

.item1 {

  grid-row: 1 / span 2;

}

Try it Yourself »


Definition and Usage

The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties::

  • grid-row-start
  • grid-row-end
Default value: auto / auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridRow="2 / span 2"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-row 57 16 52 10 44


CSS Syntax

grid-row: grid-row-start / grid-row-end;

Property Values

Value Description
grid-row-start Specifies on which row to start displaying the item.
grid-row-end Specifies on which row-line to stop displaying the item, or how many rows to span.

More Examples

Example

You can use row-line values instead numbers of rows to span:

.item1 {

  grid-row: 1 / 3;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯

///////////////////////////////////////////


CSS grid-row-end Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" span 3 rows:

.item1 {

  grid-row-end: span 3;

}

Try it Yourself »


Definition and Usage

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end (see example at the end of this page).

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridRowEnd="4"Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-row-end 57 16 52 10 44


CSS Syntax

grid-row-end: auto|row-line|span n;

Property Values

Value Description Play it
auto Default value. The item will span one row. Play it »
span n Specifies the number of rows the item will span. Play it »
column-line Specifies on which row to end the display of the item. Play it »

More Examples

Example

You can use row-line values instead numbers of rows to span:

.item1 {

  grid-row-end: 3;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Grid Layout


❮ PreviousComplete CSS ReferenceNext ❯