INTRODUCTIONS OF CSS PART 2

CSS Tutorial: Visibility & z-index Explained | Web
Development Tutorials #27
In this tutorial, we will discuss the visibility and z-index property of
CSS.
CSS Visibility Property:
First of all, let's create four boxes of different colours. Here is the CSS
used :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visibility and Z-Index Property In CSS</title>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box1 {
background-color: greenyellow;
}
#box2 {
background-color: rebeccapurple;
}
#box3 {
background-color: blue;
}
#box4 {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box" id="box1"></div>
</body>
</html>

Output :
Now, let's start our discussion on visibility property :
Visibility property is used to hide or show an HTML element
without changing the layout of the page.
The hidden element uses the space on the page because it is still
there, but it is not visible to the user.
Now, we will change the visibility from visible to hidden of box2 for
a better understanding of visibility property. Here is the CSS used
<style>
.box {
width: 170px;
height: 170px;
}
#box1 {
}
#box2 {
visibility: hidden;
}
#box3 {
}
#box4 {
background-color: lightcoral;
}

You can see in the image given below that the box2 is not visible
anymore, but it is still occupying the space on the page.
Difference Between display:none; and visibility:hidden;
There is a minor difference between the display: none; and
visibility:hidden; property of CSS. Let's understand this difference
with the help of the boxes that we created earlier.
Use the following CSS for box2 :
#box2 {
display: none;
}
In the above code, we have changed the display value of box2.
Here are the results :

In the above image, you can clearly see that box2 is completely
removed from the webpage, and there is no empty space left on
the page. But, when we used the visibility: hidden property, the
box2 element was still occupying the space.
display:none; - It completely removes an HTML tag from the web
page like it was never there.
visibility:hidden; - It makes the tag invisible but will not remove the
element, and it will still occupy the space on the page.
Z-Index Property In CSS :
At the starting of this tutorial, we created four boxes of different
colours. Now, try to answer this question: What if one box overlaps
the other? Which box will be visible to the user? This is where z-
index property comes into the picture. So, whenever HTML
elements collapse with each other, then the element with smaller
z-index value will be covered by the element with larger z-index
value.
Note: Z-index does not work on static position value. It only works
on the elements with position: relative, absolute, fixed, or
sticky. We are changing the positions of box1 and box2 by applying
the CSS given below:
#box1 {
top: 69px;
position: relative;
}
#box2 {
top: 34px;
position: relative;
}

Output:
You can see in the above image that the box2 overlaps the box1.
Now, we will give z-index value to box1 and box2. Here is the CSS
used :
#box1 {
top: 69px;
position: relative;
z-index: 1;
}
#box2 {
top: 34px;
position: relative;
z-index: 0;
}
In the above code, we have set the z-index value of box1 and box 2,
respectively. Here are the results :

You can see that the box1 is overlapping the box2 because the z-
index value of box1 is greater than the z-index value of box2. So,
that's how you can easily change the visibility and z-index value of
an HTML element.
This tutorial ends here and I will see in you in the next tutorial.
Code as described/written in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Visibility and z-index</title>
<style>
.box{
width: 170px;
height: 170px;
}
#box-1{
position: relative;
top: 49px;
z-index: -35;
background-color: green; }
#box-2{
position: relative;
top: 14px;
/* z-index will work only for position: relative, absolute, fixed or sticky; */
z-index: -165;
/* will hide the element and the space */
/* display: none; */
/* will hide the element but will show its empty space */
/* visibility:hidden; */
background-color: red;
}
#box-3{
background-color: blue; }
#box-4{ background-color: yellow; }
</style>
</head>
<body>
<div class="box" id="box-1"></div>
</body>
</html>

CSS Flexbox Tutorial in Hindi | Web Development Tutorials
#28
In this tutorial we are going to learn about
the flexbox property of CSS. The Flexbox Module was
designed as a one-dimensional layout model, and as a
method that could offer space distribution between items in
an interface with powerful alignment capabilities. For better
understanding watch the complete video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Flexbox Tutorial</title>
<style>
.container{
height: 544px;
width: 100%;
display: flex; /* Initialize the container as a flex box */
/* Flex properties for a flex container */
/* flex-direction: row; (Default value of flex-direction
is row) */
/* flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse; */

/* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */
/* flex-wrap: wrap-reverse; */
/* This is a shorthand for flex-direction: and flex-wrap: ;; */
/* flex-flow: row-reverse wrap; */
/* justify-content will justify the content in horizontal
direction */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
/* justify-content: space-around; */
/* justify-content will justify the content in vertical direction
*/
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: flex-start; */
/* align-items: stretch; */
}
.item{
width: 200px;
height: 200px;
background-color: tomato;
border: 2px solid green;
margin: 10px;
padding: 3px;
}
#item-1{
/* Flex properties for a flex item */
/* Higher the order, later it shows up in the container */
/* order: 2; */
/* flex-grow: 2;
flex-shrink: 2; */

}
#item-2{
/* flex-grow: 3;
flex-shrink: 3 ; */
flex-basis: 160px;
/* when flex-direction is set to row flex-basis: will control
width */
/* when flex-direction is set to column flex-basis: will
control height */
}
#item-3{
/* flex: 2 2 230px; */
align-self: flex-start;
align-self: flex-end;
align-self: center;
}
</style>
</head>
<body>
<h1>This is Flexbox Tutorial</h1>
<div class="container">
<div class="item" id="item-1">First Box</div>
<div class="item" id="item-2">Second Box</div>
<div class="item" id="item-3">Third Box</div>

</div>
</body>
</html>

CSS Tutorial: em, rem, vh and vw units + Responsive design
Explained | Web Development Tutorials #29
In this tutorial, we will discuss the responsive design and CSS units.
What Is Responsive Design?
Have you ever noticed that websites nowadays adjust themselves
according to the resolution of your device(Smartphone, tablet, or
desktop computer)? Isn't it amazing that a website is automatically
changing its height and width according to the size of the user's
screen? This is possible because of the responsive design. Let's dive
deep into responsive design.
 Responsive design is a way for a web developer to make a
website adapt to all the devices and resolutions.
 Endless new resolutions and devices are challenging to support
separately for a web developer; therefore, responsive design is
the best approach to develop a website that can adjust itself
according to the screen size.
 Responsive design is a necessity and not a luxury anymore!
Various Ways To Achieve Responsive Design :
1. By using rem/vh/vw units over pixels.
2. By using max-width/max-height.
3. Using CSS Media Queries.
4. Setting up the viewport.
This tutorial will cover the use of CSS size units to make a responsive
website. We will see other ways of responsive design in further
tutorials. So, let's start our discussion on CSS size units. First of all,
we are using the below CSS to create three headings:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Size Units</title>
<style>
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
</style>
</head>
<body>
<h1 id="first">This is first heading</h1>
<h1 id="second">This is second heading </h1>
<h1 id="third">This is third heading</h1>
</div>
</body>
</html>

Output:
Here, we have just created three headings and aligned them to the
center. Now, we will use these heading to understand the concept of
em, rem,vh, and vw.
em-
• Font-sizes are inherited relative to the parent element.
• 10em means ten times of the parent element.
Use the CSS given below :
<style>
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
#first{
font-size: 10em;
}
</style>

Output:
In the above image, you can see that the font-size of the first
heading is changed. Earlier the font-size was 10px because <h1>
inherited this size from its parent element, i.e., container. Now,
the font-size of <h1> has changed to 100px because 10 em
means ten times of the parent element so 10*10=100px.
rem-
• Font-size gets set according to the font-size of the root
element.
• In general, <html> is the root element.
• In rem, "r" stands for "root."
Use the CSS given below:
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
#first{
font-size: 10em;
}
#second{
font-size: 10rem;
}
</style>

JIn the above code, we have given the font-size of 7px to
the <html>. Then, we have applied the font-size of 10rem to the
second heading. Here is the output :
In the above image, you can see that the font size of the second
heading has changed from 7px to 70px because 10rem is equal to
10 times the root element. You can verify the font-size with the
help inspect element functionality of the chrome browser.
vh-
• It stands for viewport height.
• vh is equal to the 1/100 times of the viewport height.
• Example: Suppose height of the browser is 1000px, so 1vh is
equaled to (1/100)*1000= 10px.
Use the CSS given below :
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 40px;
}

.container{
border: 2px solid red;
height: 100vh;
width: 400px;
}
/* #first{
font-size: 10em;
}
#second{
font-size: 10rem;
} */
</style>
In the above code, we have made a border and assigned a height of
100vh to it. Here are the results :

In the above image, you can see that the border's height is
changed to 100% of the viewport.
vw-
• It stands for viewport width.
• Similar to vh, vw is equal to the 1/100 times of the viewport
width.
• Example: Suppose width of the browser is 1000px, so 1vw is
equaled to (1/100)*1000= 10px.
Use the CSS given below:
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 40px;
}
.container{
height: 100vh;
width: 100vw;
}
/* #first{
font-size: 10em;
}
#second{
font-size: 10rem;
} */
</style>

In the above code, we have assigned a width of 100vw to the
border. Here are the results:
In the above image, you can see that the border's width is
changed to 100% of the viewport. This tutorial ends here, and I
believe that all the concepts discussed in this tutorial are crystal
clear to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Size units</title>
<style>

html{
font-size: 25px;
}
.container{
width:400px;
/* height: 344px; */
height: 100vh;
width: 100vw;
font-size: 10px;
border :2px solid red;
}
h1{
text-align: center;
}
#first{
/* font-size: 3em;
padding: 3em; */
}
#second{
/* font-size: 3rem;
padding: 3rem; */
}
</style>
</head>
<body>
<h1 id="first">This is first heading</h1>
<h1 id="second">This is second heading</h1>
<h1 id="third">This is third heading</h1>
</div>
</body>
</html>

CSS Tutorial: Media Queries Explained | Web
In this tutorial, we will discuss media queries in CSS.
What Is Media Query?
• Media queries are used when we want to customize our website's
presentation according to the user's screen size. With the help of
media queries, you can display different markups based upon the
device's general type(mobile, desktop, tablet).
• A media query is a logical operation. Whenever a media query
becomes true, then the related CSS is applied to the target
element.
Syntax Of Media Query :
A media query is composed of two things: media type and
expression. A media query can contain one or more expressions.
Syntax :
@media media-type and (media-feature)
{
/* CSS Rules to be applies*/
}
Example:
@media screen and (max-width: 800px)
{
#contents{width:90%}
}
Let's understand this example :
• @media: A media query always starts with @media.
• Screen: It is the applicable media type.
• max-width: It is the media feature.
• #contents{width:90%} : It is the CSS to be applied when the
conditions are met.
Now, we will spend some time understanding how to use media
queries on a website.
First of all, we have used the below CSS to design four divs.

<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>CSS Media Query</title>
<style>
.box {
text-align: center;
background-color: rgba(255, 196, 0, 0.959);
color: white;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box" id="box1"> Windows</div>
<div class="box" id="box2"> MacOS</div>
<div class="box" id="box3"> Kali Linux</div>
<div class="box" id="box4">Android</div>
</body>
</html>
Here is the output :

Now, we are changing the display value to display:none; and then
we will apply the media queries. Here is the CSS :
<style>
.box {
text-align: center;
background-color: rgba(255, 196, 0, 0.959);
color: white;
font-size: 50px;
display: none;
}
</style>
Now, it's time to apply our very first media query. Here is the CSS
used :
@media (min-width: 400px){
#box1{
display: block;
}
}
In the above code, we have applied the media query to id=box1. So,
whenever the page's width is 400px or more than 400px, then the
display value of the box1 will be changed
from display:none; to display:block; and applied CSS will be visible
to the user.
Output:

In the above image, I have used the chrome developer tools to
change the page's width. You can see that the media query is applied
when the page's width is set to 400px. So whenever the page width
is 400px or more than 400px, then the media query for the box1 will
be applied because we have set the minimum width to 400px.
Similarly, we have applied a media query for the box2. Here is the
CSS used:
/* @media (min-width: 400px){
#box1{
display: block;
}
} */
@media (min-width: 450px) and (max-width: 600px){
#box2{
display: block;
background-color: teal;
}
}
In the above code, we have set minimum width to 450px and
maximum width to 600px. So the media query for the box2 will be
applied whenever the screen's width is between 450px and 600px.
Output :

So, that's how you can easily include different media queries
depending upon your requirements. Note that we have
used and operator to combine two queries to be true. You can also
use other operators such as not, only, and comma(,). So, this is all
for this tutorial, and I hope you have got the basic knowledge of
media queries in CSS. Feel free to ask your queries in the QnA
section.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Media Queries</title>
<style>
.box{
font-size: 72px;
text-align: center;
color: white;
display: none;
}
@media only screen and (max-width:300px){
#box-1{
display: block;
background-color: cyan;
}
}
@media only screen and (min-width: 300px) and (max-width:500px) {
#box-2{
display: block;
background-color: blueviolet;
}
}

@media (min-width: 500px) and (max-width:800px) {
#box-3{
display: block;
color: black;
background-color: yellow;
}
}
@media (min-width: 800px) {
#box-4{
display: block;
background-color: green;
}
}
</style>
</head>
<body>
<div class="box" id="box-1">Mai ek iPhone hoon</div>
<div class="box" id="box-2">Mai ek Tablet hoon</div>
<div class="box" id="box-3">Mai ek desktop computer
hoon</div>
<div class="box" id="box-4">Mai ek widescreen computer
hoon</div>
</body>
</html>

CSS Tutorial: More on CSS Selectors | Web Development
Tutorials #31
In one of our previous videos, we have already covered the basics of
CSS selectors. In this tutorial, we will discuss some advanced
concepts about CSS selectors.
First of all, we have used the CSS given below to design some divs
and paragraph tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced CSS Selectors</title>
<style>
h1 {
color: black;
font-weight: bold;
text-align: center;
}
div p {
color: rgb(0, 0, 128);
background-color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1> This is more on selectors</h1>
<div class="row">
<p> This is a paragraph</p>
</div>
<p> This is another paragraph</p>
</div>
<p> This is the third paragraph</p>
</body>
</html>

Output :
Now, let's suppose you want to add styling to all the paragraphs
inside the div. What will you do? You can use the following CSS :
div p{
color: rgb(0, 0, 128);
background-color:orange;
font-weight: bold;
}

paragraphs, but it is not applied to the third paragraph. Why? Let me
answer this simple question for you. The CSS is not applied to the third
paragraph because we have applied CSS only on the <p> tags inside div,
and the third paragraph is not inside a div element.
This was very simple. Now let's move on to the next situation. What will
you do if you want to target the <p> tags, which are the direct child of
the div? So, whenever we want to target a direct child element, we use
the following syntax :
element> element; Copy
Example :
div>pCopy
In the above example, the styling will be applied to all <p> elements
which are the direct child of any div element. Let's understand this with
the help of paragraph tags that we created at the starting of this
tutorial. Here is the CSS used :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: black;
font-weight: bold;
text-align: center;
}
div p {
color: rgb(0, 0, 128);
font-weight: bold;
}
div>p{
background-color: lightblue;
color:white;
}
</style>
</head>

<body>
<div class="row">
<ul>
<li class="item">
<p>This is a paragraph inside li and this is not a direct
child of div. It will not get affected.</p>
</li>
</ul>
<p> This is the second paragraph and it will get affected
because it is the direct child of div.</p>
</div>
<p> This is the third pargraph and it will get affected because
it is also a direct child</p>
</div>
<p> This is the outer most paragraph and it will not get
affected. </p>
</body>
</html>

In the above image, you can see that the CSS is applied to the second
and third paragraphs because they are the direct child of div.
Paragraph inside <li> is the direct child of <li> and not of <div>. Also,
in the case of the outermost paragraph, the parent element is the
body and not div; therefore, no styling is applied to it. Now, we will
talk about one more type of CSS selectors, i.e., div+p.
div+p :
There might be situations where you want to select the <p> tags that
are immediately after the <div> elements. In such cases, we use the
div+p selectors. Let's understand this with the help of example given
below:
Html and CSS used:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: black;
font-weight: bold;
text-align: center;
}
/* div p {
color: rgb(0, 0, 128);
font-weight: bold;
} */
/* div>p{
background-color: lightblue;
color:white;
} */
div+p{
color: white;
background-color:#D2302C;
}
</style>

</head>
<body>
<div class="row">
<ul>
<li class="item">
<p>This is a paragraph and it is not immediately after
the div element so no CSS will be applied to it.</p>
</li>
</ul>
<p> This is the second paragraph and it is not immediately
after the div element so no CSS will be applied to it.</p>
</div>
<p> This is the third pargraph and it will get affected because it
is immediately afetr the div tag.</p>
</div>
<p> This is the outer most paragraph and it will also get affected
because it is immediately after the div tag. </p>
</body>
</html>
Output :

In the above image, you can see that the CSS is applied only to the
third and outermost paragraphs because they are next to the <div>
element.
This is all for this tutorial, and in the next tutorial, we will discuss the
nth-child pseudo selectors. See you in the next tutorial!
<!DOCTYPE html>
<html lang="en">
<head>
<title>More on selectors</title>
</head>
<style>
h1{
color: black;
font-weight: bold;
text-align: center;
}
/* if p is contained by any li which is contained by div */
/* div li p{
color: yellow;
font-weight: bold;
} */
/* if p is right inside div then this CSS will be applied */
/* div > p{
color: yellow;
font-weight: bold;
} */
/* if p is right after div i.e p is the next sibling of div*/
/* div + p{
color: white;
background-color: rgb(238, 137, 137);
} */

</style>
<body>
<h1>This is more on selectors</h1>
<div class="row">
<ul>
<li class="item"><p> this is another paragraph inside
li</p></li>
<li>this will not get affected</li>
<p>this is a para inside ul</p>
</ul>
<p>This is a paragraph</p>
</div>
<p>This is another paragraph</p>
</div>
<p>this is outermost paragraph</p>
</body>
</html>
CSS Tutorial: Attribute & nth child pseudo Selectors | Web
In the last tutorial, we have discussed different pseudo-selectors in
CSS. Here, we are going to learn some more advanced pseudo-
selectors that will benefit a lot in web development. We will start
by making a new file as tut32.html and will add the basic template.
Give the title as an attribute and nth-child pseudo-selectors in the
<title> tag.
We will create a very basic form by writing the HTML code as
below-
<body>
<h1><a href="http://google.com" target="_blank">Go to
google</a></h1>

<h1><a href="http://facebook.com" target="_self">Go to
Facebook</a></h1>
<form action="" class="form-control">
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
<ul>
<li class="item" id="item-1">Item1</li>
</ul>
</div>
</body>
The form will look very simple as follows :

We will now begin our styling part. Initial, we wiil set the display of
the input as block-
input {
display: block;
}
We will then try to move the container to the center of the
webpage by the following code.
.container {
display: block;
width: 233px;
margin: auto;
}
To select the input of type text only, we will write the following
code-
input[type='text'] {
padding: 23px;
}
By the above code, the changes will be made only in the input form
having type text.

With the help of pseudo selectors, we can target different properties
by their attributes. In the same way, if we want to target our email
tab, then we can write the code as follows and can apply some
property to it-
input[type='email'] {
color: yellow;
}
We will notice the black border with several other properties applied
to it. In the same way, we can target more properties or tags.
Now let us see how to use nth child pseudo selectors. Suppose, if we
write-
li:nth-child(3){
color: cyan;
}
The above code will convert the text color to the cyan of the third
only. What if we want to change the text color to red of every third
element of the list. In that case, we can write-
li:nth-child(3n+3) {
color: red;
}
This will convert the text color to red of every third element in the
fist.
It works on the basic formula where it will convert all the items
depending on the values of n starting from 0. In the same way, we
can select all the even items on the list and can apply some CSS to it.
li:nth-child(even) {
}
You can try more yourself by practicing with different codes and
analyze the changes accordingly. To keep learning more, stay with the
tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Attribute and nth child pseudo selectors</title>
<style>
.container {
display: block;
width: 233px;
margin: auto;
}
input {
display: block;
}
input[type='text'] {
padding: 23px;
}
a[target] {
font-size: 44px;
color: violet;
}
a[target='_self'] {
font-size: 14px;
color: rgb(13, 22, 151);
}
input[type='email'] {
color: yellow;
}
/* This will apply css for third child */
/* li:nth-child(3){
color: cyan;
}
li:nth-child(2n+0){
color: red;
} */

li:nth-child(3n+3) {
color: red;
}
/* Odd child */
/* li:nth-child(odd){
} */
/* Even child */
li:nth-child(even) {
}
</style>
</head>
<body>
<h1><a href="http://google.com" target="_blank">Go to
google</a></h1>
<h1><a href="http://facebook.com" target="_self">Go to
Facebook</a></h1>
<form action="" class="form-control">
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your
password">
<input type="submit" value="Submit">
</form>
<ul>

</ul>
</div>
</body>
</html>
CSS Tutorial: Before and After Pseudo Selectors |
Web Development Tutorials #33
In the last tutorial, we have learned how to use different
pseudo-selectors in our CSS. Here, we will see a special type
of selectors which are known as before and after pseudo
selectors. Start by making a new file called tut33.html and
the instant boilerplate. Then you can the title as before and
after pseudo-selectors under the <title> tag.
Start by writing the basic HTML code as-
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>

<h1> Welcome to Coding World</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Provident error ratione doloribus sed dolorum,
ipsum cumque reprehenderit dignissimos architecto
veniam optio sint aliquam consectetur corrupti vero
similique velit. Possimus eum consequatur delectus quia
magni.</p>
</section>
</body>
By running the above code, we will get a very simple outlet of a
website as shown below-
We will then add some styling in the body tag of the website-
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
}
To make the contents appear in a single line, we can try by setting
the display property as flex.
.navigation {
font-family: 'Bree Serif', serif;
font-size: 20px;
display: flex;
}

We can then style our list items and add some padding to it-
li {
list-style: none;
padding: 20px 23px;
}
Now let us discuss what are before and after pseudo selectors. The ::
before pseudo-element can be used to insert some content before
the content of an element. The ::after pseudo-element can be used
to insert some content after the content of an element.
We can style the section tag in our HTML with the help
of flexbox property and also make some other changes as follows-
section {
height: 344px;
margin: 3px 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Then increase the font size of the heading by 4 rems and take the
content of the paragraph in the center as follows-
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
So our page will look as follows-

We can also select the fonts of our choice from Google Fonts. Now
place the background image on the website. You can select different
background images from Unsplash. You will be able to generate
random background images from here. You can place the URL of the
image in the <body> tag while styling. But we will notice that the
image generated on our website does cover the whole page and
make it difficult in reading the text.
To adjust this problem, we can add content before the header. In
that content, we can add a background image, makes its position
as absolute, and set its width and height as follows-
header::before{
background:
url('https://source.unsplash.com/collection/190727/1600x900')
no-repeat center center/cover;
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
z-index property used here is for making the contents appear above
the background image. We can make the image light by changing
its opacity. So our final website will look as follows-

In this tutorial, we have learned how with the help of before and
after pseudo selectors, we can change the opacity of the
background image. For learning more about different techniques,
stay tunes with the tutorials.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Before and after pseudo selector</title>
<link
href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
color: white;
}
header::before{
background:
url('https://source.unsplash.com/collection/190727/1600x900') no-repeat
center center/cover;
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;

.navigation {
font-size: 20px;
display: flex;
}
li {
list-style: none;
padding: 20px 23px;
}
section {
height: 344px;
margin: 3px 230px;
display: flex;
flex-direction: column;
}
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
/* section::after{
content:"this is a content"
} */
</style>

</head>
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h1> Welcome to Coding World</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Provident error ratione doloribus sed dolorum,
ipsum cumque reprehenderit dignissimos architecto
veniam optio sint aliquam consectetur corrupti vero
similique velit. Possimus eum consequatur delectus quia
magni.</p>
</section>
</body>
</html>

CSS Tutorial: Box Shadow and Text Shadow | Web
So far in these tutorials, we have discussed many projects and
designing of the website through HTML and CSS. Now, we are going
to learn about Box Shadow and Text Shadow. As usual, make a new
file as tut34.html and then add the basic boilerplate. Give the title
as Box Shadow and Text Shadow in the <title> tag.
The box-shadow CSS property adds shadow effects around an
element’s frame. We can set multiple effects separated by commas.
It is described by X and Y offsets relative to the element, blur and
spread radius, and colour. The text-shadow CSS property adds a
shadow to text. It accepts a comma-separated list of shadows to be
applied to the text and any of its decorations. It is also described by
some combination of X and Y offsets from the element, blur radius,
and colour.
We will start by writing our HTML code. Here we will make
three divs with the class as a card. So the code will be as follows-
<body>
<div class="card" id="card-1">
<h2>This is C++ Course</h2>
<p>I have started C++ course which does not mean that we will stop this course. We will
continue this course to completion. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
laudantium, doloremque enim repellat impedit autem nostrum facilis odio omnis optio voluptates
beatae mollitia temporibus voluptas consequuntur harum animi totam molestiae labore architecto
ratione qui!</p>
</div>
<h2>This is HTML Course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis placeat doloribus
molestiae velit ipsum, aliquam officia ratione excepturi in officiis, incidunt quo est pariatur tempore
ex, distinctio nostrum! Sint non doloribus rem obcaecati sunt.</p>
</div>
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In tenetur molestiae, placeat quas
perferendis quibusdam atque omnis distinctio obcaecati dolor, tempora unde deserunt iure nam. Iste
labore eveniet esse deserunt?</p>
</div>
</div>
</body>

We will then add the margin, padding and background image to
the class- .card as follows-
.card{
padding: 23px 12px;
margin: 23px 12px;
background-color: burlywood;
}
Our page will look as follows-
Now let us understand how to apply the box-shadow effect in the
CSS. The basic syntax is as-
box-shadow: 10px 13px green;

If we write the above values in the negative, the shadow will move
towards up. In the same way, we can apply the blur-radius property
to the boxes. This property is used to make the border blur. The
other property is spread-radius. It is used to spread the color around
the box. To make all these changes inside the box, we can use
the inset property as follows-
box-shadow: inset 3px 5px green
Now let us see how to use text-shadow. For this, we will make the
changes in the heading tag as follows-
.card h2{
text-shadow: 3px 4px red;
}
By writing this, you will see the changes as follows-
We can use the negative values here also to see the changes
towards the upside. All the properties like blur-radius and spread-
radius can also be used here.
So, I believe you have understood the concepts of box and text
shadows. You can try different effects and analyze the changes
accordingly. Till then, stay connected with the tutorial.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Box shadow and text shadow</title>
</head>
<style>
.container{
display: flex;
}
.card{
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid red; */
/* box-shadow: offset-x offset-y color; */
/* box-shadow: offset-x offset-y blur-radius color; */
/* box-shadow: offset-x offset-y blur-radius spread-radius color; */
/* box-shadow: 10px 13px green; */
/* box-shadow: -10px -13px green; */
/* box-shadow: 7px 5px 10px green;
box-shadow: -7px -5px 10px green; */
/* box-shadow: -7px -5px 10px 34px green; */
/* box-shadow: -7px -5px 10px 34px rgba(71, 172, 172, 0.5); */
box-shadow: inset 3px 5px green;
box-shadow: 3px 5px green, 4px 6px red;
}
.card h2{
/* text-shadow: 3px 4px red; */
/* text-shadow: 3px 2px 2px white; */
text-shadow: -3px -2px 2px white;
}
</style>

body>
<h2>This is C++ Course</h2>
<p>I have started C++ course which does not mean that we
will stop this course. We will continue this course to completion.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
laudantium, doloremque enim repellat impedit autem nostrum
facilis odio omnis optio voluptates beatae mollitia temporibus
voluptas consequuntur harum animi totam molestiae labore
architecto ratione qui!</p>
</div>
<h2>This is HTML Course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veritatis placeat doloribus molestiae velit ipsum, aliquam officia
ratione excepturi in officiis, incidunt quo est pariatur tempore ex,
distinctio nostrum! Sint non doloribus rem obcaecati sunt.</p>
</div>
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
In tenetur molestiae, placeat quas perferendis quibusdam atque
omnis distinctio obcaecati dolor, tempora unde deserunt iure nam.
Iste labore eveniet esse deserunt?</p>
</div>
</div>
</body>
</html>

CSS Tutorial: Variables & Custom Properties | Web
In this tutorial, we are going to learn about variables and custom
properties used in CSS. We will start by making a new file
as tut35.html and add an instant boilerplate to get the basic
template. Give the title as CSS variables and custom properties in the
<title> tag.
Now don’t get confused and start comparing these variables with the
other programming languages. The variables in CSS are different than
those of programming languages. For the HTML part, we will make
a container and three boxes inside the divs as follows-
<body>
<div class="box"></div>
</div>
</body>
Let us style the box as follows-
.box{
width: 200px;
height: 200px;
margin: 2px 9px;
}
The result of the above code will be as follows-

Now we will understand the concept of variables. Suppose, we want
to create a variable for the background color. We can create it by ‘--
’ symbol. Variables in CSS helps us to assign the same properties to
different elements. Let us analyze it with the code given below-
.box{
--box-color: violet;
width:200px;
height: 200px;
background-color: var(--box-color);
border: 2px solid var(--box-color);
box-shadow: 3px 3px var(--box-color);
margin: 2px 9px;
}
Here, we are using the variable properties to three elements i.e.
background color, border, and box-shadow. The change will be as
follows-
The important point to remember about these variables is it can be
used within its scope only. To make it work, we can write it again or
can use the --root property. To make it understand clearer, we can
make a global variable in terms of programming language. Let us
understand the code below-
:root{
--primary-color: blue;
--danger-color: red;
--maxw: 333px;
}

Any custom properties written in the root variable can be accessed
anywhere in the code. In most of the cases, we use primary color
and danger color as shown in the above example. We have to
modify the violet color with the primary color and danger color in
the box class as follows-
.box{
width:200px;
height: 200px;
background-color: var(--primary-color);
border: 2px solid var(--danger-color);
margin: 2px 9px;
}
Now let us modify the container and add the maxw property in it
from the root with additional some properties. The code is as
follows-
.container{
max-width: var(--maxw);
margin: auto;
background-color: var(--danger-color);
display: flex;
/* background-color: var(--box-color); */
}
The container will look as follows-

So, I believe you must have understood the concepts of variables
and custom properties in CSS and how they can be used to minimize
our efforts. For more interesting upcoming tutorials, kindly stay
tuned and keep practicing.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>CSS Variables/Custom Properties</title>
<style>
:root{
--primary-color: blue;
--danger-color: red;
--maxw: 333px;
}
.box{
width:200px;
height: 200px;
background-color: var(--primary-color);
border: 2px solid var(--danger-color);
margin: 2px 9px;
}
.container{
max-width: var(--maxw);
margin: auto;
background-color: var(--danger-color);
display: flex;
/* background-color: var(--box-color); */
}

</style>
</head>
<body>
</div>
</body>
</html>
CSS Tutorial: Creating Animations & Keyframes |
Web Development Tutorials #36
In this tutorial, we are going to learn about how to create different
animations with the help of CSS. Creating animations with CSS is the
most exciting part of the whole web development. We will make a
new file as tut36.html and add a boilerplate for the basic HTML
template. Then give the title as Keyframes and Animations in the
<title> tag.
You will definitely appreciate the techniques shared in this tutorial
about animations. Let us now write the HTML code for our website
as follows-
<body>
<div class="box">
This is a box
</div>
</div>
</body>

Let us now style our container and box by adding some of the CSS as
follows-
.container {
}
.box {
width: 250px;
height: 250px;
position: relative;
}
The output will be as follows-
The position of the box is set to be relative so that we can move it
within our webpage.
For making our animation, we need to start by giving
the animation-name. We can give any name here. It is just used to
define our animation. The code for designing the animation is as
follows-

.box {
width: 250px;
height: 250px;
position: relative;
/* animation-name: harry1; */
animation-name: harry2;
animation-duration: 8s;
animation-iteration-count: 1;
}
In the above example, we are using the animation-name
as harry1. The next property used is animation-duration. It is used
to decide how long our animation will run. The last property
is animation-iteration-count. It is used to decide the number of
times the animation will run.
Now we will define the animation we made, i.e. harry1 as follows-
@keyframes harry1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
The keyframes are used to make the animation. From and to are
used to decide how the animation will move in the webpage. In the
above example, we are moving the animation harry 1 from 200px
to 1400px. These types of animations are used to design scroll bars
or progress bars on the webpage.
There are some other properties also to customize the animations
like-

animation-fill-mode:
If we want to keep the last property applied to the animation then
we can set the animation-fill-property as forward as follows-
animation-fill-mode: forward;
animation-timing-function:
We can define this property with three different values-
ease-in
After applying this, the animation will start slowly and becomes fast
towards the end.
ease-out
After applying this, the animation will begin fastly and become slow
towards the end.
ease-in-out
After applying this, the animation will start slowly, then become fast
in the midway, and ends slowly.
animation-delay
It is used to define the time after which the animation will start.
animation-delay: 3s;
animation-direction:
This property is used to define the direction of the animation. For
example, if we select it as reverse, it will move the animation in
reverse direction.
animation-direction: reverse;
There is another method of creating animation apart from
keyframes. For this, we will give the name as harry2.
@keyframes harry2 {
0%{
top:0px;
left:0px;
}
25%{
top: 250px;
left: 0px;
}
75%{
top: 250px;
left: 250px;
}
100%{
top: 0px;
left: 250px;
}
}

In this way, we can create the animations in terms of different
percentages. We can assign different values here that will occur
when that percentage of animation will be completed.
Keep practicing these animations and in the upcoming tutorials, you
will learn about practical implementations of these animations.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Keyframes and Animations</title>
</head>
<style>
.container {
}
.box {
width: 250px;
height: 250px;
position: relative;
/* animation-name: harry1; */
animation-name: harry2;
animation-duration: 8s;
animation-iteration-count: 1;
/* animation-fill-mode: alternate; */
/* animation-timing-function: ease-in-out; */
/* animation-delay: 3s; */

/* animation-direction: reverse; */
/* These properties can be set using this shorthand */
/* animation: animation-name animation-duration animation-
timing-function animation-delay animation-iteration-count
animation-fill-mode; */
/* animation: harry 5s ease-in 1s 12 backwards; */
}
@keyframes harry2 {
0%{
top:0px;
left:0px;
}
25%{
top: 250px;
left: 0px;
}
75%{
top: 250px;
left: 250px;
}
100%{
top: 0px;
left: 250px;
}
}
@keyframes harry1 {
from {
width: 200px;
}

to {
width: 1400px;
}
}
</style>
<body>
<div class="box">
This is a box
</div>
</div>
</body>
</html>
CSS Tutorial: Creating Transitions in CSS | Web Development
Tutorials #37
In the last tutorial, we have learned about keyframes and
animations to design the animation. Here we are going to
learn what are transitions and how to create them. CSS
transitions allow us to change property values smoothly, over
a given duration. It provides a way to control animation
speed when changing CSS properties.
Make a new file as tut37.html and add the boilerplate to get
the basic HTML code. Give the title as CSS Transitions in the
<title> tag. Let us now add some HTML code in the <body>
tag to get started.
<body>
<h3>This is CSS Transition Tutorial</h3>
<div id="box">
This is my box
</div>
</div>
</body>

Now we will add some CSS in the box to see some of the transitions
effects-
body{
}
#box{
display: flex;
height: 200px;
width: 200px;
}
The align-items as center is used here to place the text inside the
box in the center as shown below.

Now we will make a hover effect which will change the properties when the
mouse pointer will hover on the box.
#box:hover{ background-color: green; }
Let us now discuss some of the transition properties-
Transition-property- It is used to decide which transition property we want to
use. For example, if we want to transition background color, then we have to
write-
transition-property: background-color;
Transition-duration- If we want to see the duration which is required to make
the change, we can use this property. For example, if we set transition
duration as 1seconds, then the transition will happen in 1 second only.
transition-duration: 1s;
Transition-timing-function- This property is used to decide the speed of
transition from beginning to end. These are of three types as follows-
ease-in
After applying this, the animation will start slowly and becomes fast towards
the end.
ease-out
After applying this, the animation will begin fastly and become slow towards
the end.
ease-in-out
After applying this, the animation will start slowly, then become fast in the
midway, and ends slowly.
transition-timing-function: ease-in-out;
Transition-delay- It is that particular time interval after which the transition
effect will start. For example, if we set it as 2s, then the transition effect will
start after 2 seconds only.
transition-delay: 2s;
Also, there is one short hand property that allows us to write all these
transitions in a single line. It can be written as follows-
transition: background-color 1s ease-in-out 2s;
If we want all the properties should go under transition, then we can write-
transition: all 1s ease-in-out 2s;
Now, we can add some more properties in the hover effect as follows-
#box:hover{
height: 400px;
width: 400px;
border-radius: 100px;
font-size: 45px;

Here, all the properties will get changed accordingly and you witness
some good transitions. All those properties that can change their
values like colors, can show different transition properties. You can
try different such properties and view the effects of these
transitions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Transitions</title>
</head>
<style>
body{
}
#box{
display: flex;
height: 200px;
width: 200px;
/* transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 2s; */
/* Transition short hand property in one line */
/* transition: background-color 1s ease-in-out 2s; */
transition: all 1s ease-in-out .3s;
}
#box:hover{
height: 400px;
width: 400px;
border-radius: 100px;
font-size: 45px;
}
</style>
<body>
<h3>This is CSS Transition Tutorial</h3>
<div id="box">
This is my box
</div>
</div>
</body>
</html>

CSS Tutorial: Transform property in CSS | Web Development
Tutorials #38
In this tutorial, we are going to learn about different types of
transforms used in CSS. The transform property applies a 2D or 3D
transformation to an element. This property allows you to rotate,
scale, move, skew., elements. This property is also used in creating
animations.
We will start by making a new file as tut38.html and create an instant
boilerplate through emmet abbreviation to get the basic HTML
template. Give the title as CSS Transform in the <title> tag. Then we
will write our HTML code to get started as follows-
<body>
<div class="box">This is a box</div>
</div>
</body>
Let us now design our box with some CSS as shown below-
.box{
background: brown;
border-radius: 8px;
height: 400px;
width: 400px;
}
We will also customize our container with the following code as
shown below-
.container{
height: 80vh;
display: flex;
}

The box and the container will look as follows-
The box will come to the center. We can reset the margin and
paddings already applied as follows-
*{
margin: 0px;
padding: 0px;
}
We are doing this because you must know what all obstacles
occur while creating a website and how to tackle them.
Now we can play with the box and apply different transform
properties to it. However, we can add more properties to the box
to make it look better.
.box{
display: flex;
}
We can add transform property directly to the box itself. For
example, if we write
transform: rotate(45deg);

After writing the above code in the box element, it will look like-
We have to apply the transition effect in the box so that it looks like a
complete transition effect. For that, we have to add the below code
in the box element.-
transition: all 0.5s ease-in-out;
Now, we can ad the hover effect to add the various transition effects-
If we want to rotate the box, we can write-
.box:hover{ transform: rotate(360deg); }
It will completely rotate the box to 360 degrees.
We can also skew the box through certain degrees. The skew
property is used sometimes when we want to put the content on
one side or we want to show the 3D effect. The code is as follows-
.box:hover{ transform: skew(40deg); }
We can also scale the box. The box will become large depending on
the values we provide.
.box:hover{ transform: scale(2); }
In the above example, the box will grow 2 times the initial size.
We can also translate or move the box in the x or y axis respectively
by providing some values. The code for them is as follows-
.box:hover{ transform: translateX(123px); transform:
translateY(123px); }
We can also write them in the same line as follows-
transform: translate(123px, 123px);
So I hope that you must have understood the concept of transform property. You can now create your

So I hope that you must have understood the concept of transform
property. You can now create your own awesome websites and
practice more to get perfect.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Transform</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.container{
height: 80vh;
display: flex;
}
.box{
display: flex;
background: brown;
border-radius: 8px;
height: 400px;
width: 400px;
transition: all 0.5s ease-in-out;
}
.box:hover{
/* transform: rotate(360deg); */
/* transform: skew(40deg); */
/* transform: scale(2); */
/* transform: translateX(123px); */
/* transform: translateY(123px); */
transform: translate(123px, 123px);
}
</style>
</head>
<body>
<div class="box">This is a box</div>
</div>
</body>
</html>

INTRODUCTIONS OF CSS PART 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Ähnlich wie INTRODUCTIONS OF CSS PART 2

Ähnlich wie INTRODUCTIONS OF CSS PART 2 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

INTRODUCTIONS OF CSS PART 2