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

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


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


CSS overflow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Show different overflow property values:

div.ex1 {

  overflow: scroll;

}


div.ex2 {

  overflow: hidden;

}


div.ex3 {

 overflow: auto;

}


div.ex4 {

 overflow: visible;

}

Try it Yourself »


Definition and Usage

The overflow property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.overflow="scroll"Try it

Browser Support

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

Property
overflow 1.0 4.0 1.0 1.0 7.0

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).



CSS Syntax

overflow: visible|hidden|scroll|auto|initial|inherit;

Property Values

Value Description Play it
visible The overflow is not clipped. It renders outside the element's box. This is default Play it »
hidden The overflow is clipped, and the rest of the content will be invisible Play it »
scroll The overflow is clipped, but a scroll-bar is added to see the rest of the content Play it »
auto If overflow is clipped, a scroll-bar should be added to see the rest of the 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 Overflow

CSS tutorial: CSS Positioning

HTML DOM reference: overflow property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS overflow-x Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Show different overflow-x property values:

div.ex1 {

 overflow-x: scroll;

}


div.ex2 {

  overflow-x: hidden;

}


div.ex3 {

 overflow-x: auto;

}


div.ex4 {

 overflow-x: visible;

}

Try it Yourself »


Definition and Usage

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.

Tip: Use the overflow-y property to determine clipping at the top and bottom edges.

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

Browser Support

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

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

Property
overflow-x 4.0 9.0

8.0 -ms-

3.5 3.0 9.5


CSS Syntax

overflow-x: visible|hidden|scroll|auto|initial|inherit;

Property Values

Value Description Play it
visible The content is not clipped, and it may be rendered outside the left and right edges. This is default Play it »
hidden The content is clipped - and no scrolling mechanism is provided Play it »
scroll The content is clipped and a scrolling mechanism is provided Play it »
auto Should cause a scrolling mechanism to be provided for overflowing boxes 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 Overflow

HTML DOM reference: overflowX property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS overflow-y Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Show different overflow-y property values:

div.ex1 {

  overflow-y: scroll;

}


div.ex2 {

 overflow-y: hidden;

}


div.ex3 {

 overflow-y: auto;

}


div.ex4 {

 overflow-y: visible;

}

Try it Yourself »


Definition and Usage

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

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

Browser Support

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

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

Property
overflow-y 4.0 9.0

8.0 -ms-

3.5 3.0 9.5


CSS Syntax

overflow-y: visible|hidden|scroll|auto|initial|inherit;

Property Values

Value Description Play it
visible The content is not clipped, and it may be rendered outside the content box. This is default Play it »
hidden The content is clipped - and no scrolling mechanism is provided Play it »
scroll The content is clipped and a scrolling mechanism is provided Play it »
auto Should cause a scrolling mechanism to be provided for overflowing boxes 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 Overflow

HTML DOM reference: overflowY property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS padding Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

p {

 padding: 35px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An element's padding is the space between its content and its border.

The padding property is a shorthand property for:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Note: Padding creates extra space within an element, while margin creates extra space around an element.

This property can have from one to four values.

If the padding property has four values:

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

If the padding property has three values:

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

If the padding property has two values:

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

If the padding property has one value:

  • padding:10px;
    • all four paddings are 10px

Note: Negative values are not allowed.

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

Browser Support

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

Property
padding 1.0 4.0 1.0 1.0 3.5


CSS Syntax

padding: length|initial|inherit;

Property Values

Value Description Play it
length Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units Play it »
% Specifies the padding in percent of the width of the containing element 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 padding for a <p> element to 35 pixels for top and bottom, and to 70 pixels for right and left:

p {

 padding: 35px 70px;

}

Try it Yourself »

Example

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

p {

  padding: 35px 70px 50px;

}

Try it Yourself »

Example

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

p {

  padding: 35px 70px 50px 90px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Padding

CSS tutorial: CSS Box Model

HTML DOM reference: padding property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS padding-bottom Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

p.ex1 {

  padding-bottom: 25px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An element's padding is the space between its content and its border.

The padding-bottom property sets the bottom padding (space) of an element.

Note: Negative values are not allowed.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.paddingBottom="50px"Try it

Browser Support

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

Property
padding-bottom 1.0 4.0 1.0 1.0 3.5


CSS Syntax

padding-bottom: length|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed bottom padding in px, pt, cm, etc. Default value is 0. Read about length units Play it »
% Specifies a bottom padding in percent of the width of the element 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 bottom padding for a <p> element to 10% of the width of the element:

p.ex1 {

 padding-bottom: 10%;

}

Try it Yourself »

Example

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

p.ex1 {

  padding-bottom: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Padding

HTML DOM reference: paddingBottom property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS padding-left Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the left padding for a <p> element to 50 pixels:

p.ex1 {

  padding-left: 50px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An element's padding is the space between its content and its border.

The padding-left property sets the left padding (space) of an element.

Note: Negative values are not allowed.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.paddingLeft="50px"Try it

Browser Support

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

Property
padding-left 1.0 4.0 1.0 1.0 3.5


CSS Syntax

padding-left: length|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed left padding in px, pt, cm, etc. Default value is 0. Read about length units Play it »
% Specifies a left padding in percent of the width of the element 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 padding for a <p> element to 10% of the width of the element:

p.ex1 {

 padding-left: 10%;

}

Try it Yourself »

Example

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

p.ex1 {

 padding-left: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Padding

HTML DOM reference: paddingLeft property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS padding-right Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

p.ex1 {

 padding-right: 150px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An element's padding is the space between its content and its border.

The padding-right property sets the right padding (space) of an element.

Note: Negative values are not allowed.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.paddingRight="50px"Try it

Browser Support

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

Property
padding-right 1.0 4.0 1.0 1.0 3.5


CSS Syntax

padding-right: length|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed right padding in px, pt, cm, etc. Default value is 0. Read about length units Play it »
% Specifies a right padding in percent of the width of the element 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 padding for a <p> element to 50% of the width of the element:

p.ex1 {

  padding-right: 50%;

}

Try it Yourself »

Example

Set the right padding for a <p> element to 2 em:

p.ex1 {

  padding-right: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Padding

HTML DOM reference: paddingRight property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS padding-top Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

p.ex1 {

  padding-top: 25px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

An element's padding is the space between its content and its border.

The padding-top property sets the top padding (space) of an element.

Note: Negative values are not allowed.

Default value: 0
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.paddingTop="50px"Try it

Browser Support

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

Property
padding-top 1.0 4.0 1.0 1.0 3.5


CSS Syntax

padding-top: length|initial|inherit;

Property Values

Value Description Play it
length Specifies a fixed top padding in px, pt, cm, etc. Default value is 0. Read about length units Play it »
% Specifies a top padding in percent of the width of the element 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 top padding for a <p> element to 10% of the width of the element:

p.ex1 {

  padding-top: 10%;

}

Try it Yourself »

Example

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

p.ex1 {

  padding-top: 2em;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Padding

HTML DOM reference: paddingTop property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS page-break-after Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Always insert a page-break after a <footer> element:

@media print {

  footer {page-break-after: always;}

}


Definition and Usage

The page-break-after property adds a page-break after a specified element.

Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note: You cannot use this property on an empty <div> or on absolutely positioned elements.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.pageBreakAfter="always"

Browser Support

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

Property
page-break-after 1.0 4.0 1.0 1.2 7.0

Note: None of the browsers support "avoid".

Note: Browsers may interpret "left" and "right" as "always".



CSS Syntax

page-break-after: auto|always|avoid|left|right|initial|inherit;

Property Values

Value Description
auto Default. Automatic page-break
always Always insert a page-break after the element
avoid Avoid a page-break after the element (if possible)
left Insert page-break after the element so that the next page is formatted as a left page
right Insert page-break after the element so that the next page is formatted as a right page
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: pageBreakAfter property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS page-break-before Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Always insert a page-break before a <h1> element:

@media print {

 h1 {page-break-before: always;}

}


Definition and Usage

The page-break-before property adds a page-break before a specified element..

Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note: You cannot use this property on an empty <div> or on absolutely positioned elements.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.pageBreakBefore="always"

Browser Support

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

Property
page-break-before 1.0 4.0 1.0 1.2 7.0

Note: None of the browsers support "avoid".

Note: Browsers may interpret "left" and "right" as "always".



CSS Syntax

page-break-before: auto|always|avoid|left|right|initial|inherit;

Property Values

Value Description
auto Default. Automatic page-breaks
always Always insert a page-break before the element
avoid Avoid page-break before the element (if possible)
left Insert page-break before the element so that the next page is formatted as a left page
right Insert page-break before the element so that the next page is formatted as a right page
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: pageBreakBefore property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS page-break-inside Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Avoid page-break inside <pre> and <blockquote> elements:

@media print {

  pre, blockquote {page-break-inside: avoid;}

}


Definition and Usage

The page-break-inside property sets whether a page-break should be avoided inside a specified element.

Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed.

Note: You cannot use this property on absolutely positioned elements.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.pageBreakInside="avoid"

Browser Support

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

Property
page-break-inside 1.0 8.0 19.0 1.3 7.0


CSS Syntax

page-break-inside: auto|avoid|initial|inherit;

Property Values

Value Description
auto Default. Automatic page-breaks
avoid Avoid page-break inside the element (if possible)
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: pageBreakInside property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS perspective Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Give a 3D-positioned element some perspective:

#div1 {

  perspective: 100px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

Tip: Also look at the perspective-origin property, which defines at which position the user is looking at the 3D object.

To better understand the perspective property, view a demo.

Default value: none
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.perspective="50px"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
perspective 36.0

12.0 -webkit-

10.0 16.0

10.0 -moz-

9.0

4.0.3 -webkit-

23.0

15.0 -webkit-



CSS Syntax

perspective: length|none;

Property Values

Property Value Description
length How far the element is placed from the view
none Default value. Same as 0. The perspective is not set
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 cube and set different perspectives:

.ex1 {

 perspective: 800px;

}


.ex2 {

  perspective: 150px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS 3D Transforms

HTML DOM reference: perspective property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS perspective-origin Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Define at from which position the user is looking at the 3D-positioned element:

#div1 {

  perspective: 100px;

  perspective-origin: left;

}

Try it Yourself »


Definition and Usage

The perspective-origin property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

Note: This property must be used in conjunction with the perspective property!

To better understand the perspective-origin property, view a demo.

Default value: 50% 50%
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.perspectiveOrigin="10px 50%"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
perspective-origin 36.0

12.0 -webkit-

10.0 16.0

10.0 -moz-

9.0

4.0.3 -webkit-

23.0

15.0 -webkit-



CSS Syntax

perspective-origin: x-axis y-axis|initial|inherit;

Property Values

Property Value Description
x-axis Defining where the view is placed at the x-axis

Possible values:

  • left
  • center
  • right
  • length
  • %

Default value: 50%

y-axis Defining where the view is placed at the y-axis

Possible values:

  • top
  • center
  • bottom
  • length
  • %

Default value: 50%

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 3D Transforms

HTML DOM reference: perspectiveOrigin property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS pointer-events Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set whether or not an element should react to pointer events:

div.ex1 {

  pointer-events: none;

}


div.ex2 {

 pointer-events: auto;

}

Try it Yourself »


Definition and Usage

The pointer-events property defines whether or not an element reacts to pointer events.

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

Browser Support

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

Property
pointer-events 2.0 11.0 3.6 4.0 9.0


CSS Syntax

pointer-events: auto|none;

Property Values

Property Value Description
auto The element reacts to pointer events, like :hover and click. This is default
none The element does not react to pointer events
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 position Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Position an <h2> element:

h2 {

  position: absolute;

  left: 100px;

 top: 150px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Default value: static
Inherited: no
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.position="absolute"Try it

Browser Support

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

Property
position 1.0 7.0 1.0 1.0 4.0

Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.



CSS Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit;

Property Values

Value Description Play it
static Default value. Elements render in order, as they appear in the document flow Play it »
absolute The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed The element is positioned relative to the browser window Play it »
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position Play it »
sticky The element is positioned based on the user's scroll position

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.

Try 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

How to position an element relative to its normal position:

h2.pos_left {

  position: relative;

  left: -20px;

}


h2.pos_right {

 position: relative;

  left: 20px;

}

Try it Yourself »

Example

More positioning:

#parent1 {

  position: static;

 border: 1px solid blue;

 width: 300px;

  height: 100px;

}


#child1 {

 position: absolute;

  border: 1px solid red;

  top: 70px;

  right: 15px;

}


#parent2 {

  position: relative;

  border: 1px solid blue;

  width: 300px;

  height: 100px;

}


#child2 {

 position: absolute;

 border: 1px solid red;

  top: 70px;

  right: 15px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: position property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS quotes Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Specify quotation marks for quotations:

#a {

 quotes: "'" "'";

}

Try it Yourself »


Definition and Usage

The quotes property sets the type of quotation marks for quotations.

Default value: not specified
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.quotes="'\253' '\273'"Try it

Browser Support

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

Property
quotes 11.0 8.0 1.5 5.1 4.0


CSS Syntax

quotes: none|string|initial|inherit;

Property Values

Value Description Play it
none Specifies that the "open-quote" and "close-quote" values of the "content" property will not produce any quotation marks Play it »
string string string string Specifies which quotation marks to use. The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, 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

Quotation Mark Characters

Result Description Entity Number
" double quote \0022
' single quote \0027
single, left angle quote \2039
single, right angle quote \203A
« double, left angle quote \00AB
» double, right angle quote \00BB
left quote (single high-6) \2018
right quote (single high-9) \2019
left quote (double high-6) \201C
right quote (double high-9) \201D
double quote (double low-9) \201E

Related Pages

HTML DOM reference: quotes property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS resize Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Here, the user can resize both the height and width of a <div> element:

div {

 resize: both;

 overflow: auto;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The resize property defines if (and how) an element is resizable by the user.

Note: The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

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

Browser Support

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

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

Property
resize 4.0 Not supported 5.0

4.0 -moz-

4.0 15.0


CSS Syntax

resize: none|both|horizontal|vertical|initial|inherit;

Property Values

Value Description Play it
none Default value. The user cannot resize the element Play it »
both The user can resize both the height and width of the element Play it »
horizontal The user can resize the width of the element Play it »
vertical The user can resize the height of the element 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 the user resize only the height of a <div> element:

div {

  resize: vertical;

  overflow: auto;

}

Try it Yourself »

Example

Let the user resize only the width of a <div> element:

div {

 resize: horizontal;

  overflow: auto;

}

Try it Yourself »

Example

In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:

textarea {

  resize: none;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS User Interface

HTML DOM reference: resize property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS right Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

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

div.absolute {

 position: absolute;

 right: 150px;

 width: 200px;

 height: 120px;

 border: 3px solid green;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The right 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 right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.
  • If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
  • If position: sticky; - the right 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 right property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.right="200px"Try it

Browser Support

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

Property
right 1.0 5.5 1.0 1.0 5.0


CSS Syntax

right: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Lets the browser calculate the right edge position. This is default Play it »
length Sets the right edge position in px, cm, etc. Negative values are allowed. Read about length units Play it »
% Sets the right 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 right property with a negative value and for an element with no positioned ancestors:

div.b {

  position: absolute;

  right: -20px;

 width: 100px;

 height: 120px;

  border: 3px solid blue;

}


div.c {

 position: absolute;

 right: 150px;

  width: 200px;

  height: 120px;

  border: 3px solid green;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Positioning

CSS reference: left property

CSS reference: bottom property

CSS reference: top property

HTML DOM reference: right property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS scroll-behavior Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Add a smooth scrolling effect to the document:

html {

  scroll-behavior: smooth;

}

Try it Yourself »


Definition and Usage

The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.

Default value: auto
Inherited: no
Animatable: no. Read about animatable
Version: CSSOM View Module (Working Draft)
JavaScript syntax: object.style.scrollBehavior="smooth"Try it

Browser Support

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

Property
scroll-behavior 61.0 79.0 36.0 Not supported 48.0


CSS Syntax

scroll-behavior: auto|smooth|initial|inherit;

Property Values

Value Description
auto Allows a straight jump "scroll effect" between elements within the scrolling box. This is default
smooth Allows a smooth animated "scroll effect" between elements within the scrolling box.
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 tab-size Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the width of the tab character to 16 spaces:

pre {-moz-tab-size: 16;} /* Firefox */

pre {tab-size: 16;}


Try it Yourself »


Definition and Usage

The tab-size property specifies the width of a tab character.

In HTML, the tab character is usually displayed as a single space-character, except for some elements, like <textarea> and <pre>, and the result of the tab-size property will only be visible for those elements.

Default value: 8
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.tabSize="16"Try it

Browser Support

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

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

Property
tab-size 21.0 Not supported 4.0 -moz- 6.1 15.0

10.6 -o-

Note: No browser is currently supporting the length unit value.


CSS Syntax

tab-size: number|length|initial|inherit;

Property Values

Value Description Play it
number The number of space-characters to be displayed for each tab-character. Default value is 8 Play it »
length The length of a tab-character. This property value is not supported in any of the major browsers
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS table-layout Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different table layout algorithms:

table.a {

  table-layout: auto;

  width: 180px;

}


table.b {

  table-layout: fixed;

  width: 180px;

}

Try it Yourself »


Definition and Usage

The table-layout property defines the algorithm used to lay out table cells, rows, and columns.

Tip: The main benefit of table-layout: fixed; is that the table renders much faster. On large tables, users will not see any part of the table until the browser has rendered the whole table. So, if you use table-layout: fixed, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker!

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

Browser Support

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

Property
table-layout 14.0 5.0 1.0 1.0 7.0


CSS Syntax

table-layout: auto|fixed|initial|inherit;

Property Values

Value Description Play it
auto Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells. The content will dictate the layout Play it »
fixed Sets a fixed table layout algorithm. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the 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: tableLayout property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-align Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the text alignment for different <div> elements:

div.a {

 text-align: center;

}


div.b {

  text-align: left;

}


div.c {

  text-align: right;

}


div.c {

  text-align: justify;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-align property specifies the horizontal alignment of text in an element.

Default value: left if direction is ltr, and right if direction is rtl
Inherited: yes
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.textAlign="right"Try it

Browser Support

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

Property
text-align 1.0 3.0 1.0 1.0 3.5


CSS Syntax

text-align: left|right|center|justify|initial|inherit;

Property Values

Value Description Play it
left Aligns the text to the left Play it »
right Aligns the text to the right Play it »
center Centers the text Play it »
justify Stretches the lines so that each line has equal width (like in newspapers and magazines) 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

Another text-align example:

h1 {

   text-align: center;

}


p.date {

   text-align: right;

}


p.main {

   text-align: justify;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: textAlign property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-align-last Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Align the last line of text in three <div> elements:

div.a {

 text-align: justify;  /* For Edge */

  text-align-last: right;

}


div.b {

  text-align: justify; /* For Edge */

  text-align-last: center;

}


div.c {

  text-align: justify; /* For Edge */

 text-align-last: justify;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-align-last property specifies how to align the last line of a text.

Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a <div> with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.

Note: In Edge/Internet Explorer the text-align-last property only works on text that has "text-align: justify".

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

Browser Support

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

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

Property
text-align-last 47.0 5.5* 49.0

12.0 -moz-

Not supported 34.0

*In Edge/Internet Explorer, the "start" and "end" values are not supported.



CSS Syntax

text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

Property Values

Value Description Play it
auto Default value. The last line is justified and aligned left Play it »
left The last line is aligned to the left Play it »
right The last line is aligned to the right Play it »
center The last line is center-aligned Play it »
justify The last line is justified as the rest of the lines Play it »
start The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left) Play it »
end The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is 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

More Examples

Example

Use text-align-last on only the very last line in the container:

div.b p:last-child {

  text-align-last: center;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: textAlignLast property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-decoration Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different text decorations for <h1>, <h2>, and <h3> elements:

h1 {

  text-decoration: overline;

}


h2 {

  text-decoration: line-through;

}


h3 {

  text-decoration: underline;

}


h4 {

 text-decoration: underline overline;

}


Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

  • text-decoration-line (required)
  • text-decoration-color
  • text-decoration-style
Default value: none currentcolor solid
Inherited: no
Animatable: no, see individual properties. Read about animatable
Version: CSS1, renewed in CSS3
JavaScript syntax: object.style.textDecoration="underline"Try it

Browser Support

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

Property
text-decoration 1.0 3.0 1.0 1.0 3.5


CSS Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;

Property Values

Value Description
text-decoration-line Sets the kind of text decoration to use (like underline, overline, line-through)
text-decoration-color Sets the color of the text decoration
text-decoration-style Sets the style of the text decoration (like solid, wavy, dotted, dashed, double)
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

Add more text decoration:

h1 {

 text-decoration: underline overline dotted red;

}


h2 {

 text-decoration: underline overline wavy blue;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text

HTML DOM reference: textDecoration property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-decoration-color Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the color of the text-decoration to red:

p {

  text-decoration: underline;

  text-decoration-color: red;

}

Try it Yourself »


Definition and Usage

The text-decoration-color property specifies the color of the text-decoration (underlines, overlines, linethroughs).

Default value: currentColor
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.textDecorationColor="red"Try it

Browser Support

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

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

Property
text-decoration-color 57.0 Not supported 36.0

6.0 -moz-

7.1 -webkit- 44.0

CSS Syntax

text-decoration-color: color|initial|inherit;

Property Values

Value Description Play it
color Specifies the color of the text-decoration 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: textDecorationColor property


❮ PreviousComplete CSS ReferenceNext ❯

CSS text-decoration-line Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different types of text-decoration lines:

div.a {

 text-decoration-line: overline;

}


div.b {

 text-decoration-line: underline;

}


div.c {

  text-decoration-line: line-through;

}


div.d {

 text-decoration-line: overline underline;

}

Try it Yourself »


Definition and Usage

The text-decoration-line property sets the kind of text decoration to use (like underline, overline, line-through).

Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, and text-decoration-color.

Note: You can also combine more than one value, like underline and overline to display lines both under and over the text.

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

Browser Support

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

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

Property
text-decoration-line 57.0 Not supported 36.0

6.0 -moz-

7.1 -webkit- 44.0


CSS Syntax

text-decoration-line: none|underline|overline|line-through|initial|inherit;

Property Values

Value Description Play it
none Default value. Specifies no line for the text-decoration Play it »
underline Specifies that a line will be displayed under the text Play it »
overline Specifies that a line will be displayed over the text Play it »
line-through Specifies that a line will be displayed through the text 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: textDecorationLine property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-decoration-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set different types of text-decoration styles:

div.a {

  text-decoration-line: underline;

  text-decoration-style: solid;

}


div.b {

  text-decoration-line: underline;

  text-decoration-style: wavy;

}


div.c {

  text-decoration-line: underline;

  text-decoration-style: double;

}


div.d {

  text-decoration-line: overline underline;

  text-decoration-style: wavy;

}

Try it Yourself »


Definition and Usage

The text-decoration-style property sets the style of the text decoration (like solid, wavy, dotted, dashed, double).

Tip: Also look at the text-decoration property, which is a short-hand property for text-decoration-line, text-decoration-style, and text-decoration-color.

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

Browser Support

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

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

Property
text-decoration-style 57.0 Not supported 36.0

6.0 -moz-

12.1 44.0


CSS Syntax

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

Property Values

Value Description Play it
solid Default value. The line will display as a single line Play it »
double The line will display as a double line Play it »
dotted The line will display as a dotted line Play it »
dashed The line will display as a dashed line Play it »
wavy The line will display as a wavy line 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: textDecorationStyle property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-indent Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Indent the first line of text with different values:

div.a {

  text-indent: 50px;

}


div.b {

 text-indent: -2em;

}


div.c {

 text-indent: 30%;

}

Try it Yourself »


Definition and Usage

The text-indent property specifies the indentation of the first line in a text-block.

Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

Default value: 0
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS1
JavaScript syntax: object.style.textIndent="50px"Try it

Browser Support

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

Property
text-indent 1.0 3.0 1.0 1.0 3.5

CSS Syntax

text-indent: length|initial|inherit;

Property Values

Value Description Play it
length Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0. Read about length units Play it »
% Defines the indentation in % of the width of the parent element 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: textIndent property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-justify Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the justification method to "inter-word" when text-align is set to "justify":

div {

  text-align: justify;

  text-justify: inter-word;

}

Try it Yourself »


Definition and Usage

The text-justify property specifies the justification method of text when text-align is set to "justify".

Default value: auto
Inherited: yes
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.textJustify="inter-word"

Browser Support

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

Property
text-justify Yes* 11.0 55.0 10.0.3 Yes*

*This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to Enabled). To change preferences in Chrome: type in "chrome://flags" in the Chrome browser. To change preferences in Opera: type in "flags" in the Opera browser.



CSS Syntax

text-justify: auto|inter-word|inter-character|none|initial|inherit;

Property Values

Value Description Play it
auto The browser determines the justification algorithm Play it »
inter-word Increases/Decreases the space between words Play it »
inter-character Increases/Decreases the space between characters Play it »
none Disables justification methods 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


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-overflow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Use of the text-overflow property:

div {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

  • white-space: nowrap;
  • overflow: hidden;
Default value: clip
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.textOverflow="ellipsis"Try it

Browser Support

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

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

Property
text-overflow 4.0 6.0 7.0 3.1 11.0

9.0 -o-



CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Property Values

Value Description Play it
clip Default value. The text is clipped and not accessible Play it »
ellipsis Render an ellipsis ("...") to represent the clipped text Play it »
string Render the given string to represent the clipped text
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

Text-overflow with a hover effect (show entire text on hover):

div.a {

 white-space: nowrap;

 overflow: hidden;

 text-overflow: ellipsis;

}


div.a:hover {

 overflow: visible;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text Effects

HTML DOM reference: textOverflow property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-shadow Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Basic text-shadow:

h1 {

  text-shadow: 2px 2px #ff0000;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The text-shadow property adds shadow to text.

This property accepts a comma-separated list of shadows to be applied to the text.

Default value: none
Inherited: yes
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.textShadow="2px 5px 5px red"Try it

Browser Support

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

Property
text-shadow 4.0 10.0 3.5 4.0 9.6


CSS Syntax

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Property Values

Value Description Play it
h-shadow Required. The position of the horizontal shadow. Negative values are allowed Play it »
v-shadow Required. The position of the vertical shadow. Negative values are allowed Play it »
blur-radius Optional. The blur radius. Default value is 0 Play it »
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values Play it »
none Default value. No shadow 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

Tip: Read more about allowed values (CSS length units)


More Examples

Example

Text-shadow with a blur effect:

h1 {

 text-shadow: 2px 2px 8px #FF0000;

}

Try it Yourself »

Example

Text-shadow on a white text:

h1 {

 color: white;

 text-shadow: 2px 2px 4px #000000;

}

Try it Yourself »

Example

Text-shadow with a red neon glow:

h1 {

  text-shadow: 0 0 3px #FF0000;

}

Try it Yourself »

Example

Text-shadow with a red and blue neon glow:

h1 {

  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Text Effects

HTML DOM reference: textShadow property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS text-transform Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Transform text in different <div> elements:

div.a {

 text-transform: uppercase;

}


div.b {

  text-transform: lowercase;

}


div.c {

  text-transform: capitalize;

}

Try it Yourself »


Definition and Usage

The text-transform property controls the capitalization of text.

Default value: none
Inherited: yes
Version: CSS1
JavaScript syntax: object.style.textTransform="uppercase"Try it

Browser Support

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

Property
text-transform 1.0 4.0 1.0 1.0 7.0


CSS Syntax

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Property Values

Value Description Play it
none No capitalization. The text renders as it is. This is default Play it »
capitalize Transforms the first character of each word to uppercase Play it »
uppercase Transforms all characters to uppercase Play it »
lowercase Transforms all characters to lowercase 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: textTransform property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS top Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set the top edge of the positioned <div> element 50px down from the top edge of its nearest positioned ancestor:

div {

  position: absolute;

 top: 50px;

  border: 3px solid green;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

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

  • If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
  • If position: relative; - the top property makes the element's top edge to move above/below its normal position.
  • If position: sticky; - the top 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 top property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS2
JavaScript syntax: object.style.top="100px"Try it

Browser Support

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

Property
top 1.0 5.0 1.0 1.0 6.0


CSS Syntax

top: auto|length|initial|inherit;

Property Values

Value Description Play it
auto Lets the browser calculate the top edge position. This is default Play it »
length Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units Play it »
% Sets the top 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 top property with a negative value and for an element with no positioned ancestors:

div.b {

  position: absolute;

  top: -20px;

  border: 3px solid blue;

}


div.c {

  position: absolute;

  top: 150px;

  border: 3px solid green;

}


Try it Yourself »


Related Pages

CSS tutorial: CSS Positioning

CSS reference: bottom property

CSS reference: left property

CSS reference: right property

HTML DOM reference: top property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transform Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Rotate, skew, and scale three different <div> elements:

div.a {

  transform: rotate(20deg);

}


div.b {

  transform: skewY(20deg);

}


div.c {

  transform: scaleY(1.5);

}

Try it Yourself »


Definition and Usage

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

To better understand the transform property, view a demo.

Default value: none
Inherited: no
Animatable: yes. Read about animatableTry it
Version: CSS3
JavaScript syntax: object.style.transform="rotate(7deg)"Try it

Browser Support

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

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

Property
transform (2D) 36.0

4.0 -webkit-

10.0

9.0 -ms-

16.0

3.5 -moz-

9.0

3.2 -webkit-

23.0

15.0 -webkit-

10.5 -o-

transform (3D) 36.0

12.0 -webkit-

12.0 10.0 9.0

4.0 -webkit-

23.0

15.0 -webkit-



Syntax

transform: none|transform-functions|initial|inherit;

Property Values

Value Description Play it
none Defines that there should be no transformation Play it »
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values Play it »
matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation Play it »
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis Play it »
translateY(y) Defines a translation, using only the value for the Y-axis Play it »
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation Play it »
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis Play it »
scaleY(y) Defines a scale transformation by giving a value for the Y-axis Play it »
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter Play it »
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis Play it »
rotateY(angle) Defines a 3D rotation along the Y-axis Play it »
rotateZ(angle) Defines a 3D rotation along the Z-axis Play it »
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis Play it »
skewX(angle) Defines a 2D skew transformation along the X-axis Play it »
skewY(angle) Defines a 2D skew transformation along the Y-axis Play it »
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Images thrown on the table

This example demonstrates how to create "polaroid" pictures and rotate the pictures.


Related Pages

CSS tutorial: CSS 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transform property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transform-origin Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a rotated element's base placement:

div {

  transform: rotate(45deg);

  transform-origin: 20% 40%;

}

Try it Yourself »


Definition and Usage

The transform-origin property allows you to change the position of transformed elements.

2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

To better understand the transform-origin property, view a demo.

Note: This property must be used together with the transform property.

Tip: To better understand this property for 3D transforms, view a demo.

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

Browser Support

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

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

Property
transform-origin

(two-value syntax)

36.0

4.0 -webkit-

10.0

9.0 -ms-

16.0

3.5 -moz-

9.0

3.2 -webkit-

23.0

15.0 -webkit-

10.5 -o-

transform-origin

(three-value syntax)

36.0

12.0 -webkit-

10.0 16.0

10.0 -moz-

9.0

4.0 -webkit-

23.0

15.0 -webkit-



CSS Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Values

Property Value Description
x-axis Defines where the view is placed at the x-axis. Possible values:
  • left
  • center
  • right
  • length
  • %
y-axis Defines where the view is placed at the y-axis. Possible values:
  • top
  • center
  • bottom
  • length
  • %
z-axis Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
  • length
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 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transformOrigin property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transform-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let the transformed child elements preserve the 3D transformations:

div {

 transform: rotateY(60deg);

  transform-style: preserve-3d;

}

Try it Yourself »


Definition and Usage

The transform-style property specifies how nested elements are rendered in 3D space.

Note: This property must be used together with the transform property.

To better understand the transform-style property, view a demo.

Default value: flat
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transformStyle="preserve-3d"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
transform-style 36.0

12.0 -webkit-

11.0 16.0

10.0 -moz-

9.0

4.0 -webkit-

23.0

15.0 -webkit-



CSS Syntax

transform-style: flat|preserve-3d|initial|inherit;

Property Values

Property Value Description
flat Specifies that child elements will NOT preserve its 3D position. This is default
preserve-3d Specifies that child elements will preserve its 3D position
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 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transformStyle property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transition Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Hover over a <div> element to gradually change the width from 100px to 300px:

div {

 width: 100px;

 transition: width 2s;

}


div:hover {

 width: 300px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The transition property is a shorthand property for:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect.

Default value: all 0s ease 0s
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transition="all 2s"Try it

Browser Support

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

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

Property
transition 26.0

4.0 -webkit-

10.0 16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-



CSS Syntax

transition: property duration timing-function delay|initial|inherit;

Property Values

Value Description
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start
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

When an <input type="text"> gets focus, gradually change the width from 100px to 250px:

input[type=text] {

 width: 100px;

  transition: width .35s ease-in-out;

}


input[type=text]:focus {

 width: 250px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Transitions

HTML DOM reference: transition property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transition-delay Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Wait 2 seconds before the transition effect starts:

div {

  transition-delay: 2s;

}


Try it Yourself »


Definition and Usage

The transition-delay property specifies when the transition effect will start.

The transition-delay value is defined in seconds (s) or milliseconds (ms).

Default value: 0s
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transitionDelay="2s"Try it

Browser Support

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

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

Property
transition-delay 26.0

4.0 -webkit-

10.0 16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-


CSS Syntax

transition-delay: time|initial|inherit;

Property Values

Value Description
time Specifies the number of seconds or milliseconds to wait before the transition effect will start
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 Transitions

HTML DOM reference: transitionDelay property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transition-duration Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Let the transition effect last for 5 seconds:

div {

 transition-duration: 5s;

}


Try it Yourself »


Definition and Usage

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

Default value: 0s
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transitionDuration="1s"Try it

Browser Support

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

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

Property
transition-duration 26.0

4.0 -webkit-

10.0 16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-


CSS Syntax

transition-duration: time|initial|inherit;

Property Values

Value Description
time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, meaning there will be no effect
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 Transitions

HTML DOM reference: transitionDuration property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transition-property Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Hover over a <div> element, and change the width with a smooth transition effect:

div {

  transition-property: width;

}


div:hover {

  width: 300px;

}

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

Tip: A transition effect could typically occur when a user hover over an element.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

Default value: all
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.transitionProperty="width,height"Try it

Browser Support

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

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

Property
transition-property 26.0

4.0 -webkit-

10.0 16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-



CSS Syntax

transition-property: none|all|property|initial|inherit;

Property Values

Value Description
none No property will get a transition effect
all Default value. All properties will get a transition effect
property Defines a comma separated list of CSS property names the transition effect is for
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

Hover over a <div> element, and change the width AND height with a smooth transition effect:

div {

 transition-property: width, height;

}


div:hover {

 width: 300px;

  height: 300px;

}

Try it Yourself »


Related Pages

CSS tutorial: CSS Transitions

HTML DOM reference: transitionProperty property


❮ PreviousComplete CSS ReferenceNext ❯

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


CSS transition-timing-function Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

A transition effect with the same speed from start to end:

div {

 transition-timing-function: linear;

}


Try it Yourself »


Definition and Usage

The transition-timing-function property specifies the speed curve of the transition effect.

This property allows a transition effect to change speed over its duration.

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

Browser Support

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

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

Property
transition-timing-function 26.0

4.0 -webkit-

10.0 16.0

4.0 -moz-

6.1

3.1 -webkit-

12.1

10.5 -o-



CSS Syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Property Values

Value Description
ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Tip: Try the different values in the examples below to understand how it works!


More Examples

Example

To better understand the different function values: Here are five different div elements with five different values:

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}


Try it Yourself »

Example

Same as the example above, but the speed curves are specified with the cubic-bezier function:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}

#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}


Try it Yourself »


Related Pages

CSS tutorial: CSS Transitions

HTML DOM reference: transitionTimingFunction property


❮ PreviousComplete CSS ReferenceNext ❯