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 […]
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 […]
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 animatable – Try it Version: CSS1 JavaScript syntax: object.style.letterSpacing=”3px”Try it CSS Syntax letter-spacing: […]
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 […]
Set the z-index for an image: img { position: absolute; left: 0px; top: 0px; z-index: -1; } Try it Yourself » Definition and Usage The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Default […]
Vertical align an image: img.a { vertical-align: baseline; }img.b { vertical-align: text-top; }img.c { vertical-align: text-bottom; }img.d { vertical-align: sub; }img.e { vertical-align: super; } Try it Yourself » Definition and Usage The vertical-align property sets the vertical alignment of an element. Default value: baseline Inherited: no Animatable: yes. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.verticalAlign=”top”Try it CSS Syntax vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit; Property Values Value Description baseline The […]
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 […]
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. […]
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 […]
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 […]
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 setting […]
Set the order of the flexible items: /* Code for Safari 6.1 to 8.0 */ div#myRedDIV {-webkit-order: 2;} div#myBlueDIV {-webkit-order: 4;} div#myGreenDIV {-webkit-order: 3;} div#myPinkDIV {-webkit-order: 1;} /* Standard syntax */ 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 […]
Make some space around the items of the flexible <div> element: div { display: -webkit-flex; /* Safari */ -webkit-justify-content: space-around; /* Safari 6.1+ */ display: flex; justify-content: space-around; } Try it Yourself » 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 […]
Set the top edge of the absolute positioned <div> element to 80px below the top edge of its nearest positioned ancestor: div.absolute { position: absolute; top: 80px; width: 200px; height: 100px; border: 3px solid #8AC007; } Try it Yourself » Definition and Usage For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below […]
Set the right edge of the absolute positioned <div> element 20px to the left of the right edge of its nearest positioned ancestor: div.absolute { position: absolute; right: 20px; width: 200px; height: 120px; border: 3px solid #8AC007; } Try it Yourself » Definition and Usage For absolutely positioned elements, the right property sets the right edge of an element to a […]
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 CSS Syntax […]
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. […]
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. […]
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. […]
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. […]
