- 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
119 Views
You can try to run the following code to achieve responsiveness for background image with CSS −ExampleLive Demo div { width: 100%; height: 300px; border: 2px dashed blue; background-image: url('https://www.tutorialspoint.com/python/images/python-data-science.jpg'); background-repeat: no-repeat; background-size: contain; } To check the effect, you need to resize the browser.
338 Views
You can try to run the following code to build a responsive grid-view:ExampleLive Demo * { box-sizing: border-box; } .header { border: 1px solid black; padding: 10px; } .leftmenu { width: 30%; float: left; ... Read More
3K+ Views
To add transparency to a button, use the CSS opacity property. This creates a disabled look for the button.You can try to run the following code to add transparency to a buttonExampleLive Demo .btn1 { color: black; text-align: center; font-size: 15px; } .btn2 { color: black; text-align: center; font-size: 15px; opacity: 0.8; } Result Click below for result: Enabled Disabled
93 Views
Use the align-content property with value space-between to add space between the flex lines.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; height: 200px; background-color: red; align-content: space-between; flex-wrap: wrap; } .mycontainer > div { background-color: yellow; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Queue Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
75 Views
Use the flex-direction property to specify the direction of the flexible items. You can try to run the following code to implement the flex-direction property:ExampleLive Demo .mycontainer { display: flex; flex-direction: column; background-color: orange; } .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
72 Views
Use the column-rule-width property to set the width of the rule between columns.ExampleYou can try to run the following code to implement the column-rule-width property:Live Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; column-rule-width: 5px; } This ... Read More
72 Views
To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.ExampleLive Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: maroon; column-rule-style: dashed; } This is demo text. This is demo ... Read More
102 Views
Use the justify-content property with value space-around to add space between the flex-items.You can try to run the following code to implement the space-between valueExampleLive Demo .mycontainer { display: flex; background-color: red; justify-content: space-between; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4