- 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
98 Views
To set how many columns an element should span, use the column-span property. You can try to run the following code to implement the column-span property:ExampleLive Demo .demo { column-count: 4; column-rule-color: maroon; column-rule-style: dashed; } h1 { column-span: all; } ... Read More
1K+ Views
To position text to bottom left, use the bottom and left property. You can try to run the following code to position text to bottom left on an imageExampleLive Demo .box { position: relative; } img { width: 100%; height: auto; opacity: 0.6; } .direction { position: absolute; bottom: 10px; left: 19px; font-size: 13px; } Heading One Below image has text in the bottom left: Bottom Left Corner
287 Views
To create a disabled button look, use the CSS opacity property.ExampleYou can try to run the following code to create a disabled look of a button −Live Demo .btn1 { color: black; text-align: center; font-size: 15px; } .btn2 { color: black; text-align: center; font-size: 15px; opacity: 0.5; } Result Click below for result: Enabled Disabled
1K+ Views
You can try to run the following code to create a vertical button groupExampleLive Demo .mybtn .button { background-color: orange; border: 1px solid green; width: 120px; color: white; font-size: 14px; padding: 10px; text-align: center; text-decoration: none; display: block; } Result Result Result Result
83 Views
To set the color between columns, use the column-rule-color property. You can try to run the following code to implement the column-rule-color property.With that, we will also set the style of the column rule:ExampleLive Demo .demo { column-count: 4; column-gap: 50px; column-rule-color: orange; column-rule-style: dashed; } This ... Read More
62 Views
The shorthand property for column rule is column-rule property. You can try to run the following code to implement the column-rule propertyExampleLive Demo .demo { column-count: 4; column-gap: 50px; column-rule: 2px dotted orange; } This is demo text. This is demo text. This is demo text. This ... Read More
121 Views
Use the column-gap property to set the gap between the columns. You can try to run the following code to implement the column-gap property, with value 50px:ExampleLive Demo .demo { column-count: 4; column-gap: 50px; } This is demo text. This is demo text. This is demo text. This is demo text. This is ... Read More
118 Views
To fill columns, use the column-fill property. You can try to run the following code to implement the column-fill property, with balance form:ExampleLive Demo .demo { column-count: 4; column-fill: balance; } This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is ... Read More
206 Views
To specify the number of columns an element should be divided into, use the column-count property.You can try to run the following code to implement the column-count property with 4 columnsExampleLive Demo .demo { column-count: 4; } This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is ... Read More
700 Views
You can try to run the following code to center pagination on a web page:ExampleLive Demo .demo { display: inline-block; } .demo1 { text-align: center; } .demo a { color: red; padding: 5px 12px; text-decoration: none; transition: background-color 2s; border: 1px solid orange; font-size: 18px; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } .demo a:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .demo a:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } Our Quizzes