Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { background-color: #f0f0f0; padding: 20px; text-align: center; } .box { height: 150px; width: 150px; background-color: #3498db; color: white; display: flex; align-items: center; justify-content: center; border-radius: 10px; }The 'height' property in CSS specifies the height of an element. It can be set using various units such as pixels, percentages, or viewport units. Adjusting the height can significantly affect the layout and appearance of web elements.
.text-container { width: 300px; margin: 20px; font-family: Arial, sans-serif; font-size: 18px; }
.hanging-punctuation { hanging-punctuation: first; text-align: justify; margin-left: -0.5em; display: inline-block; }The 'hanging-punctuation' CSS property controls the placement of punctuation marks at the beginning or end of a line of text. It allows punctuation marks to hang outside the margin, creating a more visually appealing text layout. This property is particularly useful in typography for improving readability and aesthetics in text-heavy designs.
.grid-container { display: grid; grid-template-rows: 100px 200px auto; gap: 10px; }
.grid-item { background-color: lightblue; border: 1px solid blue; display: flex; align-items: center; justify-content: center; font-size: 20px; }The 'grid-template-rows' CSS property defines the height of the rows in a grid layout. It allows you to specify the size of each row, enabling you to create complex layouts with ease. This property is particularly useful for creating responsive designs and controlling the visual hierarchy of content.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border: 1px solid #ddd; }The 'grid-template-columns' property in CSS defines the number and size of the columns in a grid layout. It allows you to create complex and responsive layouts by specifying the width of each column, either in fixed units or relative units. This property is essential for organizing content into a structured grid format.
.grid-container {
display: grid;
grid-template-areas: 'header header' 'sidebar main' 'footer footer';
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #2196F3;
color: white;
padding: 20px;
}
.main {
grid-area: main;
background-color: #f4f4f4;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}The 'grid-template-areas' CSS property allows you to define a grid layout by assigning names to specific areas of the grid. This enables you to create a structured layout that is easy to read and maintain, as you can reference these named areas in your CSS for positioning elements within the grid.