The language that we use to style a Web page is CSS. CSS is an acronym for Cascading Style Sheet. CSS specifies how HTML elements should appear on a screen, in print and media, and it has the ability to control the layout of numerous web pages at the same time. CSS files contain external stylesheets. External css files are typically used to save style definitions. You can modify the look of a complete website by updating just one external stylesheet file!
These are some basic CSS functions:1. Inline CSS Styling
2. Internal CSS Styling
3. Color
4. Font Size
5. Font Family
6. Importing Google Font
7. Width
8. Border
9. Border-radius
10. Circular-Border-radius
11. Class selector
12. Id selector
13. Padding
14. Margin
15. Attribute selector
16. !important
17. CSS variables
18. :root selector
19. Text-align
20. Height
21. Strong
22. Underline
23. Em (italicized)
24. Strikethrough
25. Horizontal Line
26. RGBA color
27. Box-shadow
28. Opacity
29. Text-transform
30. Font-weight
31. Line-height
32. :Hover
33. Relative Position
34. Absolute Position
35. Fixed Position
36. Float
37. Z-Index
38. Center Item with Margin: Auto
39. HSL
40. Linear Gradient
41. Repeating Linear Gradient
42. Background
43. Transform with Scale
44. Transform with Skew
45. Transform with Rotate
46. ::before and ::after Selectors
47. Keyframes and Animation
48. Cubic Bezier curve
49. Visible to Screen Readers only
50. Media Query
51. Responsive Images
52. Retina on Higher Resolution Displays
53. Responsive Typography
54. Transform with Translate
55. Summary of Selectors
1. Inline CSS Styling
>>Return to Menu
<div>
<h1>My Document</h1>
<h2 style="color: blue">App</h2>
</div>
2. Internal CSS Styling
>>Return to Menu
<style>
h2 {
color: red;
}
</style>
<div>
<h1>My Document</h1>
<h2>App</h2>
</div>
3. Color
>>Return to Menu
<style>
.orange {
color: orange;
}
</style>
<h2 class="orange">my Text</h2>
4. Font Size
>>Return to Menu
<style>
h2 {
font-size: 72px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
</div>
5. Font Family
>>Return to Menu
<style>
p {
font-size: 32px;
font-family: Helvetica, monospace, sans-serif;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
6. Importing Google Font
>>Return to Menu
https://fonts.google.com/specimen/Lobster
Importing with Link:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
Importing with @import:
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style>
p {
font-size: 32px;
font-family: 'Lobster', cursive;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
7. Width
>>Return to Menu
<style>
.larger-img {
width: 500px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img class="larger-img" src="https://images.unsplash.com/photo-1640351960764-efb8d0850ae9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="My Photo." />
</div>
8. Border
>>Return to Menu
<style>
.wrapper {
border-width: 10px;
border-style: solid;
border-color: green;
/* border: 10px solid green; */
}
</style>
<div class="wrapper">
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img style="width: 500px" src="https://images.unsplash.com/photo-1640351960764-efb8d0850ae9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="My Photo." />
</div>
9. Border-radius
>>Return to Menu
<style>
.wrapper {
border-width: 10px;
border-style: solid;
border-color: green;
/* border: 10px solid green; */
border-radius: 20px;
}
</style>
<div class="wrapper">
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img style="width: 500px" src="https://images.unsplash.com/photo-1640351960764-efb8d0850ae9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="My Photo." />
</div>
10. Circular-Border-radius with Overflow
>>Return to Menu
<style>
.wrapper {
border-width: 10px;
border-style: solid;
border-color: green;
/* border: 10px solid green; */
border-radius: 50%;
overflow: hidden;
}
</style>
<div class="wrapper">
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img style="width: 500px" src="https://images.unsplash.com/photo-1640351960764-efb8d0850ae9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="My Photo." />
</div>
11. Class selector
>>Return to Menu
<style>
.silver-bg {
background-color: silver;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p class="silver-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
12. Id selector
>>Return to Menu
<style>
#app {
background-color: green;
}
</style>
<div>
<h1>My Document</h1>
<h2 id="app">my Text</h2>
<p class="silver-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
13. Padding
>>Return to Menu
<style>
.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
/* padding: 40px 20px 20px 40px; */
}
</style>
<p class="red-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
14. Margin
>>Return to Menu
<style>
.red-box {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
/* margin: 40px 20px 20px 40px; */
}
</style>
<p class="red-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
15. Attribute selector
>>Return to Menu
<style>
[type='radio'] {
margin: 30px 10px 20px 20px;
}
</style>
<form action="/submit-photo" id="photo-form">
<label for="indoor"><input type="radio" id="indoor" name="io" checked> Indoor</label>
<label for="outdoor"><input type="radio" id="outdoor" name="io"> Outdoor</label><br>
<button type="submit">Submit</button>
</form>
16. !important
>>Return to Menu
<style>
.force {
background-color: #000;
color: red !important;
padding: 20px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p class="force" style="color: blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
17. CSS variables
>>Return to Menu
<style>
body {
--h1-bgcolor: gray;
--h2-bgcolor: red;
--p-bgcolor: blue;
}
h1 {
background: var(--h1-bgcolor);
}
h2 {
background: black;
background: var(--h2-bgcolor);
}
p {
background: var(--p-bgcolor, black);
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
18. :root selector
>>Return to Menu
The :root pseudo-class selector matches the document's root element, which is normally the html element. Your variables will be widely available and can be accessed from any other selector in the style sheet if you create them in:root.
<style>
:root {
--h1-bgcolor: gray;
}
h1 {
background: var(--h1-bgcolor);
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
19. Text-align
>>Return to Menu
- text-align: justify; spaces the text so that each line has equal width.
- text-align: center; centers the text
- text-align: right; right-aligns the text
- text-align: left; (the default) left-aligns the text.
<style>
h2 {
text-align: center;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
20. Height
>>Return to Menu
<style>
h2 {
background-color: red;
height: 100px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
21. Strong
>>Return to Menu
Using the strong tag, the browser applies the CSS of font-weight: "bold" to the element.
<style>
p:nth-of-type(1) {
font-weight: bold;
}
p:first-of-type {
background: #ff0000;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><strong>ipsum dolor sit amet,</strong>consectetur adipiscing elit.</p>
</div>
22. Underline
>>Return to Menu
Using the u tag, the browser applies the CSS of text-decoration: "underline" to the element.
<style>
p:nth-of-type(1) {
text-decoration: underline;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
<p><u>ipsum dolor sit amet,</u>consectetur adipiscing elit.</p>
</div>
23. Em (italicized)
>>Return to Menu
Em displays text as an emphasis, as the browser applies the CSS of font-style: "italic" to the element.
<style>
p:nth-of-type(1) {
font-style: italic;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
<p><em>ipsum dolor sit amet,</em>consectetur adipiscing elit.</p>
</div>
24. Strikethrough
>>Return to Menu
Using the s tag, the browser applies the CSS of text-decoration: "line-through" to the element.
<style>
p:nth-of-type(1) {
text-decoration: line-through;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
<p><s>ipsum dolor sit amet,</s>consectetur adipiscing elit.</p>
</div>
25. Horizontal Line
>>Return to Menu
<style>
div {
background-color: bisque;
}
</style>
<div>
<h1>My Document</h1>
<hr />
<h2>my Text</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
26. RGBA color
>>Return to Menu
<style>
div {
background-color: rgba(45, 45, 45, 0.1);
}
p {
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
27. Box-shadow
>>Return to Menu
Box-shadow property sets one or more shadows to an element.
The syntax:
box-shadow: [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
<style>
div {
background-color: rgba(45, 45, 45, 0.1);
box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.19), 10px 20px 6px rgba(255, 0, 0, 0.23);
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
28. Opacity
>>Return to Menu
<style>
p {
color: black;
opacity: 0.5;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
29. Text-transform
>>Return to Menu
To change the appearance of text, use the text-transform property in CSS. It's a simple approach to ensure that text on a webpage looks consistent without having to update the text content of the HTML components themselves.
<style>
p {
text-transform: uppercase;
/* text-transform: lowercase; */
/* text-transform: capitalize; */
/* text-transform: initial; */
/* text-transform: inherit; */
/* text-transform: none; */
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
30. Font-weight
>>Return to Menu
<style>
p {
font-size: 42px;
font-weight: 800;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
31. Line-height
>>Return to Menu
The line-height property in CSS allows you to modify the height of each line in a block of text. It alters the amount of vertical space given to each line of text, as the name implies.
<style>
p {
font-size: 16px;
line-height: 50px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd. Lorem ipsum dolor sit amet, consectetur adipiscing elit sd. Lorem ipsum dolor sit amet, consectetur adipiscing elit sd. Lorem ipsum dolor sit amet, consectetur adipiscing elit sd. Lorem ipsum dolor sit amet, consectetur adipiscing elit sd. Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
32. :Hover
>>Return to Menu
A pseudo-class is a keyword that can be used on selectors to specify a specific element state. :Hover is a pseudo-class.
<style>
p {
color: blue;
}
p:hover {
color: red;
cursor: pointer;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
33. Relative Position
>>Return to Menu
<style>
h2 {
position: relative;
top: 100px;
left: 20px;
}
</style>
<div>
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
34. Absolute Position
>>Return to Menu
<style>
.container {
position: relative;
}
h2 {
position: absolute;
left: 50px;
top: 100px;
}
</style>
35. Fixed Position
>>Return to Menu
<style>
body {
margin-top: 50px;
height: 150vh;
}
nav {
background-color: rgba(45, 45, 45, 1);
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
padding: 0px 20px;
}
li {
/* list-style-type: none; */
display: inline;
margin-right: 20px;
}
a {
text-decoration: none;
color: #fff;
}
</style>
<div class="container">
<h1>My Document</h1>
<h2>my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
36. Float
>>Return to Menu
<style>
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 50%;
}
</style>
<div class="container">
<h1>My Document</h1>
<div id="left">
<h2>Left side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="right">
<h2>Right side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
37. Z-Index
>>Return to Menu
<style>
div.top,
div.bottom {
width: 200px;
height: 200px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.top {
position: absolute;
left: 100px;
top: 200px;
background-color: red;
z-index: 2;
}
.bottom {
position: absolute;
background-color: blue;
z-index: 1;
}
</style>
<div class="container">
<h1>My Document</h1>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
38. Center Item with Margin: Auto
>>Return to Menu
<style>
div.top,
div.bottom {
width: 200px;
height: 200px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.top {
background-color: red;
margin: auto;
}
.bottom {
background-color: blue;
margin: auto;
}
</style>
<div class="container">
<h1>My Document</h1>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
39. HSL
>>Return to Menu
The Syntax:
hsl(Angle of the color[0-360],Saturation[0-100%],Lightness[0-100%])
For Example:
red hsl(0, 100%, 50%)
yellow hsl(60, 100%, 50%)
green hsl(120, 100%, 50%)
cyan hsl(180, 100%, 50%)
blue hsl(240, 100%, 50%)
magenta hsl(300, 100%, 50%)
<style>
body {
background-color: #ffffff;
}
.green {
background-color: hsl(120, 100%, 50%);
}
.cyan {
background-color: hsl(180, 100%, 50%);
}
.magenta {
background-color: hsl(300, 100%, 50%);
}
div {
display: inline-block;
height: 100px;
width: 100px;
}
</style>
<div class="green"></div>
<div class="cyan"></div>
<div class="magenta"></div>
40. Linear Gradient
>>Return to Menu
The Syntax:
background: linear-gradient(gradient_direction(in deg), color 1, color 2, color 3, ...);
background: linear-gradient(90deg, red, yellow, rgb(204, 255, 255));
Where:
180deg = a vertical gradient (from top to bottom)
90deg = a horizontal gradient (from left to right)
45deg = a diagonal gradient (from bottom left to top right)
<style>
div {
border-radius: 20px;
width: 400px;
height: 400px;
margin: 50px auto;
background: linear-gradient(180deg, red, yellow, rgb(0, 255, 0));
}
</style>
<div></div>
41. Repeating Linear Gradient
>>Return to Menu
The Syntax:
background: repeating-linear-gradient(gradient_direction(in deg), color 1[start], color 1[end]/color 2[start], color 2[end]/color 3[start], ...);
background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);
Where:
180deg = a vertical gradient (from top to bottom)
90deg = a horizontal gradient (from left to right)
45deg = a diagonal gradient (from bottom left to top right)
<style>
div {
border-radius: 20px;
width: 400px;
height: 400px;
margin: 50px auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px,
#ff0080 80px,
#ff0080 120px
);
}
</style>
<div></div>
42. Background
>>Return to Menu
<style>
div {
border-radius: 20px;
width: 400px;
height: 400px;
margin: 50px auto;
background: url("https://images.unsplash.com/photo-1490730141103-6cac27aaab94?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div></div>
43. Transform with Scale
>>Return to Menu
The transform property of CSS, as well as the scale() function, can be used to adjust the scale of an element. It produces a multiplier effect on the size of an element.
Using scaleX:
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: scaleX(3);
}
</style>
Using scaleY:
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: scaleY(3);
}
</style>
Using normal scale:
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: scale(3);
}
</style>
44. Transform with Skew
>>Return to Menu
The transform property of CSS, as well as the skew() function, can be used to adjust the inclination of an element. It produces an Italicized effect on the shape of an element.
Using skewX (To the left):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: skewX(25deg);
}
</style>
Using skewX (To the right):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: skewX(-25deg);
}
</style>
Using skewY (To the Top):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: skewY(-25deg);
}
</style>
Using skewY (To the Bottom):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 100px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: skewY(25deg);
}
</style>
45. Transform with Rotate
>>Return to Menu
The transform property of CSS, as well as the rotate() function, can be used to adjust the rotation of an element.
Using rotate (clockwise):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 200px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: rotate(25deg);
}
</style>
Using rotate (Anti-clockwise):
<style>
.wrapper > div {
background: blue;
border-radius: 2px;
width: 100px;
height: 200px;
margin: 100px;
display: inline-block;
}
.wrapper > div:nth-of-type(2) {
background: red;
transform: rotate(-25deg);
}
</style>
46. ::before and ::after Selectors
>>Return to Menu
<style>
.header-one::before {
content: "This is ";
background-color: coral;
}
.header-two::after {
content: " is black in color.";
background-color: cornflowerblue;
}
</style>
<div>
<h1 class="header-one">My Document</h1>
<h2 class="header-two">my Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sd.</p>
</div>
47. Keyframes and Animation
>>Return to Menu
The Syntax:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: move 5s linear 2s infinite alternate;
}
@keyframes move {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
<div></div>
Animation-name
It specifies the name of the keyframe you want to bind to the selector.
div {
animation-name: move;
}
Animation-duration
It specifies how many seconds or milliseconds an animation takes to complete.
div {
animation-duration: 5s;
}
Animation-timing-function
It specifies the speed curve of the animation.
div {
animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
}
Animation-delay
It specifies a delay before the animation starts.
div {
animation-delay: 2s;
}
Animation-iteration-count
It specifies how many times an animation should be played.
div {
animation-iteration-count: 2;
animation-iteration-count: infinite;
}
Animation-direction
It specifies whether or not the animation should play in reverse.
div {
animation-direction: normal; /* played forwards */
animation-direction: reverse; /* played in reverse */
animation-direction: alternate; /* played forwards first, then backwards */
animation-direction: alternate-reverse; /* played backwards first, then forwards */
}
Animation-fill-mode
It specifies what values are applied by the animation outside the time it is executing.
div {
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
}
Animation-play-state
It specifies whether the animation is running or paused.
div {
animation-play-state: running;
animation-play-state: paused;
}
48. Cubic Bezier curve
>>Return to Menu
The Syntax:
animation-timing-function: cubic-bezier(x1, y1, x2, y2);
animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1.6);
<style>
#green {
background: green;
position: fixed;
top: 60%;
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1.6);
}
@keyframes jump {
50% {
top: 10%;
}
}
</style>
<div id="green"></div>
49. Visible to Screen Readers only
>>Return to Menu
You can visually hide content meant only for screen readers. This occurs when data is presented in a visual format (such as a chart), but screen reader users require a different presentation (such as a table) to access the data.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
50. Media Query
>>Return to Menu
An example of a media query that returns the content when the device's width is less than or equal to 100px:
@media (max-width: 100px) { /* CSS Rules */ }
An example of a media query returns the content when the device's height is more than or equal to 350px:
@media (min-height: 350px) { /* CSS Rules */ }
51. Responsive Images
>>Return to Menu
You just need to add these properties to an image:
img {
max-width: 100%;
height: auto;
}
52. Retina on Higher Resolution Displays
>>Return to Menu
Use half of the original height and width:
<style>
img { height: 250px; width: 250px; }
</style>
<img src="Pic500x500" alt="A picture">
53. Responsive Typography
>>Return to Menu
The four different viewport units are:
- vw (viewport width): 10vw would be 10% of the viewport's width.
- vh (viewport height): 3vh would be 3% of the viewport's height.
- vmin (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width).
- vmax (viewport maximum): 100vmax would be 100% of the viewport's bigger dimension (height or width).
body { width: 30vw; } h2 { width: 80vw; } p { width: 75vmin; }
54. Transform with Translate
>>Return to Menu
transform: translate(-10%, -20%);
55. Summary of Selectors
>>Return to Menu
ID Selector -
#id
Descendant Selector -
plate > apple
Class Selector -
.small
Combine the Class Selector -
orange.small
Comma Combinator -
plate, bento
The Universal Selector -
*
Select all elements inside of P elements -
plate > *
Adjacent Sibling Selector(Next to) -
p + .intro
General Sibling Selector(Select all after) -
bento ~ pickle
First Child Pseudo-selector -
plate > orange:first-child()
Only Child Pseudo-selector -
plate > :only-child()
Last Child Pseudo-selector -
ul > li:last-child()
Nth Child Pseudo-selector -
div > p:nth-child(2)
Nth Last Child Selector -
ul > li:nth-last-child(2)
First of Type Selector -
apple:first-of-type()
Nth of Type Selector -
div:nth-of-type(2)
.example:nth-of-type(odd)
plate:nth-of-type(even)
Nth-of-type Selector with Formula -
span:nth-of-type(6n+2)
Only of Type Selector -
apple:only-of-type()
Last of Type Selector -
p > span:last-of-type
Empty Selector -
div:empty
Negation Pseudo-class -
:not(#fancy)
div:not(:first-child)
apple:not(.big, .medium)
Attribute Selector -
a[href]
input[disabled]
plate[for]
Attribute Value Selector -
input[type="checkbox"]
Attribute Starts With Selector -
.toy[category^="Swim"]
[for ^= 'Sa']
Attribute Ends With Selector -
img[src$=".jpg"]
[for $= 'ato']
Attribute Wildcard Selector -
img[src*="/thumbnails/"]
[class*="heading"]
[for *= 'obb']
Conclusion
Hope I was able to sufficiently cover the basic CSS styles and features. If I left anyone out, please do let me know. Thanks!
#End
Hope you enjoyed this! :) Follow me for more contents...
Get in Touch:
ifeanyiomeata.com
contact@ifeanyiomeata.com
Youtube: youtube.com/c/IfeanyiOmeata
Linkedin: linkedin.com/in/omeatai
Twitter: twitter.com/iomeata
Github: github.com/omeatai
Stackoverflow: stackoverflow.com/users/2689166/omeatai
Hashnode: hashnode.com/@omeatai
Medium: medium.com/@omeatai
© 2022