- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
169 Views
Use the align-content property to modify the behavior of the flex-wrap property.ExampleYou can try to run the following code to implement the flex-wrap property −Live Demo .mycontainer { display: flex; background-color: orange; align-content: space-between; height: 150px; width: 600px; flex-wrap: wrap; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
80 Views
Use the justify-content property with value space-around to add space near the lines.ExampleYou can try to run the following code to implement the space-around value −Live Demo .mycontainer { display: flex; background-color: red; justify-content: space-around; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
1K+ Views
To position text to bottom left, use the bottom and right property. You can try to run the following code to position text to bottom right on an image:ExampleLive Demo .box { position: relative; } img { width: 100%; height: auto; opacity: 0.6; } .direction { position: absolute; bottom: 10px; right: 19px; font-size: 13px; } Heading One Below image has text in the bottom right: Bottom Right Corner
138 Views
Use the align-items property to align the flex items.ExampleYou can try to run the following code to implement the align-items property −Live Demo .mycontainer { display: flex; background-color: orange; align-items: center; height: 150px; width: 600px; } .mycontainer > div { background-color: white; text-align: center; line-height: 40px; font-size: 25px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
2K+ Views
You can try to run the following code to set button on an image:ExampleLive Demo .box { position: relative; width: 100%; max-width: 250px; } .box img { width: 100%; height: auto; } .box .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Button
107 Views
Variables in CSS are used to add custom property values to your web page. Set a custom name of the property and set value for it.You can try to run the following code to implement variables in CSS to change the background and text colorExampleLive Demo :root { --my-bg-color: blue; --my-color: white; } #demo { background-color: var(--my-bg-color); color: var(--my-color); } Heading One This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
80 Views
The grid-template-rows property is used to set the number of rows in the Grid.ExampleYou can try to run the following code to implement the grid-template-rows property −Live Demo .container { display: grid; background-color: blue; grid-template-rows: 70px 190px; padding: 20px; grid-gap: 20px; } .container > div { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
98 Views
Use the columns property to set columns with CSS. You can try to run the following code to implement the columns property:ExampleLive Demo .demo { column-rule-color: gray; columns: 100px 4; column-rule-style: dashed; } This is demo text. This is demo text. This is demo text. This is demo text. ... Read More
58 Views
Use the column-width property to specify the width of the columns. You can try to run the following code to implement the column-width property −ExampleLive Demo .demo { column-count: 4; column-rule-color: gray; column-rule-style: dashed; column-width: 100px; } This is demo text. This is demo text. ... Read More