In this article, we will learn how to apply themes using the Tachyons toolkit. Tachyons is a CSS toolkit which is used to create a responsive website. Theming is the ability to style various elements of our website differently depending on the context, while still maintaining visual appeal.
Categories offered by themes are listed below:
- Skins: This is used to set the colour of the text and the colour of the background.
- Skins Animation: This is used to set the colour from the _colors.css file to style text and background colours for hover and focus states.
- Hovers: This is used to provide a hover effect you place a cursor over any element.
- Background-size: This is used to set the size of the background.
- Border: This is used to provide a border to an element.
- Border Radius: This is used to provide the rounded border style to the element.
- Box Shadow: This is used to provide the shadow effect to the element.
- Opacity: This is used to provide the opacity effect to an element.
Syntax:
<element-name class="class-name">...</element-name>
Example 1: In this example, we will use skin theming that is used to set the colour of the text and the colour of the background.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< style >
body {
text-align: center;
margin: 10px;
}
</ style >
</ head >
< body >
< h1 class = "green" >GeeksforGeeks</ h1 >
< h3 class = "bg-green" >
A computer science portal for geeks
</ h3 >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use border theming that is used to provide a border to an element.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< style >
body {
text-align: center;
margin: 50px;
}
</ style >
</ head >
< body >
< h1 class = "green" >GeeksforGeeks</ h1 >
< h3 class = "bg-green ba" >
A computer science portal for geeks
</ h3 >
</ body >
</ html >
|
Output:
Reference: http://tachyons.io/docs/#theming
Last Updated :
08 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...