Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Web Development Articles
Page 212 of 801
CSS grid-template-columns property
The grid-template-columns property is used to set the number of columns in the Grid.ExampleYou can try to run the following code to implement the grid-template-columns property − .container { display: grid; background-color: blue; grid-template-columns: auto auto; 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
Read MoreCreate a transition effect on hover pagination with CSS
To create a transition effect on hover pagination, use the transition property.ExampleYou can try to run the following code to add transition effect − .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; border-radius: 5px; transition: background-color 2s; } .demo a.active { background-color: orange; color: white; border-radius: 5px; } .demo a:hover:not(.active) { background-color: yellow; } Our Quizzes
Read MoreAdd rounded borders to first and last link in the pagination using CSS
To add rounded borders, use the border-radius property. For top/ bottom left, use the border-top-left-radius property and for bottom, use border-bottom-left-radius. In the same way, set for top/bottom right.ExampleYou can try to run the following code to add rounded borders to first and last link in the pagination − .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; ...
Read MoreUsage of CSS grid-column-gap property
Set gap between Grid columns with CSS. You can try to run the following code to implement the grid-column-gap property.Example .container { display: grid; background-color: green; grid-template-columns: auto auto; padding: 20px; grid-column-gap: 20px; } .ele { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
Read MoreAdd space between pagination links with CSS
You can try to run the following code to add space between pagination links with CSS:Example .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: none; transition: background-color 2s; border: 1px solid orange; } .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
Read MoreChange the size of the pagination with CSS
To change the pagination size, use the font-size property. You can try to run the following code to increase the size of pagination:Example .demo { display: inline-block; } .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
Read MoreCenter pagination on a web page with CSS
You can try to run the following code to center pagination on a web page:Example .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
Read MoreHow to specify the number of columns an element should be divided into with CSS
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 columnsExample .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 demo ...
Read MoreHow to fill columns with CSS
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:Example .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 demo ...
Read MoreShorthand property for setting all the column-rule-* properties
The shorthand property for column rule is column-rule property. You can try to run the following code to implement the column-rule propertyExample .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 is ...
Read More