Css has functions that can be used to set values.
The attr()function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
<div class="col-9">
<p id="mySite"><a href="https://lovemesomecoding.com">Visit lovemesomecoding</a></p>
</div>
<style>
#mySite > a:after {content: " (" attr(href) ")";}
</style>
The calc() CSS function allows you to perform calculations when specifying CSS property values. The calc() function takes a single expression as its parameter, with the expression’s result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rule.
<div class="col-9">
<p id="myMessage">Learning css functions</p>
</div>
<style>
#myMessage{
background-color: lightblue;
width: calc(100% - 120px);
text-align: center;
}
</style>
The var() CSS function can be used to insert the value of a custom property (sometimes called a “CSS variable”) instead of any part of a value of another property.
<div class="col-9">
<p id="myVar">Learning css functions</p>
</div>
<style>
:root {
--favoriteColor: coral;
}
#myVar{
background-color: var(--favoriteColor);
width: calc(100% - 120px);
text-align: center;
}
</style>
repeat-linear-gradient() function
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
<div class="col-9">
<p id="myLinearGradient">Learning css functions</p>
</div>
<style>
#myLinearGradient{
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
height: 300px;
text-align: center;
}
</style>
Having the right font has a huge impact on how users experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read are important. The font adds value to your text. It is also important to choose the correct color and text size for the font.
There are five generic font families:
We use the font-family property to specify the font of a text. The font-family property should hold several font names as a “fallback” font, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.
If the font name is more than one word, it must be in quotation marks, like: “Times New Roman”.
<div class="row">
<div class="col-3">
Font Family
</div>
<div class="col-9 fontFam">
I am learning css.
</div>
</div>
<style>
.fontFam {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
Font Style
The font-style property is mostly used to specify italic text.
<div class="row">
<div class="col-3">
Font Style
</div>
<div class="col-9 fontStyleNormal">
This is font style normal
</div>
<div class="col-3">
</div>
<div class="col-9 fontStyleItalic">
This is font style italic
</div>
</div>
<style>
.fontStyleNormal {
font-style: normal;
}
.fontStyleItalic {
font-style: italic;
}
</style>
The font-weight property specifies the weight of a font. Values can be normal, bold, lighter, bolder, <number> from 100-1000.
<div class="row">
<div class="col-3">
Font Weight
</div>
<div class="col-9 fontWeight">
This is font weight
</div>
</div>
<style>
.fontWeight{
font-weight: 900;
}
</style>
The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
Relative size:
Google Fonts
You can also use Google fonts if you want. They are free to use and many people use them.
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>