Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.box { width: 200px; height: 100px; background-color: lightblue; border: 2px solid blue; outline: 5px solid red; outline-offset: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .box:hover { outline: 5px solid green; outline-offset: 10px; }The 'outline-offset' property in CSS is used to create space between an outline and the edge or border of an element. This can enhance the visibility of the outline, making it stand out more clearly against the background or the element's border. By adjusting the offset, you can customize the appearance of outlines for better visual effects.
.box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; font-size: 20px; margin: 50px; transition: outline-color 0.3s; } .box:hover { outline: 5px solid; outline-color: coral; }The 'outline-color' property in CSS is used to set the color of an outline that is drawn around an element. Unlike borders, outlines do not take up space and can be used to highlight elements without affecting layout. This property can enhance accessibility by making focusable elements more visible to users.
.box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; font-size: 20px; margin: 20px; transition: outline 0.3s; } .box:hover { outline: 5px dashed red; }The CSS 'outline' property is used to create a line around an element, outside of its border, without affecting the layout of the document. It is often used for accessibility purposes, such as indicating focus on interactive elements. The outline can have different styles, widths, and colors, making it a versatile tool for enhancing user experience.
.text-container { width: 300px; margin: 20px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; orphans: 2; }The CSS 'orphans' property controls the minimum number of lines that must be shown at the bottom of a block container before it can be broken up. It helps prevent single lines from appearing at the top or bottom of a page or column, improving the overall readability of text. Setting 'orphans' to a value of 2 ensures that at least two lines of a paragraph are displayed together, avoiding the appearance of a lonely line at the end of a block.
.container {
display: flex;
justify-content: space-around;
width: 100%;
height: 100vh;
background-color: #f0f0f0;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
border-radius: 5px;
text-align: center;
}
.item1 {
order: 2;
}
.item2 {
order: 1;
}
.item3 {
order: 3;
}The 'order' property in CSS is used to control the order in which flex items appear within a flex container. Items with a lower order value will appear before items with a higher order value, allowing for dynamic rearrangement of elements without changing the HTML structure.