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

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


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


CSS grid-row-gap Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the gap between rows to 50px:

.grid-container {

  grid-row-gap: 50px;

}

Try it Yourself »


Definition and Usage

The grid-row-gap property defines the size of the gap between the rows 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.gridRowGap="50px"Try it

Browser Support

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

Property
grid-row-gap 57 16 52 10 44


CSS Syntax

grid-row-gap: length;

Property Values

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

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grip-gap property

CSS reference: The grip-column-gap property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS grid-row-start Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make "item1" start on row 2:

.item1 {

  grid-row-start: 2;

}

Try it Yourself »


Definition and Usage

The grid-row-start property defines on which row-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.gridRowStart="3"Try it

Browser Support

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

Property
grid-row-start 57 16 52 10 44


CSS Syntax

grid-row-start: auto|row-line;

Property Values

Value Description Play it
auto Default value. The item will be placed by following the flow. Play it »
row-line Specifies on which row 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 Property

CSS reference: The grid-row-end Property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS grid-template Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

.grid-container {

 display: grid;

  grid-template: 150px / auto auto auto;

}

Try it Yourself »


Definition and Usage

The grid-template property is a shorthand property for the following properties:

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

Browser Support

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

Property
grid-template 57 16 52 10 44


CSS Syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|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 »
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-template:

   '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-template:

   'header 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 Item

CSS Reference: The grid-area property

CSS Reference: The grid-template-rows property

CSS Reference: The grid-template-columns property

CSS Reference: The grid-template-areas property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS grid-template-areas Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make the named item "myArea" span two columns in a five columns grid layout:

.item1 {

  grid-area: myArea;

}

.grid-container {

 display: grid;

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

}

Try it Yourself »


Definition and Usage

The grid-template-areas property specifies areas within the grid layout.

You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property.

Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.

Default value: none
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateAreas=". . . myArea myArea"

Browser Support

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

Property
grid-template-areas 57 16 52 10 44


CSS Syntax

grid-template-areas: none|itemnames;

Property Values

Value Description Play it
none Default value. No named grid areas Play it »
itemnames A sequence that specifies how each columns and row should display Play it »

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-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 {

 display: grid;

  grid-template-areas:

   '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 Item

CSS Reference: The grid-area property

CSS Reference: The grid-template property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS grid-template-columns Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make a 4 columns grid container:

.grid-container {

 display: grid;

  grid-template-columns: auto auto auto auto;

}

Try it Yourself »


Definition and Usage

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.

The values are a space separated list, where each value specifies the size of the respective column.

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

Browser Support

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

Property
grid-template-columns 57 16 52 10 44


CSS Syntax

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Property Values

Value Description Play it
none Default value. Columns are created if needed Play it »
auto The size of the columns is determined by the size of the container and on the size of the content of the items in the column Play it »
max-content Sets the size of each column to depend on the largest item in the column Play it »
min-content Sets the size of each column to depend on the smallest item in the column
length Sets the size of the columns, by using a legal length value. Read about length units Play it »
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

Make a 4 columns grid container, and specify a size for each column:

.grid-container {

 display: grid;

  grid-template-columns: 30px 200px auto 100px;

}

Try it Yourself »


Related Pages

CSS Tutorial: CSS Grid Layout

CSS Reference: The grid-template-rows property

CSS Reference: The grid-template property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS grid-template-rows Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the row-size (height):

.grid-container {

 display: grid;

  grid-template-rows: 100px 300px;

}

Try it Yourself »


Definition and Usage

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout.

The values are a space-separated list, where each value specifies the height of the respective row.

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

Browser Support

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

Property
grid-template-rows 57 16 52 10 44


CSS Syntax

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Property Values

Value Description Play it
none No size is set. Rows are created if needed Play it »
auto The size of the rows is determined by the size of the container, and on the size of the content of the items in the row Play it »
max-content Sets the size of each row to depend on the largest item in the row
min-content Sets the size of each row to depend on the largest item in the row
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-columns property

CSS Reference: The grid-template property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS hanging-punctuation Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Place a punctuation mark (if any) outside the start edge of the first line in the <p> element:

p {

  hanging-punctuation: first;

}


Definition and Usage

The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.

Default value: none
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.hangingPunctuation="first"

Browser Support

None of the major browsers support the hanging-punctuation property.

Property
hanging-punctuation Not supported Not supported Not supported 10+ Not supported


CSS Syntax

hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit;

Property Values

Value Description
none No punctuation mark may be placed outside the line box at the start or at the end of a full line of text
first Punctuation may hang outside the start edge of the first line
last Punctuation may hang outside the end edge of the last line
allow-end Punctuation may hang outside the end edge of all lines if the punctuation does not otherwise fit prior to justification
force-end Punctuation may hang outside the end edge of all lines. If justification is enabled on this line, then it will force the punctuation to hang
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 height Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the height of two <div> elements:

div.a {

 height: auto;

  border: 1px solid black;

}


div.b {

  height: 50px;

 border: 1px solid black;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the height property.

Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.height="500px"Try it

Browser Support

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

Property
height 1.0 4.0 1.0 1.0 7.0


CSS Syntax

height: auto|length|initial|inherit;

Property Values

Value Description Play it
auto The browser calculates the height. This is default Play it »
length Defines the height in px, cm, etc. Read about length units Play it »
% Defines the height in percent of the containing block
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

Set the height of an element to 50% of the height of the parent element:

#parent {

  height: 100px;

}


#child {

 height: 50%;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Height and Width

CSS tutorial: CSS Box model

CSS reference: width property

HTML DOM reference: height property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS hyphens Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different hyphenations:

div.a {

  -webkit-hyphens: none;

  -ms-hyphens: none;

  hyphens: none;

}


div.b {

  -webkit-hyphens: manual;

  -ms-hyphens: manual;

  hyphens: manual;

}


div.c {

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}

Try it Yourself »


Definition and Usage

The hyphens property defines whether hyphenation is allowed to create more soft wrap opportunities within a line of text.

Default value: manual
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.hyphens="none"

Browser Support

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

Property
hyphens 55.0 10.0 -ms- 43.0 5.1 -webkit- 44.0


CSS Syntax

hyphens: none|manual|auto|initial|inherit;

Property Values

Value Description
none Words are not hyphenated
manual Default. Words are only hyphenated at &hyphen; or &shy; (if needed)
auto Words are hyphenated where the algorithm is deciding (if needed)
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 @import Rule

❮ PreviousComplete CSS ReferenceNext ❯

Example

Import the "navigation.css" style sheet into the current style sheet:

@import "navigation.css"; /* Using a string */


or


@import url("navigation.css"); /* Using a url */

More examples below.


Definition and Usage

The @import rule allows you to import a style sheet into another style sheet.

The @import rule must be at the top of the document (but after any @charset declaration).

The @import rule also supports media queries, so you can allow the import to be media-dependent.


Browser Support

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

Property
@import Yes 5.5 Yes Yes Yes


CSS Syntax

@import url|string list-of-mediaqueries;

Property Values

Value Description
url|string A url or a string representing the location of the resource to import. The url may be absolute or relative
list-of-mediaqueries A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL

More Examples

Example

Import the "printstyle.css" style sheet ONLY if the media is print:

@import "printstyle.css" print;

Example

Import the "mobstyle.css" style sheet ONLY if the media is screen and the viewport is maximum 768 pixels:

@import "mobstyle.css" screen and (max-width: 768px);


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS isolation Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Create a new stacking context for the element with id="e":

#e {

  isolation: isolate;

}

Try it Yourself »


Definition and Usage

The isolation property defines whether an element must create a new stacking content.

Note: The isolation property is helpful when used with background-blend-mode or mix-blend-mode.

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

Browser Support

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

Property
isolation 41.0 Not supported 36.0 Yes 30.0


CSS Syntax

isolation: auto|isolate|initial|inherit;

Property Values

Value Description
auto Default. A new stacking context is created only if one of the properties applied to the element requires it
isolate A new stacking context must be created
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: The isolation property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS justify-content Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Align the flex items at the center of the container:

div {

 display: flex;

 justify-content: center;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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 vertically.

Default value: flex-start
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.justifyContent="space-between"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
justify-content 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Property Values

Value Description Play it
flex-start Default value. Items are positioned at the beginning of the container Play it »
flex-end Items are positioned at the end of the container Play it »
center Items are positioned at the center of the container Play it »
space-between Items are positioned with space between the lines Play it »
space-around Items are positioned with space before, between, and after the lines 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

Align the flex items at the beginning of the container (this is default):

div {

 display: flex;

 justify-content: flex-start;

}

Try it Yourself »

Example

Align the flex items at the end of the container:

div {

 display: flex;

 justify-content: flex-end;

}

Try it Yourself »

Example

Display the flex items with space between the lines:

div {

  display: flex;

 justify-content: space-between;

}

Try it Yourself »

Example

Display the flex items with space before, between, and after the lines:

div {

  display: flex;

  justify-content: space-around;

}

Try it Yourself »


Related Pages

CSS Reference: align-content property

CSS Reference: align-items property

CSS Reference: align-self property

HTML DOM reference: justifyContent property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS @keyframes Rule

❮ PreviousComplete CSS ReferenceNext ❯

Example

Make an element move gradually 200px down:

@keyframes mymove {

  from {top: 0px;}

  to {top: 200px;}

}


Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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.

Note: The !important rule is ignored in a keyframe (See last example on this page).


Browser Support

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

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

Property
@keyframes 43.0

4.0 -webkit-

10.0 16.0

5.0 -moz-

9.0

4.0 -webkit-

30.0

15.0 -webkit-

12.0 -o-



CSS Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Property Values

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

More Examples

Example

Add many keyframe selectors in one animation:

@keyframes mymove {

 0%   {top: 0px;}

 25%  {top: 200px;}

 50%  {top: 100px;}

 75%  {top: 200px;}

 100% {top: 0px;}

}


Try it Yourself »

Example

Change many CSS styles in one animation:

@keyframes mymove {

  0%   {top: 0px; background: red; width: 100px;}

 100% {top: 200px; background: yellow; width: 300px;}

}


Try it Yourself »

Example

Many keyframe selectors with many CSS styles:

@keyframes mymove {

  0%   {top: 0px; left: 0px; background: red;}

 25%  {top: 0px; left: 100px; background: blue;}

 50%  {top: 100px; left: 100px; background: yellow;}

  75%  {top: 100px; left: 0px; background: green;}

  100% {top: 0px; left: 0px; background: red;}

}


Try it Yourself »

Example

Note: The !important rule is ignored in a keyframe:

@keyframes myexample {

  from {top: 0px;}

 50%  {top: 100px !important;} /* ignored */

  to   {top: 200px;}

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Animations


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS left Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the left edge of a positioned <div> element to 150px from the left edge of its nearest positioned ancestor:

div.c {

  position: absolute;

  left: 150px;

 width: 200px;

  height: 120px;

  border: 3px solid green;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor.
  • If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
  • If position: sticky; - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position: static; - the left property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.left="100px"Try it

Browser Support

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

Property
left 1.0 5.5 1.0 1.0 5.0


CSS Syntax

left: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Lets the browser calculate the left edge position. This is default Play it »
length Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units Play it »
% Sets the left edge position in % of containing element. Negative values are allowed 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

Use the left property with a negative value and for an element with no positioned ancestors:

div.b {

  position: absolute;

 left: -10px;

  width: 100px;

  height: 120px;

  border: 3px solid blue;

}


div.c {

  position: absolute;

  left: 150px;

  width: 200px;

  height: 120px;

  border: 3px solid green;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Positioning

CSS reference: right property

CSS reference: bottom property

CSS reference: top property

HTML DOM reference: left property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS letter-spacing Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the letter spacing for <h1>, <h2>, and <h3> elements:

h1 {

  letter-spacing: 3px;

}


h2 {

 letter-spacing: 2px;

}


h3 {

  letter-spacing: -1px;

}

Try it Yourself »


Definition and Usage

The letter-spacing property increases or decreases the space between characters in a text.

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

Browser Support

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

Property
letter-spacing 1.0 4.0 1.0 1.0 3.5


CSS Syntax

letter-spacing: normal|length|initial|inherit;

Property Values

Value Description Play it
normal No extra space between characters. This is default Play it »
length Defines an extra space between characters (negative values are allowed). 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

Related Pages

CSS tutorial: CSS Text

HTML DOM reference: letterSpacing property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS line-height Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the line height for different <div> elements:

div.a {

  line-height: normal;

}


div.b {

  line-height: 1.6;

}


div.c {

  line-height: 80%;

}


div.d {

  line-height: 200%;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The line-height property specifies the height of a line.

Note: Negative values are not allowed.

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

Browser Support

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

Property
line-height 1.0 4.0 1.0 1.0 7.0


CSS Syntax

line-height: normal|number|length|initial|inherit;

Property Values

Value Description Play it
normal A normal line height. This is default Play it »
number A number that will be multiplied with the current font-size to set the line height Play it »
length A fixed line height in px, pt, cm, etc. Play it »
% A line height in percent of the current 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

More Examples

Example

Set the line height in pixels and centimeters for different <div> elements:

div.a {

 line-height: 10px;

}


div.b {

 line-height: 30px;

}


div.c {

 line-height: 0.5cm;

}


div.d {

  line-height: 1cm;

}

Try it Yourself »

Example

Set the line height as a number for different <div> elements:

div.a {

  line-height: 0.5;

}


div.b {

 line-height: 1.6;

}


div.c {

  line-height: 2;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: lineHeight property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS list-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify all the list properties in one declaration:

ul {

 list-style: square inside url("sqpurple.gif");

}

Try it Yourself »


Definition and Usage

The list-style property is a shorthand for the following properties:

  • list-style-type
  • list-style-position
  • list-style-image

If one of the values are missing, the default value for that property will be used.

Default value: disc outside none
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStyle="decimal inside"Try it

Browser Support

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

Property
list-style 1.0 4.0 1.0 1.0 7.0


CSS Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Property Values

Value Description
list-style-type Specifies the type of list-item marker. Default value is "disc"
list-style-position Specifies where to place the list-item marker. Default value is "outside"
list-style-image Specifies the type of list-item marker. Default value is "none"
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS List

HTML DOM reference: listStyle property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS list-style-image Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify an image as the list-item marker in a list:

ul {

  list-style-image: url('sqpurple.gif');

}

Try it Yourself »


Definition and Usage

The list-style-image property replaces the list-item marker with an image.

Note: Always specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.

Default value: none
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStyleImage="url('smiley.gif')"Try it

Browser Support

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

Property
list-style-image 1.0 4.0 1.0 1.0 7.0


CSS Syntax

list-style-image: none|url|initial|inherit;

Property Values

Value Description Play it
none No image will be displayed. Instead, the list-style-type property will define what type of list marker will be rendered. This is default Play it »
url The path to the image to be used as a list-item marker 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 List

CSS reference: list-style property

HTML DOM reference: listStyleImage property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS list-style-position Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify the position of the list-item markers:

ul.a {

  list-style-position: outside;

}


ul.b {

  list-style-position: inside;

}

Try it Yourself »


Definition and Usage

The list-style-position property specifies the position of the list-item markers (bullet points).

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically:

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola

list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola
Default value: outside
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStylePosition="inside"Try it

Browser Support

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

Property
list-style-position 1.0 4.0 1.0 1.0 3.5


CSS Syntax

list-style-position: inside|outside|initial|inherit;

Property Values

Value Description Play it
inside The bullet points will be inside the list item Play it »
outside The bullet points will be outside the list item. This is default 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 List

CSS reference: list-style property

HTML DOM reference: listStylePosition property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS list-style-type Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set some different list styles:

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The list-style-type specifies the type of list-item marker in a list.

Default value: disc
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.listStyleType="square"Try it

Browser Support

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

Property
list-style-type 1.0 4.0 1.0 1.0 3.5

Note: Internet Explorer/Edge and Opera 12 and earlier versions do not support the values: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.



CSS Syntax

list-style-type: value;

Property Values

Value Description Play it
disc Default value. The marker is a filled circle Play it »
armenian The marker is traditional Armenian numbering Play it »
circle The marker is a circle Play it »
cjk-ideographic The marker is plain ideographic numbers Play it »
decimal The marker is a number Play it »
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.) Play it »
georgian The marker is traditional Georgian numbering Play it »
hebrew The marker is traditional Hebrew numbering Play it »
hiragana The marker is traditional Hiragana numbering Play it »
hiragana-iroha The marker is traditional Hiragana iroha numbering Play it »
katakana The marker is traditional Katakana numbering Play it »
katakana-iroha The marker is traditional Katakana iroha numbering Play it »
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) Play it »
lower-greek The marker is lower-greek Play it »
lower-latin The marker is lower-latin (a, b, c, d, e, etc.) Play it »
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) Play it »
none No marker is shown Play it »
square The marker is a square Play it »
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) Play it »
upper-greek The marker is upper-greek Play it »
upper-latin The marker is upper-latin (A, B, C, D, E, etc.) Play it »
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.) 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

This example demonstrates all the different list-item markers:

ul.a {list-style-type: circle;}

ul.b {list-style-type: disc;}

ul.c {list-style-type: square;}


ol.d {list-style-type: armenian;}

ol.e {list-style-type: cjk-ideographic;}

ol.f {list-style-type: decimal;}

ol.g {list-style-type: decimal-leading-zero;}

ol.h {list-style-type: georgian;}

ol.i {list-style-type: hebrew;}

ol.j {list-style-type: hiragana;}

ol.k {list-style-type: hiragana-iroha;}

ol.l {list-style-type: katakana;}

ol.m {list-style-type: katakana-iroha;}

ol.n {list-style-type: lower-alpha;}

ol.o {list-style-type: lower-greek;}

ol.p {list-style-type: lower-latin;}

ol.q {list-style-type: lower-roman;}

ol.r {list-style-type: upper-alpha;}

ol.s {list-style-type: upper-greek;}

ol.t {list-style-type: upper-latin;}

ol.u {list-style-type: upper-roman;}

ol.v {list-style-type: none;}

ol.w {list-style-type: inherit;}

Try it Yourself »

Example

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

ul {

  list-style: none; /* Remove list 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 tutorial: CSS List

CSS reference: list-style property

HTML DOM reference: listStyleType property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS margin Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the margin for all four sides of a <p> element to 35 pixels:

p {

  margin: 35px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The margin property sets the margins for an element, and is a shorthand property for the following properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

If the margin property has four values:

  • margin: 10px 5px 15px 20px;
    • top margin is 10px
    • right margin is 5px
    • bottom margin is 15px
    • left margin is 20px

If the margin property has three values:

  • margin: 10px 5px 15px;
    • top margin is 10px
    • right and left margins are 5px
    • bottom margin is 15px

If the margin property has two values:

  • margin: 10px 5px;
    • top and bottom margins are 10px
    • right and left margins are 5px

If the margin property has one value:

  • margin: 10px;
    • all four margins are 10px

Note: Negative values are allowed.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.margin="100px 50px"Try it

Browser Support

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

Property
margin 1.0 6.0 1.0 1.0 3.5


CSS Syntax

margin: length|auto|initial|inherit;

Property Values

Value Description Play it
length Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units Play it »
% Specifies a margin in percent of the width of the containing element Play it »
auto The browser calculates a margin 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

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

p.a {

  margin: 30px 0;

}


p.b {

 margin: 20px 0;

}

Try it Yourself »

In the example above, the <p class="a"> element has a top and bottom margin of 30px. The <p class="b"> element has a top and bottom margin of 20px.

This means that the vertical margin between <p class="a"> and <p class="b"> should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!


More Examples

Example

Set the margin for a <p> element to 35 pixels for top and bottom, and to 70 pixels for right and left:

p {

  margin: 35px 70px;

}

Try it Yourself »

Example

Set the margin for a <p> element to 35 pixels for top, 70 pixels for right and left, and to 50 pixels for bottom:

p {

  margin: 35px 70px 50px;

}

Try it Yourself »

Example

Set the margin for a <p> element to 35 pixels for top, 70 pixels for right, 50 pixels for bottom, and to 90 pixels for left:

p {

 margin: 35px 70px 50px 90px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Margin

CSS tutorial: CSS Box Model

HTML DOM reference: margin property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS margin-bottom Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the bottom margin for a <p> element to 25 pixels:

p.ex1 {

 margin-bottom: 25px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The margin-bottom property sets the bottom margin of an element.

Note: Negative values are allowed.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.marginBottom="100px"Try it

Browser Support

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

Property
margin-bottom 1.0 6.0 1.0 1.0 3.5


CSS Syntax

margin-bottom: length|auto|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units Play it »
% Specifies a bottom margin in percent of the width of the containing element Play it »
auto The browser calculates a bottom margin 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

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

p.a {

 margin: 30px 0;

}


p.b {

 margin: 20px 0;

}

Try it Yourself »

In the example above, the <p class="a"> element has a top and bottom margin of 30px. The <p class="b"> element has a top and bottom margin of 20px.

This means that the vertical margin between <p class="a"> and <p class="b"> should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!


More Examples

Example

Set the bottom margin for a <p> element to 10% of the width of the container:

p.ex1 {

 margin-bottom: 10%;

}

Try it Yourself »

Example

Set the bottom margin for a <p> element to 2 em:

p.ex1 {

 margin-bottom: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Margin

HTML DOM reference: marginBottom property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS margin-left Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the left margin for a <p> element to 30 pixels:

p.ex1 {

  margin-left: 30px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The margin-left property sets the left margin of an element.

Note: Negative values are allowed.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.marginLeft="100px"Try it

Browser Support

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

Property
margin-left 1.0 6.0 1.0 1.0 3.5


CSS Syntax

margin-left: length|auto|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed left margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units Play it »
% Specifies a left margin in percent of the width of the containing element Play it »
auto The browser calculates a left margin 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

Set the left margin for a <p> element to 10% of the width of the container:

p.ex1 {

  margin-left: 10%;

}

Try it Yourself »

Example

Set the left margin for a <p> element to 2 em:

p.ex1 {

  margin-left: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Margin

HTML DOM reference: marginLeft property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS margin-right Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the right margin for a <p> element to 150 pixels:

p.ex1 {

  margin-right: 150px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The margin-right property sets the right margin of an element.

Note: Negative values are allowed.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.marginRight="100px"Try it

Browser Support

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

Property
margin-right 1.0 6.0 1.0 1.0 3.5


CSS Syntax

margin-right: length|auto|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed right margin in px, pt, cm, etc. Default value is 0px. Read about length units Play it »
% Specifies a right margin in percent of the width of the containing element Play it »
auto The browser calculates a right margin 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

Set the right margin for a <p> element to 50% of the width of the container:

p.ex1 {

  margin-right: 50%;

}

Try it Yourself »

Example

Set the right margin for a <p> element to 15 em:

p.ex1 {

  margin-right: 15em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Margin

HTML DOM reference: marginRight property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS margin-top Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the top margin for a <p> element to 25 pixels:

p.ex1 {

 margin-top: 25px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The margin-top property sets the top margin of an element.

Note: Negative values are allowed.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.marginTop="100px"Try it

Browser Support

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

Property
margin-top 1.0 6.0 1.0 1.0 3.5


CSS Syntax

margin-top: length|auto|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed top margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units Play it »
% Specifies a top margin in percent of the width of the containing element Play it »
auto The browser calculates a top margin 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

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

p.a {

  margin: 30px 0;

}


p.b {

  margin: 20px 0;

}

Try it Yourself »

In the example above, the <p class="a"> element has a top and bottom margin of 30px. The <p class="b"> element has a top and bottom margin of 20px.

This means that the vertical margin between <p class="a"> and <p class="b"> should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!


More Examples

Example

Set the top margin for a <p> element to 10% of the width of the container:

p.ex1 {

 margin-top: 10%;

}

Try it Yourself »

Example

Set the top margin for a <p> element to 2 em:

p.ex1 {

  margin-top: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Margin

HTML DOM reference: marginTop property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS max-height Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the maximum height of a <p> element to 50 pixels:

p.ex1 {

 max-height: 50px;

}

Try it Yourself »


Definition and Usage

The max-height property defines the maximum height of an element.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

If the content is smaller than the maximum height, the max-height property has no effect.

Note: This prevents the value of the height property from becoming larger than max-height. The value of the max-height property overrides the height property.

Default value: none
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.maxHeight="100px"Try it

Browser Support

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

Property
max-height 1.0 7.0 1.0 2.0.2 7.0


CSS Syntax

max-height: none|length|initial|inherit;

Property Values

Value Description Play it
none No maximum height. This is default Play it »
length Defines the maximum height in px, cm, etc. Read about length units Play it »
% Defines the maximum height in percent of the containing block
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 Height and Width

CSS reference: min-height property

HTML DOM reference: maxHeight property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS max-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the maximum width of a <p> element to 150 pixels:

p.ex1 {

 max-width: 150px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Default value: none
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.maxWidth="600px"Try it

Browser Support

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

Property
max-width 1.0 7.0 1.0 2.0.2 7.0


CSS Syntax

max-width: none|length|initial|inherit;

Property Values

Value Description Play it
none No maximum width. This is default Play it »
length Defines the maximum width in px, cm, etc. Read about length units Play it »
% Defines the maximum width in percent of the containing block 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

Set the maximum width of a <p> element to 50% of the container:

p.ex1 {

  max-width: 50%;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Height and Width

CSS reference: min-width property

HTML DOM reference: maxWidth property


❮ PreviousComplete CSS ReferenceNext ❯    

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


CSS @media Rule

❮ PreviousComplete CSS ReferenceNext ❯

Example

Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) {

  body {

   background-color: lightblue;

 }

}


Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries 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

Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.


Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Property
@media 21 9 3.5 4.0 9


CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {

  CSS-Code;

}

meaning of the not, only and and keywords:

not: The not keyword reverts the meaning of an entire media query.

only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.

and: The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if you use not or only, you must also specify a media type.

You can also have different stylesheets for different media, like this:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

....

Media Types

Value Description
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud

Media Features

Value Description
any-hover Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio The ratio between the width and the height of the viewport
color The number of bits per color component for the output device
color-gamut The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index The number of colors the device can display
grid Whether the device is a grid or bitmap
height The viewport height
hover Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio The maximum ratio between the width and the height of the display area
max-color The maximum number of bits per color component for the output device
max-color-index The maximum number of colors the device can display
max-height The maximum height of the display area, such as a browser window
max-monochrome The maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution The maximum resolution of the device, using dpi or dpcm
max-width The maximum width of the display area, such as a browser window
min-aspect-ratio The minimum ratio between the width and the height of the display area
min-color The minimum number of bits per color component for the output device
min-color-index The minimum number of colors the device can display
min-height The minimum height of the display area, such as a browser window
min-monochrome The minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution The minimum resolution of the device, using dpi or dpcm
min-width The minimum width of the display area, such as a browser window
monochrome The number of bits per "color" on a monochrome (greyscale) device
orientation The orientation of the viewport (landscape or portrait mode)
overflow-block How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution The resolution of the output device, using dpi or dpcm
scan The scanning process of the output device
scripting Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width The viewport width

More Examples

Example

Hide an element when the browser's width is 600px wide or less:

@media screen and (max-width: 600px) {

  div.example {

   display: none;

 }

}


Try it Yourself »

Example

Use mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue:

body {

 background-color: lightblue;

}


@media screen and (min-width: 400px) {

  body {

   background-color: lightgreen;

 }

}


@media screen and (min-width: 800px) {

  body {

   background-color: lavender;

 }

}


Try it Yourself »

Example

Create a responsive navigation menu (displayed horizontally on large screens and vertically on small screens):

@media screen and (max-width: 600px) {

  .topnav a {

   float: none;

   width: 100%;

 }

}


Try it Yourself »

Example

Use media queries to create a responsive column layout:

/* On screens that are 992px wide or less, go from four columns to two columns */

@media screen and (max-width: 992px) {

  .column {

   width: 50%;

 }

}


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

 .column {

   width: 100%;

 }

}


Try it Yourself »

Example

Use media queries to create a responsive website:

Try it Yourself »

Example

Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation.

Use a lightblue background color if the orientation is in landscape mode:

@media only screen and (orientation: landscape) {

 body {

   background-color: lightblue;

 }

}

Try it Yourself »

Example

Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed:

@media screen {

  body {

   color: green;

 }

}


@media print {

 body {

   color: black;

 }

}


Try it Yourself »

Example

Comma separated list: add an additional media query to an already existing one, using a comma (this will behave like an OR operator):

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {

  div.example {

   font-size: 50px;

   padding: 50px;

   border: 8px solid black;

   background: yellow;

 }

}


Try it Yourself »


Related Pages

CSS Tutorial: CSS Media Queries

CSS Tutorial: CSS Media Queries Examples

RWD Tutorial: Responsive Web Design with Media Queries

JavaScript Tutorial: The window.matchMedia() method


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS min-height Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the minimum height of a <p> element to 200 pixels:

p.ex1 {

 min-height: 200px;

}

Try it Yourself »


Definition and Usage

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.minHeight="400px"Try it

Browser Support

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

Property
min-height 1.0 7.0 3.0 2.0.2 4.0


CSS Syntax

min-height: length|initial|inherit;

Property Values

Value Description Play it
length Default value is 0. Defines the minimum height in px, cm, etc. Read about length units Play it »
% Defines the minimum height in percent of the containing block
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 Height and Width

CSS reference: max-height property

HTML DOM reference: minHeight property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS min-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the minimum width of a <span> element to 500 pixels:

span.ex1 {

 min-width: 500px;

}

Try it Yourself »


Definition and Usage

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

Note: This prevents the value of the width property from becoming smaller than min-width.

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.minWidth="400px"Try it

Browser Support

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

Property
min-width 1.0 7.0 1.0 2.0.2 4.0


CSS Syntax

min-width: length|initial|inherit;

Property Values

Value Description Play it
length Default value is 0. Defines the minimum width in px, cm, etc. Read about length units Play it »
% Defines the minimum width in percent of the containing block 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 Height and Width

CSS reference: max-width property

HTML DOM reference: minWidth property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS mix-blend-mode Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

A container with a red background and an image that blends with the red container (darken):

.container {

  background-color: red;

}


.container img {

  mix-blend-mode: darken;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The mix-blend-mode property specifies how an element's content should blend with its direct parent background.

Default value: normal
Inherited: no
Animatable: no. Read about animatable
JavaScript syntax: object.style.mixBlendMode = "darken"Try it

Browser Support

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

Property
mix-blend-mode 41.0 Not supported 32.0 8.0 35.0


CSS Syntax

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

Property Values

Value Description
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
color-burn Sets the blending mode to color-burn
difference Sets the blending mode to difference
exclusion Sets the blending mode to exclusion
hue Sets the blending mode to hue
saturation Sets the blending mode to saturation
color Sets the blending mode to color
luminosity Sets the blending mode to luminosity

More Examples

Example

A demonstration of all values:

.normal {mix-blend-mode: normal;}

.multiply {mix-blend-mode: multiply;}

.screen {mix-blend-mode: screen;}

.overlay {mix-blend-mode: overlay;}

.darken {mix-blend-mode: darken;}

.lighten {mix-blend-mode: lighten;}

.color-dodge {mix-blend-mode: color-dodge;}

.color-burn {mix-blend-mode: color-burn;}

.difference {mix-blend-mode: difference;}

.exclusion {mix-blend-mode: exclusion;}

.hue {mix-blend-mode: hue;}

.saturation {mix-blend-mode: saturation;}

.color {mix-blend-mode: color;}

.luminosity {mix-blend-mode: luminosity;}

Try it Yourself »

Example

Using mix-blend-mode to create a responsive cutout/knockout text:

.image-container {

  background-image: url("paris.jpg");

  background-size: cover;

  position: relative;

  height: 300px;

}


.text {

  background-color: white;

  color: black;

  font-size: 10vw;

  font-weight: bold;

  margin: 0 auto;

  padding: 10px;

  width: 50%;

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  mix-blend-mode: screen;

}

Try it Yourself »


Related Pages

CSS reference: CSS background-blend-mode Property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS object-fit Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Cut off the sides of an image, preserving the aspect ratio, and fill in the space:

img.a {

 width: 200px;

  height: 400px;

 object-fit: cover;

}

Try it Yourself »


Definition and Usage

The object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

Default value: see individual properties
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.objectFit="cover"Try it

Browser Support

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

Property
object-fit 31.0 16.0 36.0 7.1 19.0


CSS Syntax

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Property Values

Value Description Try it
fill This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit Try it »
contain The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box Try it »
cover The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit Try it »
none The replaced content is not resized Try it »
scale-down The content is sized as if none or contain were specified (would result in a smaller concrete object size) Try it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS object-fit

CSS reference: CSS object-position

HTML DOM reference: The objectFit property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS object-position Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Resize an image to fit its content box, and position the image 5px from the left and 10% from the top inside the content box:

img.a {

 width: 200px;

  height: 400px;

  object-fit: none;

 object-position: 5px 10%;

 border: 5px solid red;

}

Try it Yourself »


Definition and Usage

The object-position property is used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its "own content box".

Default value: 50% 50%
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.objectPosition="0 10%"Try it

Browser Support

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

Property
object-position 31.0 16.0 36.0 10.0 19.0


CSS Syntax

object-position: position|initial|inherit;

Property Values

Value Description
position Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS object-fit

CSS reference: CSS object-fit

HTML DOM reference: The objectPosition property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS opacity Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the opacity level for a <div> element:

div {

 opacity: 0.5;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity 0.2

opacity 0.5

opacity 1

(default)

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

Default value: 1
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.opacity="0.5"Try it

Browser Support

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

Property
opacity 4.0 9.0 2.0 3.1 9.0

Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).



CSS Syntax

opacity: number|initial|inherit;

Property Values

Value Description Play it
number Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) 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

The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:

div.first {

  opacity: 0.1;

}


div.second {

  opacity: 0.3;

}


div.third {

  opacity: 0.6;

}

Try it Yourself »

Example

To not apply opacity to child elements (like in the example above) use RGBA color values instead. The following example sets the opacity for the background color, but not for the text:

div.first {

  background: rgba(76, 175, 80, 0.1);

}


div.second {

  background: rgba(76, 175, 80, 0.3);

}


div.third {

  background: rgba(76, 175, 80, 0.6);

}

Try it Yourself »

Tip: Learn more about RGBA Colors in CSS RGBA Colors.

Example

How to use JavaScript to change the opacity for an element:

function myFunction(x) {

// Return the text of the selected option

 var opacity = x.options[x.selectedIndex].text;

 var el = document.getElementById("p1");

 if (el.style.opacity !== undefined) {

   el.style.opacity = opacity;

 } else {

   alert("Your browser doesn't support this example!");

 }

}

Try it Yourself »


Related Pages

CSS Tutorial: CSS Opacity / Transparency

CSS Tutorial: CSS RGBA Colors

HTML DOM Reference: opacity property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS order Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the order of the flexible items:

div#myRedDIV {order: 2;}

div#myBlueDIV {order: 4;}

div#myGreenDIV {order: 3;}

div#myPinkDIV {order: 1;}


Try it Yourself »


Definition and Usage

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

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

Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.order="2"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
order 29.0

21.0 -webkit-

11.0 28.0

18.0 -moz-

9.0

6.1 -webkit-

17.0


CSS Syntax

order: number|initial|inherit;

Property Values

Value Description
number Default value 0. Specifies the order for the flexible item
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

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-shrink property

CSS Reference: flex-wrap property

CSS Reference: align-content property

CSS Reference: align-items property

CSS Reference: align-self property

HTML DOM reference: order property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS outline Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set an outline around a <h2> element and a <div> element:

h2 {

 outline: 5px dotted green;

}


div.a {

 outline: 2px dashed blue;

}

Try it Yourself »


Definition and Usage

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".

The outline property is a shorthand property for:

  • outline-width
  • outline-style (required)
  • outline-color

If outline-color is omitted, the color applied will be the color of the text.

Note: The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

Default value: medium invert color
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.outline="#0000FF dotted 5px"Try it

Browser Support

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

Property
outline 1.0 8.0 1.5 1.2 7.0


CSS Syntax

outline: outline-width outline-style outline-color|initial|inherit;

Property Values

Value Description
outline-width Specifies the width of outline
outline-style Specifies the style of the outline
outline-color Specifies the color of the outline
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Related Pages

CSS tutorial: CSS Outline

HTML DOM reference: outline property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS outline-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a color for the outline:

div {outline-color: coral;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-color property specifies the color of an outline.

Note: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.

Default value: invert
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.outlineColor="#FF0000"Try it

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.


Browser Support

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

Property
outline-color 1.0 8.0 1.5 1.2 7.0


CSS Syntax

outline-color: invert|color|initial|inherit;

Property Values

Value Description Play it
invert Performs a color inversion. This ensures that the outline is visible, regardless of color background. This is default Play it »
color Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. 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

Set a color for the outline with a HEX value:

div {outline-color: #92a8d1;}

Try it Yourself »

Example

Set a color for the outline with an RGB value:

div {outline-color: rgb(201, 76, 76);}

Try it Yourself »

Example

Set a color for the outline with an RGBA value:

div {outline-color: rgba(201, 76, 76, 0.3);}

Try it Yourself »

Example

Set a color for the outline with a HSL value:

div {outline-color: hsl(89, 43%, 51%);}

Try it Yourself »

Example

Set a color for the outline with a HSLA value:

div {outline-color: hsla(89, 43%, 51%, 0.3);}

Try it Yourself »


Related Pages

CSS tutorial: CSS Outline

CSS reference: outline property

HTML DOM reference: outlineColor property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS outline-offset Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify a 4 pixels solid red outline 15 pixels outside the border edge:

div {

 outline: 4px solid red;

 outline-offset: 15px;

}

Try it Yourself »


Definition and Usage

The outline-offset property adds space between an outline and the edge or border of an element.

The space between an element and its outline is transparent.

Outlines differ from borders in three ways:

  • An outline is a line drawn around elements, outside the border edge
  • An outline does not take up space
  • An outline may be non-rectangular
Default value: 0
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.outlineOffset="15px"Try it

Browser Support

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

Property
outline-offset 4.0 15.0 3.5 3.1 10.5


CSS Syntax

outline-offset: length|initial|inherit;

Property Values

Value Description
length The distance the outline is outset from the border edge. Default 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

Related Pages

CSS tutorial: CSS User Interface

HTML DOM reference: outlineOffset property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS outline-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the outline:

div {outline-style: dotted;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-style property specifies the style of an outline.

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

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.


Browser Support

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

Property
outline-style 1.0 8.0 1.5 1.2 7.0


CSS Syntax

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

Value Description Play it
none Specifies no outline. This is default Play it »
hidden Specifies a hidden outline Play it »
dotted Specifies a dotted outline Play it »
dashed Specifies a dashed outline Play it »
solid Specifies a solid outline Play it »
double Specifies a double outliner Play it »
groove Specifies a 3D grooved outline. The effect depends on the outline-color value Play it »
ridge Specifies a 3D ridged outline. The effect depends on the outline-color value Play it »
inset Specifies a 3D inset outline. The effect depends on the outline-color value Play it »
outset Specifies a 3D outset outline. The effect depends on the outline-color value 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 dashed outline:

div {outline-style: dashed;}

Try it Yourself »

Example

A solid outline:

div {outline-style: solid;}

Try it Yourself »

Example

A double outline:

div {outline-style: double;}

Try it Yourself »

Example

A groove outline:

div {

   outline-style: groove;

   outline-color: coral;

   outline-width: 7px;

}

Try it Yourself »

Example

A ridge outline:

div {

   outline-style: ridge;

   outline-color: coral;

   outline-width: 7px;

}

Try it Yourself »

Example

An inset outline:

div {

   outline-style: inset;

   outline-color: coral;

   outline-width: 7px;

}

Try it Yourself »

Example

An outset outline:

div {

   outline-style: outset;

   outline-color: coral;

   outline-width: 7px;

}

Try it Yourself »

Example

Set the style of an outline using different values:

p.a {outline-style: dotted;}

p.b {outline-style: dashed;}

p.c {outline-style: solid;}

p.d {outline-style: double;}

p.e {outline-style: groove;}

p.f {outline-style: ridge;}

p.g {outline-style: inset;}

p.h {outline-style: outset;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Outline

CSS reference: outline property

HTML DOM reference: outlineStyle property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS outline-width Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the width of an outline:

div {outline-width: thick;}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

The outline-width specifies the width of an outline.

Note: Always declare the outline-style property before the outline-width property. An element must have an outline before you change the width of it.

Default value: medium
Inherited: no
Animatable: yes, see individual properties. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.outlineWidth="12px"Try it

Tips and Notes

An outline is a line around an element. It is displayed around the margin of the element. However, it is different from the border property.

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.


Browser Support

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

Property
outline-width 1.0 8.0 1.5 1.2 7.0


CSS Syntax

outline-width: medium|thin|thick|length|initial|inherit;

Property Values

Value Description Play it
medium Specifies a medium outline. This is default Play it »
thin Specifies a thin outline Play it »
thick Specifies a thick outline Play it »
length Allows you to define the thickness of the outline. 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

Set the width of the outline to medium (this is default):

div {outline-width: medium;}

Try it Yourself »

Example

Set the width of the outline to thin:

div {outline-width: thin;}

Try it Yourself »

Example

Set the width of the outline to 1px:

div {outline-width: 1px;}

Try it Yourself »

Example

Set the width of the outline to 15px:

div {outline-width: 15px;}

Try it Yourself »


Related Pages

CSS tutorial: CSS Outline

CSS reference: outline property

HTML DOM reference: outlineWidth property


❮ PreviousComplete CSS ReferenceNext ❯