CSS has several different units for expressing a length. Many CSS properties take “length” values, such as width, margin, padding, font-size, border-width, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit […]
Example How to position a background-image: body { background-image: url(‘w3css.gif’); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. […]
Example Set a background-image for the <body> element: body { background-image: url(“paper.gif”); background-color: #cccccc; } Try it Yourself » Example Set two background images for the <body> element: body { background-image: url(“img_tree.gif”), url(“paper.gif”); background-color: #cccccc; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-image property sets one or more background images for an element. […]
Example Set the background color for a page: body {background-color: coral;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background […]
CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names Hexadecimal Colors Hexadecimal color values are supported in all major browsers. A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify […]
Set different background property in one declaration: body { background: lightblue url(“img_tree.gif”) no-repeat fixed center; } Try it Yourself » Definition and Usage The background shorthand property sets all the background properties in one declaration. The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It does not matter if one […]
Example Hide and show the back face of two rotated <div> elements: #div1 { backface-visibility: hidden; } #div2 { backface-visibility: visible; } Try it Yourself » Definition and Usage The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image […]
Example Pause an animation: div { animation-play-state: paused; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-play-state property specifies whether the animation is running or paused. Note: Use this property in a JavaScript to pause an animation in the middle of a cycle. Default value: running Inherited: no Animatable: no. Read about animatable […]
Example Let the <div> element retain the style values from the last keyframe when the animation ends: div { animation-fill-mode: forwards; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or […]
Example Play the animation forwards first, then backwards: div { animation-direction: alternate; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles. Default value: normal Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationDirection=”reverse” Try it CSS […]
Example Binding an animation to a <div> element, using the shorthand property: div { animation: mymove 5s infinite; } Try it Yourself » Definition and Usage The animation property is a shorthand property for eight of the animation properties: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state Note: Always specify the animation-duration property, otherwise the duration is 0, […]
Example Play the animation two times: div { animation-iteration-count: 2; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-iteration-count property specifies the number of times an animation should be played. Default value: 1 Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationIterationCount=”infinite” Try it CSS Syntax animation-iteration-count: number|infinite|initial|inherit; Property Values Value […]
Example Start the animation after 2 seconds: div { animation-delay: 2s; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-delay property specifies a delay for the start of an animation. The animation-delay value is defined in seconds (s) or milliseconds (ms). Default value: 0s Inherited: no Animatable: no. Read about animatable Version: […]
Example Play an animation with the same speed from beginning to end: div { animation-timing-function: linear; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-timing-function specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to […]
Example Specify that the animation should complete one cycle in 3 seconds: div { animation-duration: 3s; } Try it Yourself » Definition and Usage The animation-duration property defines how long an animation should take to complete one cycle. Default value: 0 Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationDuration=”3s”Try it CSS Syntax animation-duration: time|initial|inherit; Property Values […]
Example Specify a name for the @keyframes animation: div { animation-name: mymove; } Try it Yourself » Definition and Usage The animation-name property specifies a name for the @keyframes animation. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationName=”myNEWmove”Try it CSS Syntax animation-name: keyframename|none|initial|inherit; Property Values Value Description keyframename Specifies the name of the […]
Definition and Usage Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Example Animate the background-color from red to blue: /* Code for old Chrome, Safari and Opera */ @-webkit-keyframes mymove { from {background-color: red;} to {background-color: blue;} }/* […]
CSS inherit Keyword | CSS References Example Set the text-color for <span> elements to blue, except those inside elements with class=”extra”: span { color: blue; }.extra span { color: inherit; } Try it Yourself » Definition and Usage The inherit keyword specifies that a property should inherit its value from its parent element. The inherit keyword can be used […]
CSS initial Keyword Example Set the text color of the <div> element to red, but keep the initial color for <h1> elements: div { color: red; }h1 { color: initial; } Try it Yourself » Definition and Usage The initial keyword is used to set a CSS property to its default value. The initial keyword can be used for […]
CSS all Property | CSS References Example Change all the properties applied to the element or the element’s parent to their initial value: div { background-color: yellow; color: red; all: initial; } Try it Yourself » Definition and Usage The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. Default value: none […]
