Pagination is a very common thing to do when it comes to displaying data or displaying large amount of data. Pagination also gives you the flexibility to load data page by page which eases the load on your backend.
<div class="col-9" id="pag_1">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
</div>
<style>
#pag_1 > .pagination {
display: inline-block;
}
#pag_1 > .pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
@media can be used to apply part of a style sheet based on the result of one or more media queries . With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
@media not|only mediatype and (expressions) {
css-code;
}
You can use an external style sheet based on media query.
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="style.css">
Media Types
Media features
Max-width
<div class="row">
<div class="col-4">
<h4>Screen with Max width</h4>
<div>max-width: 600x</div>
</div>
<div class="col-8" id="maxWidth">
max width
</div>
</div>
<style>
@media screen and (max-width: 600px) {
#maxWidth {
background-color: lavender;
}
}
</style>
Min-width
<div class="row">
<div class="col-4">
<h4>Screen with Min width</h4>
<div>min-width: 601px</div>
</div>
<div class="col-8" id="minWidth">
min width
</div>
</div>
<style>
@media screen and (min-width: 601px) {
#minWidth {
background-color: yellow;
}
}
</style>
Min-width and max-width
<div class="row">
<div class="col-4">
<h4>Screen with Min to Max width</h4>
<div>min-width: 600px to min-width: 800px</div>
</div>
<div class="col-8" id="mintomaxWidth">
min to max width
</div>
</div>
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
#mintomaxWidth {
background-color: lightblue;
}
}
</style>
Min-width or max-width
<div class="row">
<div class="col-4">
<h4>Media query with or</h4>
</div>
<div class="col-8" id="mediaWithOr">
media query with or
</div>
</div>
<style>
/* use , for or */
@media screen and (max-width: 800px), screen and (min-width: 600px) {
#mediaWithOr {
background-color: greenyellow;
}
}
</style>
Orientation
<div class="row">
<div class="col-4">
<h4>Orientation Portrait</h4>
</div>
<div class="col-8" id="portrait">
portrait
</div>
</div>
<br>
<div class="row">
<div class="col-4">
<h4>Orientation Landscape</h4>
</div>
<div class="col-8" id="landscape">
landscape
</div>
</div>
<style>
@media screen and (orientation: landscape) {
#landscape {
background-color: purple;
}
}
@media screen and (orientation: portrait) {
#portrait {
background-color: lightblue;
}
}
</style>
<div class="row">
<div class="col-4">
<h4>Print</h4>
</div>
<div class="col-8" id="print">
print
</div>
</div>
<style>
@media print {
#print {
color: blue;
font-size: xx-large;
font-weight: bold;
}
}
</style>
CSS gradients let you display smooth transitions between two or more specified colors.
Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
<div class="row">
<div class="col-3">
Linear Gradient
</div>
<div class="col-9 linearGrad">
I am learning css.
</div>
</div>
<style>
.linearGrad{
background: linear-gradient(yellow, red);
height: 300px;
text-align: center;
}
</style>
A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.
Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.
<div class="row">
<div class="col-3">
Radial Gradient
</div>
<div class="col-9 radialGrad1">
Default
</div>
</div>
<style>
.radialGrad1{
background-image: radial-gradient(red, yellow, green);
height: 300px;
text-align: center;
}
</style>