CSS Notes

Button in CSS
CSS (Cascading Style Sheets) is a styling language that defines the appearance and
layout of HTML elements on a webpage. Buttons are common elements used in web
design to trigger actions or links. Applying CSS to buttons allows you to customize their
appearances, such as colours, fonts, borders, and animations.

Define Button in CSS?

Here are the basics and some advanced concepts related to button CSS. Remember
that CSS provides extensive flexibility, and one can combine various properties and
techniques to achieve your desired button styles.

1. HTML Markup:

You typically use the `<button>` element in your HTML markup to create a button. For
example:

<button>Click me</button>

2. Selecting the Button:

CSS provides various ways to select and target elements. You can select a button by its
element type, class, or ID. Here are some examples:

o Select by element type:

button {
/* CSS styles */
}

o Select by class:

<button class="my-button">Click me</button>

.my-button {
/* CSS styles */

HARSHAN DIGI TECH

 }

o Select by ID:

<button id="my-button">Click me</button>

#my-button {
/* CSS styles */
}

3. Basic Button Styles:

You can start customizing buttons with basic styles like background colour, text colour,
padding, border, and font size. Here's an example:

button { background-color:
#4CAF50; colour: white;
padding: 10px 20px; border:
none; font-size: 16px;

4. Hover and Active States:

Buttons can change appearance when users interact with them. You can define different styles
for the hover and active states. For example:

button:hover { background-
color: #45a049;

}
button:active { background-
color: #3e8e41;

5. Button Sizes:

Buttons can have different sizes based on their intended use. You can adjust their width,
height, and font size to create small, medium, or large buttons. Here's an example:
 CSS Notes
.small-button { font-
size: 12px; padding:
5px 10px;

.medium-button {
font-size: 16px;
padding: 10px 20px;

.large-button { font-
size: 20px; padding:
15px 30px;

6. Button Borders and Shadows:

CSS allows you to customize button borders and add shadows for a more visually appealing
look. Here's an example:

button { border: 2px solid #4CAF50;

box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);

7. Button Transitions and Animations:

You can apply transitions and animations to buttons to add interactive effects. For example,
you can animate the background colour change on hover. Here's an example:

button { transition: background-color

0.3s ease;

HARSHAN DIGI TECH

 button:hover { background-
color: #45a049;

8. Advanced Button Styling:

CSS offers advanced techniques for button styling, such as gradients, rounded corners, box
shadows, and more. Here's an example combining some of these techniques:

button { background: linear-gradient(to bottom, #4CAF50,

#45a049); colour: white;
padding: 10px 20px; border: none;
border-radius: 4px; box-shadow: 0px 2px
4px rgba(0, 0, 0, 0.4); text-shadow: 1px 1px
1px rgba(0, 0, 0, 0.2);

}
 CSS Notes

CSS Border
CSS border is a key property used to characterize and style the borders around HTML
components. Borders assume a vital part in website composition, assisting with making
separation, emphasis, and stylish allure. In CSS, you can utilize a few border-related
properties to control the style, variety, size, and shape of these borders. In this article,
we will investigate these CSS border properties and how to really utilize them.

CSS Border Properties

The CSS border properties are utilized to determine the style, variety, width, and ebb and
flow of the borders of a component. These properties include:

o border-style o

border-color o

border-width o

border-radius

1) CSS border-style
The Border style property is used to specify the border type which you want to display on
the web page.

There are some border style values which are used with border-style property to define
a border.

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

HARSHAN DIGI TECH

 solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to

bordercolor value.

ridge It defines a 3d ridged border. effect is generated according to border-color

value.

inset It defines a 3d inset border. effect is generated according to border-color

value.

outset
It defines a 3d outset border. effect is generated according to border-color
value.

Example:

<!DOCTYPE html>
<html>
<head>
<style> .border-
example { width:
150px; height: 30px;
margin: 10px;
padding: 10px;
 CSS Notes
}

.dotted { border: 2px

dotted #FFA500;

.dashed { border: 2px

dashed #008000;

.solid { border: 2px

solid #000;

.double { border: 4px

double #FF0000;

.groove { border: 3px

groove #3333FF;

.ridge { border: 3px ridge

#660066;

.inset {
border: 3px inset #006600;
}

HARSHAN DIGI TECH

 .outset { border: 3px
outset #990000;

}
</style>
</head>
<body>
<div class = "border-example dotted"> Dotted Border </div>
<div class = "border-example dashed"> Dashed Border </div>
<div class = "border-example solid"> Solid Border </div>
<div class = "border-example double"> Double Border </div>
<div class = "border-example groove"> Groove Border </div>

<div class = "border-example ridge"> Ridge Border </div>

<div class "border-example inset"> Inset Border </div>
<div class = "border-example outset"> Outset Border </div>
</body>
</html>

Output:
 CSS Notes

2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can
also use the one of the three pre-defined values, thin, medium or thick to set the width
of the border.
<!DOCTYPE html>

HARSHAN DIGI TECH

 Note: The border-width property isn't utilized alone. It is constantly utilized with other
border properties like "border-style" property to set the border first any other way it won't
work.

<html>
<head>
<style>
/* CSS for different border widths */
.thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide
solid red border */

.medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide

solid green border */

.thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide

solid blue border */

.custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide

dashed orange border */

}
</style>
</head>
<body>

<!-- HTML elements with different border widths -->

<p class = "thin-border"> Thin Border </p>
<p class = "medium-border"> Medium Border </p>
<p class = "thick-border"> Thick Border </p>
<div class = "custom-border"> Custom Border </div>

</body>
</html>
 CSS Notes
Output:

3) CSS border-color
There are three strategies to set the color of the border.

o Name: It determines the color name. For instance: "red". o RGB: It determines
the RGB worth of the color. For instance: "rgb(255,0,0)". o Hex: It determines
the hex worth of the color. For instance: "#ff0000".

Note: The border-color property isn't utilized alone. It is constantly utilized with other
border properties like "border-style" property to set the border first any other way it won't
work.
Example:

<!DOCTYPE html>
<html>
<head>
<style> .my-element { width: 200px; height: 100px;
border: 2px solid #333; /* The Initial border color is dark gray */
transition: border-color 0.5s; /* Adding a smooth transition effect */

HARSHAN DIGI TECH

 .my-element:hover { border-color: blue; /* This changes the border color to
blue when hovering */

}
</style>
</head>
<body>
<div class = "my-element"> Hover </div>
</body>
</html>

Output:

CSS Border-radius Property

Cascading Style Sheets (CSS) is a useful asset for web engineers, permitting them to
style and design web pages with artfulness. One of the key properties that add to the
visual allure of components is border-radius. This flexible property permits you to make
adjusted corners for borders, adding a bit of polish to your design. How about we dig
into the complexities of border-radius and investigate its different applications.

Understanding the Basics

At its center, border-radius characterizes the shape of the sides of an element. It is
shorthand for border-top-left-radius, border-top-right-radius, border-bottom-rightradius,
and border-bottom-left-radius. These properties empower you to autonomously set the
radius for each corner.

This CSS property includes the properties that are tabulated as follows:
 CSS Notes
Property Description

border-top-left-radius It is used to set the border-radius for the top-left corner

border-top-right-radius It is used to set the border-radius for the top-right corner

It is used to set the border-radius for the bottom-right

border-bottom-rightradius
corner

It is used to set the border-radius for the bottom-left

border-bottom-left-radius
corner

If the bottom-left value is omitted, then it will be same as the top-right. If the value of
bottom-right is eliminated, then it will be same as the top-left. Similarly, if top-right is
eliminated, then it will be the same as top-left.

Single Value:

At the point when you offer a single value, like border-radius: 30px;, it applies that radius to
all corners, making consistently adjusted edges.

Two Values:

Presenting two values, similar to border-radius: 20% 10%;, empowers you to set various
radii for even and vertical corners. The primary value addresses the top-left and

HARSHAN DIGI TECH

bottom-right corners, while the subsequent value applies to the top-right and bottom-
left corners.

Three and Four Values:

Things get much more intriguing with three and four values. With border-radius: 10%
30% 20%;, the values relate to top-left, top-right, and bottom-right/bottom-left
corners, separately. For four values like border-radius: 10% 30% 20% 40%;, you take
care of each corner independently.

Explicit Corners:

Here and there, you need to zero in on a particular corner. Use properties like
bordertop-left-radius to focus on the top-left corner, making an exceptional search for
your elements. The slash (/) permits you to set separate level and vertical radii. For
instance, border-radius: 10%/50%; sets a level radius of 10% and an upward radius of
50%.

Syntax
border-radius: 1-4 length | % / 1-4 length | % | inherit | initial;
Property values

length: It defines the shape of the corners. It denotes the size of the radius using length
values. Its default value is 0. It does not allow negative values.

percentage: It denotes the size of the radius in percentage. It also does not allow negative
values.

Example:
#roundedBox { border-
radius: 20px; background-
color: #7fd7e7;

#fancyBox {

border-radius: 15% 10%; background-

color: #ffa07a;
 CSS Notes
}

#customBox {

border-radius: 20px 30px 10px; background-

color: #98fb98;

}
Border-radius Example

Code:

<!DOCTYPE html>

<html>

<head>

<title> CSS border-radius </title>

<style> div
{

padding: 50px;
margin: 20px; border:
6px ridge red; width:
300px;

float: left;
height: 150px;

} p{ font-size:
25px;

}
#one { border-radius:
90px; background:
lightgreen;

HARSHAN DIGI TECH

#two { border-radius:
25% 10%; background:
orange;

#three { border-radius: 35px

10em 10%; background: cyan;

#four {

border-radius: 50px 50% 50cm 50em; background:

lightblue;

</style>

</head>

<body>

<div id = "one">
<h2> Welcome to the Welcome to the Digitech </h2>

<p> border-radius: 90px; </p>

</div>

<div id = "two">
<h2> Welcome to the Welcome to the Digitech </h2>

<p> border-radius: 25% 10%; </p>

</div>

<div id = "three">
<h2> Welcome to the Welcome to the Digitech </h2>
<p> border-radius: 35px 10em 10%; </p>
</div>

<div id = "four">
<h2>Welcome to the Digitech</h2>

<p>border-radius: 50px 50% 50cm 50em;</p>

 CSS Notes
</div>

</body>

</html>

CSS Border-collapse Property

Cascading Style Sheets (CSS) play a pivotal role in designing and styling web pages,
offering a myriad of properties to control the layout and appearance of elements. One
such property that holds significance in table formatting and design is border collapse.
This property allows developers to control the rendering of borders between table cells
and significantly influences the overall look and feel of tabular data.

What is a Border Collapse in CSS?

Border-collapse is a CSS property that defines how borders between table cells are
handled. It's particularly relevant in HTML tables, where rows and columns are
structured to display data. By default, HTML tables have a separate border for each cell,
which may result in a more spaced-out appearance due to the gaps between individual
cell borders.

The border-collapse property provides two main values: collapse and separation.
o Separate: This is the default value for the property. It creates separate borders for each

cell, leaving space between adjoining borders. Each cell maintains its distinct border. o
Collapse: This value collapses the borders between adjoining cells into a single border. It

HARSHAN DIGI TECH

 removes the space between cell borders, resulting in a cleaner and more compact
appearance. Adjacent cells share borders, appearing as a single line.

How to Use Border-collapse

Implementing border collapse in CSS is relatively straightforward. It's applied to the
<table> element or to specific <td> and <th> elements within the table to control the
border rendering behavior.

Syntax:
table {

border-collapse: collapse;

The values of this CSS property are defined as follows.

Property Values

separate: It is the default value that separates the border of the table cell. Using this value,
each cell will display its own border.

collapse: This value is used to collapse the borders into a single border. Using this, two

adjacent table cells will share a border. When this value is applied, the borderspacing

property does not affect. initial: It sets the property to its default value. inherit: It

inherits the property from its parent element.

Now, let's understand this CSS property by using some examples. In the first example,
we are using the separate value of the border-collapse property. In the second
example, we are using the collapse value of the border-collapse property.

Example - Using separate value

With this value, we can use the border-spacing property to set the distance between the
adjacent table cells.

<!DOCTYPE html>
 CSS Notes
<html>

<head>

<title> border-collapse property </title>

<style> table{
border: 2px solid blue;
text-align: center;
font-size: 20px; width:
80%; height: 50%;

} th{ border: 5px solid

red; background-color:
yellow;

} td{ border: 5px solid

violet; background-
color: cyan;

} #t1 { border-collapse:
separate;

</style>

</head>

<body>

<h1> The border-collapse Property </h1>

<h2> border-collapse: separate; </h2>

<table id = "t1">

<tr>

<th> First_Name </th>

<th> Last_Name </th>

<th> Subject </th>

<th> Marks </th>

HARSHAN DIGI TECH

 </tr>
<tr>

<td> James </td>

<td> Gosling </td>

<td> Maths </td>

<td> 92 </td>

</tr>

<tr>

<td> Alan </td>

<td> Rickman </td>

<td> Maths </td>

<td> 89 </td>

</tr>

<tr>

<td> Sam </td>

<td> Mendes </td>

<td> Maths </td>

<td> 82 </td>

</tr>

</table> </body>

</html>

Output
 CSS Notes

Example - Using collapse property

The border-spacing and border-radius properties cannot be used with this value.

<!DOCTYPE html>

<html>

<head>

<title> border-collapse property </title>

<style> table{

border: 2px solid blue;

text-align: center;
font-size: 20px; width:
80%; height: 50%;

} th{

border: 5px solid red; background-color:

yellow;

} td{

border: 5px solid violet; background-color:

cyan;

HARSHAN DIGI TECH

}

#t1{

border-collapse: collapse;

</style>

</head>

<body>

<h1> The border-collapse Property </h1>

<h2> border-collapse: collapse; </h2>

<table id = "t1">
<tr>
<th> First_Name </th>

<th> Last_Name </th>

<th> Subject </th>

<th> Marks </th>

</tr>

<tr>

<td> James </td>

<td> Gosling </td>

<td> Maths </td>

<td> 92 </td>

</tr>

<tr>

<td> Alan </td>

<td> Rickman </td>

<td> Maths </td>

<td> 89 </td>

</tr>

<tr>

<td> Sam </td>

 CSS Notes
<td> Mendes </td>

<td> Maths </td>

<td> 82 </td>

</tr>

</table> </body>

</html>

Output

Example:

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>JTP</title>

<link rel="stylesheet" href="styles.css">

<style>

HARSHAN DIGI TECH

 table { width: 100%;
border-collapse: collapse;

}
th,
td {

border: 1px solid black;

padding: 8px; text-align:
left;

.heading {

background-color: cadetblue;

</style>

</head>

<body>

<div id="wrapper">

<table>

<tr class="heading">

<th>Product</th>

<th>Price</th>

</tr>

<tr class="data">

<td>Laptop</td>

<td>$999</td>

</tr>

<tr class="data">

<td>Smartphone</td>

<td>$599</td>

</tr>
 CSS Notes
</table>

</div>

</body>

</html>

Output

In this example, the border-collapse: collapse; property is applied to the <table>

element. The table will be rendered with collapsed borders, resulting in a seamless
appearance with no gaps between cell borders.

Advantages of Border-collapse
o Improved Aesthetics: Collapsing table borders creates a neater and more organized
layout, especially when dealing with dense tabular data.

o Reduced Space: Collapsing borders reduce unnecessary spacing, optimizing the use
of available screen real estate.

o Consistent Styling: When designing complex tables, collapsing borders can aid in
maintaining a consistent style throughout the table structure.

Cell Spacing and Padding:

While border-collapse manages the visibility of borders between cells, it's essential to
distinguish between cell spacing and padding.

o Cell Spacing: Refers to the space between cells. In border-collapse: separate; mode,
the spacing between cells can be adjusted using the border-spacing property. It
controls the distance between adjacent cell borders.

HARSHAN DIGI TECH

 o Padding: Represents the space between the content of a cell and its border. Padding
can be set individually for cells using the padding property for <td> and <th>
elements.

o When border-collapse: collapse; is used, any cell spacing declared using

borderspacing is ignored, and padding values become more critical for controlling the
space within cells.

CSS Border-spacing Property

This CSS property is utilized to set the distance between the borders of the nearby cells
in the table. It applies just when the border-collapse property is set to isolate. There
won't be any space between the borders if the border-collapse is set to collapse.

It tends to be characterized as a couple of values for deciding the vertical and horizontal
spacing.
At the point when just a single value is determined, then it sets both horizontal and vertical
spacing.

At the point when we utilize the two-value punctuation, then the first is utilized to set
the horizontal spacing (i.e., the space between the adjoining columns), and the
subsequent value sets the vertical spacing (i.e., the space between the nearby rows).

Syntax
border-spacing: length | initial | inherit;
Property Values

The values of this CSS property are defined as follows.

1. length: Determines the distance between the borders in pixels, centimeters, focuses, and so
on. Negative values are not permitted.

2. initial: Sets the property to its default value.

3. inherit: Inherits the property from its parent component.

 CSS Notes
Let's understand this CSS property by using some examples. In the first example, we
are using the single value of the border-spacing property, and in the second example,
we are using two values of the border-spacing property.

Single Value Example

In this example, the border-spacing is set to 45 pixels separately, making both flat and
vertical spacing between the table cells. Change the value as per your plan inclinations.
This example show how the border-spacing property can be used to upgrade the visual
show of tables. Change the values in light of your particular plan necessities.

Code:

<!DOCTYPE html>

<html>

<head>

<title> border-spacing property </title>

<style> table{

border: 2px solid blue;

text-align: center; font-size:
20px; background-color:
lightgreen;

} th{ border: 5px solid

red; background-color:
yellow;

} td{ border: 5px solid

violet; background-
color: cyan;

#space{ border-collapse:
separate; border-spacing:
45px;

HARSHAN DIGI TECH

}

</style>

</head>

<body>

<h1> The border-spacing Property </h1>

<h2> border-spacing: 45px; </h2>

<table id = "space">
<tr>

<th> First_Name </th>

<th> Last_Name </th>

<th> Subject </th>

<th> Marks </th>

</tr>

<tr>

<td> James </td>

<td> Gosling </td>

<td> Maths </td>

<td> 92 </td>

</tr>

<tr>

<td> Alan </td>

<td> Rickman </td>

<td> Maths </td>

<td> 89 </td>

</tr>

<tr>

<td> Sam </td>

<td> Mendes </td>

<td> Maths </td>

<td> 82 </td>
 CSS Notes
</tr>

</table>

</body>

</html>

Output

Two Values Example

Here, we are utilizing two values of the border-spacing property. The border-collapse
property is set to isolate, and the value of the border-spacing is set to 20pt 1em. The
primary value, i.e., 20pt sets the flat spacing, and the value 1em set the upward spacing.
This example show how the border-spacing property can be used to upgrade the visual
show of tables. Change the values in light of your particular plan necessities.

Code:
<!DOCTYPE html>

<html>

<head>

<title> border-spacing property </title>

HARSHAN DIGI TECH

<style> table{ border: 2px
solid blue; text-align: center;
font-size: 20px; background-
color: lightgreen;

} th{ border: 5px solid

red; background-color:
yellow;

} td{ border: 5px solid

violet; background-
color: cyan;

}
#space{ border-collapse:
separate; border-spacing:
20pt 1em;

</style>

</head>

<body>

<h1> The border-spacing Property </h1>

<h2> border-spacing: 20pt 1em; </h2>

<table id = "space">
<tr>

<th> First_Name </th>

<th> Last_Name </th>

<th> Subject </th>

<th> Marks </th>

</tr>

<tr>

<td> James </td>

 CSS Notes
<td> Gosling </td>

<td> Maths </td>

<td> 92 </td>

</tr>

<tr>

<td> Alan </td>

<td> Rickman </td>

<td> Maths </td>

<td> 89 </td>

</tr>

<tr>

<td> Sam </td>

<td> Mendes </td>

<td> Maths </td>

<td> 82 </td>

</tr>

</table> </body>

</html>

Output

HARSHAN DIGI TECH

CSS Card Design
CSS card design is most important for a user-friendly method of presenting information
in an organized style. The card is used to become an essential component of
contemporary web design. It works from straightforward, basic designs to more
complex, dynamic card design layouts.

We can design exciting and entertaining user experiences using unique capabilities and
designs. The CSS card design works with hover effects, animations, and interactive
elements for web development applications.

Basic CSS Card Design

The basic card design uses a simple CSS property to pop up the card layout. We can use
simple or multiple cards on a single web page.

Syntax:

The following syntax helps to create a card design of any container or tag.

.card { box-shadow: 2px 6px 8px 2px

rgba(0,0,0,0.2); transition: 0.2s; width: 35%;

Examples:
The following examples show the different designs and layouts of the CSS card. We can
use single, multiple, and attractive card designs.

Example 1:

The basic and simple CSS card design example shows the use and requirements in web design.
We can use basic information and one image on the card.

<!DOCTYPE html>
<html>
<head>
 CSS Notes
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 35%;
background-color: white; margin: 10px;

}
.main_div { background-color:
#F9F1F1; height:380px;

}
.container { padding:
2px 16px;

}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create Basic and Single Card Design </p>
<!-- basic card container tag -->
<div class = "card">
<!-- card information -->
<img src = "https://images.pexels.com/photos/11035386/pexels-
photo11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt =
"Av atar" style = "width:100%">

<div class = "container">

<h4>
<b> Digi-Tech</b>
</h4>
<p> CSS Tutorial </p>

HARSHAN DIGI TECH

 </div>
</div>
</div>
</body>
</html>
Output:

The output shows a basic card design.

Example 2:

The example shows multiple cards in a single web page to display various information in
a user-friendly format. We can use basic information and one image on the card.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
 CSS Notes
.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 45%;
background-color: white; margin: 10px;

}
.main_div {
background-color: #F9F1F1; height:380px;

}
.container { padding:
2px 16px;

}
#card1{
float: left;
}
#card2{ float:
right;

}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create multiple Card Designs to display various types of information </p>
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-
11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar
" style = "width:100%">
<div class = "container">
<h4>
<b> Digi Tech </b>
</h4>

HARSHAN DIGI TECH

<p> CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-
11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar
" style = "width:100%">
<div class = "container">
<h4>
<b> Digi tech </b>
</h4>
<p> HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

Output:

The output shows two basic card designs.

 CSS Notes

CSS Card Design with Hover Effect

The card design uses basic CSS properties to show the card layout. We can use the hover
effect on the card to pop up the required card.

Syntax:

The following syntax helps to create the card design of any container with a hover effect.

.card { box-shadow: 2px 6px 8px 2px

rgba(0,0,0,0.2); transition: 0.2s;

}
.card:hover {
/*CSS property design*/
}

Examples:

The following examples show the different designs and layouts of the CSS card. We can
use single or multiple attractive card designs.

Example 1:

The simple CSS card design example shows the use and requirements with the hover
effect in web design. We can change CSS properties and their values after the hover
effect on the card.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */

HARSHAN DIGI TECH

.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 35%;
background-color: white; margin: 10px;

}
.main_div { background-color:
#F9F1F1; height:380px;

}
.container { padding:
2px 16px;

}
/* card design with hover effect */
.card:hover {
box-shadow: 5px 8px 16px 5px rgba(0,0,0,0.2);
background-color:aqua; margin-left:30px;

}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with Hover Effect </h2>
<p> Create Basic and Single Card Design </p>
<!?use single card design -->
<div class = "card">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-
11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar" st
yle = "width:100%"> <div class = "container">

<h4>
<b> Digi Tech </b>
</h4>
<p> CSS Tutorial </p>
 CSS Notes
</div>
</div>
</div>
</body>
</html>

Output:

The output shows the CSS card design.

Example 2:

The simple CSS card design example shows the multiple cards with hover effects in web
design. We can change CSS properties and their value for the hover effect on the two
cards.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">

HARSHAN DIGI TECH

<style>
/* show basic CSS card design */
.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 45%;
background-color: white; margin: 10px;

}
.main_div { background-color:
#F9F1F1; height:380px;

}
.container { padding:
2px 16px;

}
#card1{
float: left;
}
#card2{ float:
right;

}
/* card design with hover effect */
#card1:hover { box-shadow: 5px 8px 16px 5px
rgba(0,0,0,0.2); background-color:aqua;
margin-left:30px;

}
#card2:hover { box-shadow: 5px 8px 16px 5px
rgba(0,0,0,0.2); background-color:orange;
margin-top:30px;

}
</style>
</head>
<body>
 CSS Notes
<div class = "main_div">
<h2> CSS Card Design </h2>
<p> Create multiple Card Designs to display various types of information </p>
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-
photo11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt =
"Av atar" style = "width:100%">

<div class = "container">

<h4>
<b> Digi tech </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-
11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Av
atar" style = "width:100%">

<div class = "container">

<h4>
<b> Digi Tech </b>
</h4>
<p> HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

Output:

The output shows the CSS card design.

HARSHAN DIGI TECH

CSS Card Design with Animation
The card design uses basic CSS properties to show the card layout. We can use the
hover effect on the card popup of the data. We can add animation for attractive and
advanced design. We can use the animation property with the value. The @keyframes
are essential for the animation property of the CSS.

Syntax:

The following syntax helps to create a card design of any container with animation.

.card { box-shadow: 2px 6px 8px 2px

rgba(0,0,0,0.2); transition: 0.2s;

}
.card:hover {
animation: popup 2s;

}
@keyframes popup {
50%{
Animation property of the CSS tag
 CSS Notes
}
}

Examples:

The following examples show the different designs and layouts of the CSS card. We can
use single or multiple attractive card designs.

Example 1:

The simple CSS card design example shows the use and requirements with the hover
effect in web design. We can change CSS properties and their values after the hover
effect on the card.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 45%;
background-color: white; margin: 10px;

}
.main_div { background-color:
#F9F1F1; height:380px;

}
.container { padding:
2px 16px;

}
#card1{
float: left;
}

HARSHAN DIGI TECH

#card2{ float:
right;

}
/* CSS card design with hover effect and animation property */
#card1:hover { animation:
popup 2s;

}
/* CSS card design for animation tag property */
@keyframes popup {
0%{ transform:
scale(1);

}
50%{ transform:
scale(1.1);

}
70%{ transform:
scale(1.2);

}
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with animation </h2>
<p> Create multiple Card Designs to display various types of information < /p
>

<!?use multiple card design in a single web page -->

<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-
11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt =
 CSS Notes
"Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> Digi tech </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-
11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt =
"Avatar" style = "width:100%">
<div class = "container">
<h4>
<b> Digi Tech </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>

Output:

The output shows a basic card design.

HARSHAN DIGI TECH

Example 2:

The simple CSS card design example shows the use and requirements with the hover
effect in web design. We can change CSS properties and their values after the hover
effect on the card.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* show basic CSS card design */
.card { box-shadow: 2px 6px 8px 2px
rgba(0,0,0,0.2); transition: 0.2s; width: 45%;
background-color: white; margin: 10px;

}
.main_div { background-color:
#F9F1F1; height:380px;

}
.container {
 CSS Notes
padding: 2px 16px;
}
#card1{
float: left;
}
#card2{ float:
right;

}
/* first card design with animation property */
#card1:hover { position:
relative; animation: myfirst
3s; animation-direction:
down;

}
@keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
50% {background: yellow; left: 50px; top: 200px;}
}
/* second card design with animation property */
#card2:hover { position:
relative; animation:
myfirst1 5s; animation-
direction: up;

@keyframes myfirst1 {
0% {background: red; right: 0px; bottom: 0px;}
50% {background: blue; right: 50px; bottom: 200px;}
}

</style>

HARSHAN DIGI TECH

</head>
<body>
<div class = "main_div">
<h2> CSS Card Design with animation </h2>
<p> Create multiple Card Designs to display various types of information </p>
<!?use multiple card design in a single web page -->
<div class = "card" id = "card1">
<img src = "https://images.pexels.com/photos/11035386/pexels-photo-
11035386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar
" style = "width:100%">
<div class = "container">
<h4>
<b> Digi Tech </b>
</h4>
<p> Online CSS Tutorial </p>
</div>
</div>
<div class = "card" id = "card2">
<img src = "https://images.pexels.com/photos/11035371/pexels-photo-
11035371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt = "Avatar
" style = "width:100%">
<div class = "container">
<h4>
<b> Digi Tech </b>
</h4>
<p> Online HTML Tutorial </p>
</div>
</div>
</div>
</body>
</html>
 CSS Notes
Output:

The output shows a basic card design.

HARSHAN DIGI TECH

CSS Colors
The color property in CSS is used to set the color of HTML elements. Typically, this property is
used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can also use this property for the
border-color and other decorative effects.

We can define the color of an element by using the following ways:

o RGB format. o RGBA

format. o Hexadecimal

notation. o HSL. o HSLA. o

Built-in color.

Let's understand the syntax and description of the above ways in detail.

RGB Format
RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the
color of an HTML element simply by specifying the values of R, G, B that are in the
range of 0 to 255.

The color values in this format are specified by using the rgb() property. This property allows
three values that can either be in percentage or integer (range from 0 to 255).

This property is not supported in all browsers; that's why it is not recommended to use
it.

Syntax

color: rgb(R, G, B);

RGBA Format
 CSS Notes
It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies
the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0
is for fully transparent, and 1.0 is for not transparent.
Syntax

color:rgba(R, G, B, A);

Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation. This notation starts with
the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation,
the first two digits represent the red (RR) color value, the next two digits represent the
green (GG) color value, and the last two digits represent the blue (BB) color value.

The black color notation in hexadecimal is #000000, and the white color notation in
hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000,
#00FF00, #0000FF, #FFFF00, and many more. Syntax

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

Short Hex codes

It is a short form of hexadecimal notation in which every digit is recreated to arrive at an
equivalent hexadecimal value.

For example, #7B6 becomes #77BB66 in hexadecimal.

The black color notation in short hex is #000, and the white color notation in short hex
is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.

HSL
It is a short form of Hue, Saturation, and Lightness. Let's understand them individually.

Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red,
120 represents green, 240 represents blue.

HARSHAN DIGI TECH

Saturation: It takes value in percentage in which 100% represents fully saturated, i.e.,
no shades of gray, 50% represent 50% gray, but the color is still visible, and 0%
represents fully unsaturated, i.e., completely gray, and the color is invisible.
Lightness: The lightness of the color can be defined as the light that we want to provide
the color in which 0% represents black (there is no light), 50% represents neither dark
nor light, and 100% represents white (full lightness).

Let's see the syntax of HSL in color property.

Syntax

color:hsl(H, S, L);

HSLA
It is entirely similar to HSL property, except that it contains A (alpha) that specifies
the element's transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0
indicates fully transparent, and 1.0 indicates not transparent. Syntax

color:hsla(H, S, L, A);

Built-in Color
As its name implies, built-in color means the collection of previously defined colors that

are used by using a name such as red, blue, green, etc. Syntax color: color-name;

Let's see the list of built-in colors along with their decimal and hexadecimal values.

S.no. Color name Hexadecimal Value Decimal Value or rgb()

value

1. Red #FF0000 rgb(255,0,0)

2. Orange #FFA500 rgb(255,165,0)

 CSS Notes

3. Yellow #FFFF00 rgb(255,255,0)

4. Pink #FFC0CB rgb(255,192,203)

5. Green #008000 rgb(0,128,0)

6. Violet #EE82EE rgb(238,130,238)

7. Blue rgb(0,0,255)
#0000FF

8. Aqua rgb(0,255,255)
#00FFFF

9. Brown rgb(165,42,42)
#A52A2A

10. White rgb(255,255,255)

#FFFFFF

11. Gray rgb(128,128,128)

#808080

12. Black rgb(0,0,0)

#000000

HARSHAN DIGI TECH

 The illustration of CSS colors, which includes the above properties, is given below.

Example

<html>
<head>
<title>CSS hsl color property</title>
<style> h1{
text-align:center;

}
#rgb{
color:rgb(255,0,0);

}
#rgba{
color:rgba(255,0,0,0.5);

}
#hex{
color:#EE82EE;

}
#short{
color: #E8E;

}
#hsl{
color:hsl(0,50%,50%); }

#hsla{
color:hsla(0,50%,50%,0.5);

}
#built{
color:green;

}
 CSS Notes
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>

CSS Cursor Pointer

What is Cursors in CSS?

HARSHAN DIGI TECH

Every day, we already use customized cursors. This interaction is made possible by using
modified cursors, such as when you hover over buttons, the pointer cursor transforms
into a hand, or when you hover over the text and the cursor transforms into a text
cursor.

Cursors, however, may also be used to give our users various additional creative opportunities.

We should be aware that CSS already has default cursors for various often-done actions before
we start developing our custom cursors.

These cursors provide options for action at the precise spot you are hovering over.
Examples include cursors that indicate you should click links, drag and drop elements,
zoom in and out of objects, and more.

Use the CSS cursor property to describe the kind of cursor you want.

CSS Cursor Property

We may specify the kind of cursor that should be shown to the user using the CSS cursor
property.

Using photos as submit buttons on forms is a useful application of this capability. By

default, a hand appears instead of a pointer when a cursor is above a link. However, a
form's submit button does not cause it to change form. This serves as a visual cue that
the picture is clickable anytime someone hovers over an image that is a submit button.

This property is specified by zero or more <url> values separated by commas, followed

by one keyword value as required, and each <url> will refer to the image file. Syntax

cursor: value;

Property Values

o Auto: The default setting for this attribute is to place the cursor. o Alias: This attribute

is used to show the cursor's creation-related indicator. o All-scroll: The cursor in this

attribute denotes scrolling.

 CSS Notes
o Cell: The cursor in this property indicates that a cell or group of cells is currently
chosen.

o Context-menu: The cursor in this attribute shows the presence of a context menu.

o Col-resize: When the cursor is above a column in this property, it may be resized
horizontally.

o Copy: The cursor in this property indicates that something has to be copied. o

Crosshair: The cursor appears as a crosshair in this attribute. o Default: The default

cursor.

o E-resize: The cursor in this attribute indicates that a box's right-hand edge should be
moved.

o Ew-resize: The cursor in this attribute represents a bidirectional resizing cursor. o

Help: In this property, the cursor shows that assistance is accessible.

o Move: The pointer in this property implies that something has to be moved o . n-
resize: When using the n-resize property, the pointer shows that a box's upper
boundary should be shifted.

o Ne-resize: With this property, the cursor shows that a box's edge should be shifted to
the right and up.

o New-resize: The bidirectional resize cursor is indicated by this attribute. o Ns-resize:

A bidirectional resize cursor is indicated by the attribute ns-resize.

o Nw-resize: The cursor in this attribute shows that a box's upper and lower edges are
to be moved up and left.

o Nose-resize: The bidirectional resize cursor is indicated by this attribute.

o No-drop: The cursor in this attribute indicates that the pulled object cannot be
dumped in this location.

o None: A cursor is not displayed for the element according to this attribute.

HARSHAN DIGI TECH

 o Not-allowed: The cursor in this property indicates that the requested action won't be
carried out.

o Pointer: The cursor in this property serves as a pointer and displays link progress.

o Progress: The cursor in this attribute shows that the program is active. o Row-resize:

The cursor shows that this feature allows for vertical row resizing. o S-resize: When

using this property, the pointer shows that a box's bottom boundary should be

lowered.

o Se-resize: The cursor in this attribute indicates that a box's edge should be shifted to
the right and down.

o Sw-resize: The cursor in this attribute indicates that a box's left and lower edges
should be moved.

o Text: The cursor in this attribute denotes text that may be chosen.

o URL: This property contains a list of custom cursor URLs separated by commas and a
generic cursor at the end of the list.

o Vertical-text: The cursor in this attribute shows possible vertical-text selections.

o W-resize: When using this property, the pointer shows that a box's left edge should
be moved.

Example

This example shows how to utilize the cursor property. The program is busy since the cursor
property's value is set to wait.

<!DOCTYPE html>
<html>
<head>
<title> CSS cursor property </title>
<style>
 CSS Notes
.wait { cursor:
wait;

}
h1 { color:
red;

}
</style>
</head>

<body>
<center>
<h1>Welcome to the page</h1>
<p>To change the mouse cursor, move the mouse over the text</p>

<p class="wait">wait until next suggestion</p>

</center>
</body>
</html>

Output

HARSHAN DIGI TECH

How can CSS bring the Cursor to the Hand when a User Hovers
over a List Item?

When a user hovers their mouse over a list of items, a cursor may be created using CSS
properties. Using the HTML <ul> and <li> tags, first construct a list of the objects, and
then utilize the CSS property: To make the cursor and hand hover over the list of
objects, use hover to cursor:grab. Syntax

element:hover {
cursor:grab/pointer;

Example

<!DOCTYPE html>
<html>
<head>
<title>make our cursor as hand</title>
<style> body
{ width:90%;

}
 CSS Notes
h1 { color:red;
text-align:center;

}
li:hover{ cursor:grab;

}
</style>
</head>
<body>
<h1>Welcome to the course list</h1>
<div class = "sub">Course Lists:</div>
<ul>
<li>CSE</li> <li>ECE</li>

<li>IT</li>
<li>MECH</li>
<li>CIVIL</li>
<li>AI</li>
<li>EEE</li>
</ul>
</body>
</html>

Output

HARSHAN DIGI TECH

How can We Alter the Color of Our Cursor Using CSS?

Here, we'll utilize CSS to alter the cursor's color in the input fields. We will utilize the
caret-color attribute to alter the cursor's color. The cursor's color for textareas, input
fields, and other editable places can be changed using this attribute. Syntax

caret-color: auto|color; Parameters:

o Auto: The value is set by default. It takes advantage of the web browser's most
recent color.

o Color: It's used to specify the caret's color value. Any value (RGB, hex, namedcolor,
etc.) may be utilized.

Example

As an illustration, let's use the caret-color property to set the cursor color for input fields.

<!DOCTYPE html>
<html lang="en">
<head>
 CSS Notes
<title>
Changing the color of the cursor using CSS
</title>

<style> body {
text-align: center;

}
/* Change the cursor color to red */
input[type="text"] { caret-color: red;

/* Change the cursor color to blue */

input[type="email"] { caret-color:
blue;

}
</style>
</head>

<body>
<h1 style="color: black;">
Welcome to the page
</h1>

<h3>
Changing the color of the cursor using CSS
</h3>

<form action="">
<label for="name">Enter Your Name</label>
<input type="text" name="name" id="">
<br><br>

HARSHAN DIGI TECH

<label for="mail">Enter You Email</label>
<input type="email" name="mail" id="">
</form>
</body>

</html>

Output

How can We Use CSS to Change the Cursor Style in a Browser?

In CSS, the cursor property is used to specify the kind of mouse cursor that will be
shown when the mouse is hovered over an element. The browser's default setting for
the cursor is the pointer. Additionally, CSS may be used to customize it if necessary.
The cursor property's default setting is 'auto'. Additionally, adding the value auto to the
cursor property is optional because it is already set to auto by default.

Syntax cursor

: value;
 CSS Notes
Property Value: It describes the cursor property's value.

Example: To display the cursor as a crosshair in this example, we will set the cursor property
value to 'cursor: crosshair'.

<!DOCTYPE html>
<html>

<head>
<style>
.cursor { cursor:
crosshair;

}
</style>
</head>

<body style="text-align:left;">
<h1 style="color:red;">
Welcome to the page
</h1>
<p class="cursor">
Login Credentials
</p>
</body>
</html>

Output

CSS Display
CSS display is the most important property of CSS which is used to control the layout of
the element. It specifies how the element is displayed.

HARSHAN DIGI TECH

Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that
rectangular box.

CSS Display default properties

default value inline

inherited no

animation supporting no

version css1

javascript syntax object.style.display="none"

Syntax
display:value;

CSS display values

There are following CSS display values which are commonly used.

1. display: inline;

2. display: inline-block;

3. display: block;

4. display: run-in;

5. display: none;

1) CSS display inline

The inline element takes the required width only. It doesn't force the line break so the flow
of text doesn't break in inline example.
 CSS Notes
The inline elements are:

o <span> o

<a> o

<em> o

<b> etc.

Let's see an example of CSS display inline.

<!DOCTYPE html>
<html>
<head>
<style>
p { display:
inline;

}
</style>
</head>
<body>
<p> Hello Digitech.com </p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body> </html>

Output:

Hello Digitech.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2) CSS display inline-block

HARSHAN DIGI TECH

 The CSS display inline-block element is very similar to inline element but the difference is
that you are able to set the width and height.

<!DOCTYPE html>
<html>
<head>
<style>
p { display: inline-
block;

}
</style>
</head>
<body>
<p>Hello Digitech.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

Output:

Hello Digitech.com.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

3) CSS display block

The CSS display block element takes as much as horizontal space as they can. Means
the block element takes the full available width. They make a line break before and
after them.

<!DOCTYPE html>
<html>
 CSS Notes
<head>
<style>
p { display:
block;

}
</style>
</head>
<body>
<p>Hello Digitech</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

Output: Hello

Digitech Java

Tutorial.

SQL Tutorial.

HTML Tutorial.

4) CSS display run-in

This property doesn't work in Mozilla Firefox. These elements don't produce a specific box
by themselves.

o If the run-in box contains a bock box, it will be same as block.

HARSHAN DIGI TECH

 o If the block box follows the run-in box, the run-in box becomes the first
inline box of the block box. o If the inline box follows the run-in box, the run-in
box becomes a block box.

<!DOCTYPE html>
<html>
<head>
<style>
p { display: run-
in;

}
</style>
</head>
<body>
<p> Hello Digitech.com </p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>

Output:

Hello Digitech.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.
 CSS Notes

5) CSS display none

The "none" value totally removes the element from the page. It will not take any space.

<!DOCTYPE html>
<html>
<head> <style>
h1.hidden {
display: none;

}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>
Output:

This heading is visible.

You can see that the hidden heading does not contain any space.

Other CSS display values

Property-value Description

flex It is used to display an element as an block-level flex container.

It is new in css3.

HARSHAN DIGI TECH

 inline-flex It is used to display an element as an inline-level flex container.
It is new in css3.

inline-table It displays an element as an inline-level table.

list-Item It makes the element behave like a <li> element.

table It makes the element behave like a <table> element.

table-caption It makes the element behave like a <caption> element.

table- It makes the element behave like a <colgroup> element.

columngroup

table- It makes the element behave like a <thead> element.

headergroup

It makes the element behave like a <tfoot> element.

table-footergroup

table-row-group It makes the element behave like a <tbody> element.

table-cell It makes the element behave like a <td> element.

table-row It makes the element behave like a <tr> element.

table-column It makes the element behave like a <col> element.

CSS Float
The CSS float property is a positioning property. It is used to push an element to the
left or right, allowing other element to wrap around it. It is generally used with images
and layouts.

To understand its purpose and origin, let's take a look to its print display. In the print display,
image is set into the page such that text wraps around it as needed.
 CSS Notes

Its web layout is also just similar to print layout.

How it works
Elements are floated only horizontally. So it is possible only to float elements left or right,
not up or down.
1. A floated element may be moved as far to the left or the right as possible. Simply, it
means that a floated element can display at extreme left or extreme right.

2. The elements after the floating element will flow around it.

3. The elements before the floating element will not be affected.

4. If the image floated to the right, the texts flow around it, to the left and if the image
floated to the left, the text flows around it, to the right.

HARSHAN DIGI TECH

 CSS Float Properties

Property Description Values

clear The clear property is used to avoid elements after left, right, both,
the floating elements which flow around it. none, inherit

float It specifies whether the box should float or not. left, right, none,
inherit

CSS Float Property Values

Value Description

none It specifies that the element is not floated, and will be displayed just where
it occurs in the text. this is a default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

initial It sets the property to its initial value.

inherit It is used to inherit this property from its parent element.

CSS Float Property Example

Let's see a simple example to understand the CSS float property.

<!DOCTYPE html>
<html>
<head>
<style> img
{ float:
right;
 CSS Notes
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.<
/p>

<img src="good-morning.jpg" alt="Good Morning Friends"/> This

is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property
you can change the text size, color, style and more. You have already studied how to
make text bold or underlined. Here, you will also know how to resize your font using
percentage.

HARSHAN DIGI TECH

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)

2. CSS Font family: This property is used to change the face of the font.

3. CSS Font size: This property is used to increase or decrease the size of the font.

4. CSS Font style: This property is used to make the font bold, italic or oblique.

5. CSS Font variant: This property creates a small-caps effect.

6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts.
It is used to change the color of the text.

There are three different formats to define a color:

ADVERTISEMENT

o By a color name o By

hexadecimal value o By

RGB

In the above example, we have defined all these formats.

<!DOCTYPE html>
<html>
<head>
<style> body
{ font-size:
100%;
 CSS Notes
}
h1 { color: red; } h2 { color:
#9000A1; } p{
color:rgb(0, 220, 98); }

}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is heading 1

This is heading 2

This is a paragraph.

2) CSS Font Family

CSS font family can be divided in two types:

o Generic family: It includes Serif, Sans-serif, and Monospace. o Font family: It

specifies the font family name like Arial, New Times Roman etc.

HARSHAN DIGI TECH

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new
roman, Georgia etc.

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters.
Example of Sans-serif: Arial, Verdana etc.

<!DOCTYPE html>
<html>
<head>
<style> body {
font-size: 100%;

}
h1 { font-family: sans-serif; }
h2 { font-family: serif; } p{
font-family: monospace; }

}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

Output:

This heading is shown in sans-serif.

 CSS Notes

This heading is shown in serif.

This paragraph is written in monospace.

3) CSS Font Size

CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

HARSHAN DIGI TECH

 <html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

Output:

This font size is extremely small.

This font size is extra small

This font size is small

This font size is medium.

 CSS Notes
This font size is large.

This font size is extra large.

This font size is

extremely large.
This font size is smaller.

This font size is larger.

This font size is set on 200%.

This font size is 20 pixels.

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique,
or normal.

<!DOCTYPE html>
<html>

HARSHAN DIGI TECH

<head>
<style> body {
font-size: 100%;

}
h2 { font-style: italic; } h3
{ font-style: oblique; } h4
{ font-style: normal; }

}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

Output:

This heading is shown in italic font.

This heading is shown in oblique font.

This heading is shown in normal font.

5) CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It may be normal and
small-caps.
 CSS Notes
<!DOCTYPE html>
<html>
<head> <style> p { font-
variant: small-caps; } h3 {
font-variant: normal; }

</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

Output:

This heading is shown in normal font.

THIS PARAGRAPH IS SHOWN IN SMALL FONT.

6) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a
font is. The possible values of font weight may be normal, bold, bolder, lighter or
number (100, 200..... upto 900).

<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>

HARSHAN DIGI TECH

<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

Output:

This font is bold.

This font is bolder.

This font is lighter.

This font is 100 weight.

This font is 200 weight.

This font is 300 weight.

This font is 400 weight.

This font is 500 weight.

 CSS Notes

This font is 600 weight.

This font is 700 weight.

This font is 800 weight.

This font is 900 weight.

CSS Font-size
The font-size property in CSS is used to specify the height and size of the font. It affects
the size of the text of an element. Its default value is medium and can be applied to
every element. The values of this property include xx-small, small, x-small, etc.

Syntax

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;

The font-size can be relative or absolute.

Absolute-size
It is used to set the text to a definite size. Using absolute-size, it is not possible to
change the size of the text in all browsers. It is advantageous when we know the
physical size of the output.

Relative-size
It is used to set the size of the text relative to its neighboring elements. With relativesize, it
is possible to change the size of the text in browsers.
Font-size with pixels

HARSHAN DIGI TECH

NOTE: If we do not define a font-size, then for the normal text such as paragraphs, the
default size is 16px, which is equal to 1em.

When we set the size of text with pixels, then it provides us the full control over the size
of the text.

Example

<!DOCTYPE html>
<html>
<head>
<style>

#first { font-
size: 40px;

}
#second { font-
size: 20px;

}
</style>
</head>
<body>

<p id="first">This is a paragraph having size 40px.</p>

<p id="second">This is another paragraph having size 20px.</p>

</body>
</html>

Font-size with em
It is used to resize the text. Most of the developers prefer em instead of pixels. It is
recommended by the world wide web consortium (W3C). As stated above, the default
text size in browsers is 16px. So, we can say that the default size of 1em is 16px.

The formula for calculating the size from pixels to em is em = pixels/16.

 CSS Notes
Example
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-size: 2.5em; /* 40px/16=2.5em */
}

#second { font-size: 1.875em; /*

30px/116=1.875em */

#third { font-size: 0.875em; /*

14px/16=0.875em */

}
</style>
</head>
<body>

<p id='first'>First paragraph.</p>

<p id='second'>Second paragraph</p>
<p id='third'>Third Paragraph.</p>
</body>
</html>

Responsive font size

We can set the size of the text by using a vw unit, which stands for the 'viewport width'. The
viewport is the size of the browser window.

1vw = 1% of viewport width.

HARSHAN DIGI TECH

If the width of the viewport is 50cm, then the 1vw is equal to 0.5 cm.

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<p style="font-size:5vw;">First paragraph having the width of 5vw.</p>

<p style="font-size:10vw;">Second paragraph having the width of 10vw.</p>

</body>
</html>

Font-size with the length property

It is used to set the size of the font in length. The length can be in cm, px, pt, etc.

Negative values of length property are not allowed in font-size. Syntax

font-size: length;

Example

<!DOCTYPE html>
<html>
<head>
<style>
.length {
color:red; font-
size: 5cm;

}
</style>
 CSS Notes
</head>

<body>
<h1>font-size property</h1>

<p class = "length">A paragraph having length 5cm.</p>

</body> </html>

CSS font-family
HTML pages' look and formatting are specified using the language known as CSS
(Cascading Style Sheets). The `font-family` property in CSS is used to specify the
preferred font(s) for text content within an HTML element. The 'font-family' property is
broken down into primary and advanced ideas here:

Basics Concepts of Font Family

1. Font Family Name: A font family name may be provided as a string value. For
instance:

body { font-family: Arial,

sans-serif;

The browser will try to utilize the Arial font in this situation. If Arial isn't accessible, a standard
sans-serif font will be used instead.

2. Generic Font Families: When typefaces are unavailable, one might fall back on one
of five generic font families. The following generic families:

o "Serif": Usually utilized in more formal or traditional material. o "Sans-serif":

Frequently utilized for more contemporary and casual material. o "Monospace":

Used to preserve character alignment or show code. o "cursive": Represents

HARSHAN DIGI TECH

 handwriting or typefaces that resemble script. o "Fantasy": This term refers to

decorative or fantasy-style typefaces.

Advanced Concepts of Font Family

1. Font Stacks: If the specified font is unavailable, you may provide alternative font
families. This is known as a font stack. For instance:

h1 { font-family: "Helvetica Neue", Arial, sans-

serif;

In this case, the browser will first attempt to apply the "Helvetica Neue" typeface. As such, it
will try to utilize Arial; if possible, it will turn back on a standard sans-serif font.
2. System Fonts: The system typefaces pre-installed on a user's device may be used
using CSS. You may instruct the browser to use the operating system's default font by
providing the general name of the font family. For instance:

p{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

In this case, the browser will try to utilize the system's default fonts. It will utilize the
Apple system typeface on Apple-branded devices, San Francisco on macOS, and Segoe
UI on Windows.

3. Web Fonts: Custom fonts retrieved from a distant server rather than placed on the
user's device are called web fonts. To import and utilize web fonts in your CSS, use the
'@font-face' rule. For instance:

@font-face { font-family: "MyWebFont";

src: url("my-web-font.woff2") format("woff2");

} h2 { font-family: "MyWebFont", Arial,

sans-serif;

}
 CSS Notes
This example uses the '@font-face' syntax to import the "MyWebFont" web font, which
is subsequently utilized in the 'font-family' property.

These are the fundamental concepts and more complex concepts around the
'fontfamily' property in CSS. One can manage the look and feel of the text on your
websites by using several font families.

Types of a Font Family in CSS

There are five types or classifications of fonts are:

1. Serif Fonts: Serif fonts include little artistic strokes or lines at the extremities of
the letters, referred to as serifs. They are regarded as more formal and
conventional and are often employed for body content in printed products.

Georgia, Times New Roman, and Garamond are a few examples.

2. Sans-serif Fonts: Sans-serif fonts lack serifs and have a more recent, clean look.
They are frequently utilized for screen-based and digital entertainment. Arial,
Helvetica, and Verdana are a few examples.

3. Monospaced Fonts: Equal space is used between each letter in monospaced

fonts, commonly called fixed-width fonts. Every letter takes up the same
proportion of horizontal space as a result. They are often utilized in tabular data,
terminal displays, and coding. Consolas, Monaco, and Courier are a few
examples.

4. Cursive Fonts: Cursive fonts imitate calligraphy or handwriting. They feature

letterforms that flow together and seem handmade. Decorative or personal
touches are often added to designs using cursive fonts, such as Lucida
Handwriting, Zapfino, and Brush Script.

5. Fantasy Fonts: Typefaces with beautiful and inventive flourishes are included in
the category of fantasy fonts. They are frequently utilized for imaginative and
artistic designs like logos, posters, and material with a fantastical theme. Unique
and unusual letterforms may be seen in fantasy typefaces, integrating symbols
or ornate motifs. Chiller, Jokerman, and Ravie are other examples.

HARSHAN DIGI TECH

These five font categories provide a range of styles and traits to accommodate various design
objectives and aesthetics.

CSS Font-Weight Introduction

CSS font weight is a property used in web development to control the thickness and
boldness of text within a webpage. It is used to define the weight of the text. The
available weight depends on the font family used by the browser.

It plays an important role in typography because it gives designers and programmers more
control over how text visually appears and emphasizes text elements.

Purpose of Font-Weight Property

The font-weight property's primary purpose is to set the font's weight, which affects
how thick or thin the characters appear on the screen or in print. It is a flexible tool for
text formatting because it provides a range of values to manage the boldness level.
Depending on the web browser's font family, several font-weight values can be
accessible. Different font families have predefined font weights of their own, and
although some may offer a greater range of alternatives, others may offer a few options.

PauseNext
Mute

Current Time 0:00

Duration 18:10
Loaded: 0.37%
Â
Fullscreen

NOTE: Together with other CSS properties like font size, font family, and font style, the
font-weight property is frequently used to provide consistent text design throughout an
entire website.
Syntax and Property Values

The CSS font-weight property contains various property values for controlling the weight and
boldness of text and adheres to a specified syntax.
 CSS Notes
Syntax:

1. font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset; Property

Values:

o Normal: It is the default font weight whose numeric value is 400. It refers to the
standard weight for the selected font family.

o Lighter: It considers the existing font weight of the font family and makes the
font weight lighter than the parent element. Compared to the font weight of the
parent element, the font weight is lighter when the lighter value is used.

o Bolder:Contrarily, the bolder value makes the font weight heavier than the
parent element's font weight. It considers the existing font weight of the font
family and makes the font-weight heavier compared to the parent element.

o Bold: As its name implies, it defines the bold font weight, and its numeric value
is 700.
o Number: It sets the font weight based on the specified number. Its range can be
between 1 to 1000.

o Initial: It is used to set the font weight to its default value.

o Inherit: Using the inherent value, the font weight may inherit from its parent
element. It can be helpful when you want an element's font weight to match its
parent's.

o Unset: The unset value returns the font weight to its default normal or natural
value setting based on inheritance rules.

How to Use Font Weight in CSS

1. Applying font weight to Elements:

Specific HTML elements can have the font-weight attribute applied in CSS to modify
the text's weight and boldness. Doing so allows you to create various text styles and

HARSHAN DIGI TECH

highlight particular passages of your information. Example 1: Font weight for
Paragraphs

p{
font-weight: normal; /* Sets the font weight to normal for all paragraphs */
}

In the example above, the default font weight, which is normal (often 400), will be used

for all paragraphs (<p>) within the HTML content. Example 2: Making Headings Bold

h1, h2, h3 { font-weight: bold; /* Sets the font weight to bold for h1, h2, and h3
headings */

This CSS rule sets the <h1>, <h2>, and <h3> elements' font-weight bold (often 700), causing
these headings to be displayed boldly.

Example 3: Custom Font Weight for Specific Class

.my-custom-text { font-weight: 600; /* Sets the font weight for elements

with class "my-customtext" */
}
In this case, the font weight will be 600, providing a medium weight text style. Example

4: font-weight with Other Properties

h4 { font-weight: 500; /* Sets the font weight to 500 for h4 headings

*/ font-size: 24px; /* Sets the font size to 24 pixels for h4 headings */
font-family: "Helvetica Neue", Arial, sans-serif; /* Applies a specific
fontfamily to h4 headings */

/* Other CSS properties can also be combined here for comprehensive text styling *
/
}

The font weight, font size, and font-family properties are used in this example to style
the h4> headers. For the chosen elements, this develops a unified and consistent
typographic style.

2. Setting Global Font Weight:

When using CSS, you can target the body selector to apply a global font weight to the
entire document or just a portion. All web page text can have a uniform font weight
by applying the font-weight property to the body element.

This strategy can be helpful when you want to keep your website's visual design
consistent throughout.

Example 1:

body { font-weight: 400; /* sets the document's overall font-weight to

400. */

This example applies the font-weight attribute to the body selector with a value of 400,
which stands for the standard (normal) font weight. This will guarantee that the font
weight of every text element inside the <body> tag is consistent and proper.

HARSHAN DIGI TECH

}
Example 2: Combining Global Font Weight with Other Selectors:

body { font-weight: 400; /* Sets the font weight to 400 for the entire
document */ h1 { font-weight: 700; /* Sets the font weight to 700 for all
h1 headings */

} p{ font-weight: 300; /* Sets the font weight to 300 for all

paragraphs */

This example uses a global font weight for the entire document while applying various
font weights to specific HTML components. The rest of the content will use the global
font weight (400), with the headers (<h1>) having a bold font weight of 700 and the
paragraphs (<p>) having a softer font-weight of 300.

ADVERTISEMENT

Therefore, you can manage the overall appearance of text on your website by utilizing
the body selector to establish a universal font weight.

3. Combining with Other Properties:

CSS's font-weight property can be used with other text-related properties to produce

comprehensive and aesthetically pleasing typography. Example 1: Combining with

font-family

p{
font-weight: 300; /*font-weight 300 for paragraphs */ font-family:
"Helvetica Neue", Arial, sans-serif; /* Applies a specific fontfamily to
paragraphs */

}
}
Here, all paragraphs (<p>) are given a custom font weight of 300 (a lighter style).
Furthermore, we designate a specific font family for paragraphs, which will impact the
font weight and overall look of the text. Example 2: Combining with font-size

h2 { font-weight: 600; /* font-weight 600 for h2

headings */ font-size: 28px; /* font size 28 pixels for h2
headings */ This illustration combines the font weight
and size for <h2> headings. The font size is 28 pixels,
with a 600 (medium-bold style) font weight. You may
produce visually striking and captivating headlines with
this combo. Example 3: Combining with line-height

blockquote { font-weight: bold; /* font-weight - bold for blockquotes */ line-

height: 1.5; /* Sets the line height to 1.5 times the font size for blockquotes */

For blockquotes in this illustration, the font-weight property is set to bold. In addition,

the line height property is changed to 1.5 times the font size. Example 4: Combining

with text-decoration

a{
font-weight: 500; /* font-weight 500 for anchor links */ text-
decoration: underline; /* Underlines anchor links */

For anchor links (<a>), we have specified a custom font weight of 500. The anchor links
are also underlined using the text-decoration attribute, helping them stand out and
be easier to recognize.

Best Practices for Using Font-Weight in CSS

Accessibility Considerations:

HARSHAN DIGI TECH

}
It is crucial to take accessibility into account when using the font-weight property in
CSS to make sure that your text is accessible and useable for all users, including those
who have visual impairments.

Here are some key considerations:

o Readability and Contrast: Ensure the text and background have

enough contrast. For individuals with limited vision or color blindness,
choosing a font weight that offers sufficient contrast makes it easier
for them to recognize the text.
 o Refrain from Overusing Bold Text: Bold text can emphasize a point but use it
sparingly because it might make writing harder to read. Users may become
overwhelmed by too much bold writing, which makes it difficult to spot the most
crucial information.

o Semantic Meaning: Using font weight to communicate the content's semantic

meaning. For instance, headings should be in a different font style than the body
text (such as bold) to indicate their prominence in the hierarchy.

o Responsive Design: Take into account adjusting font weight for various screen
sizes. Ensure that the font-weight scales correctly for different viewports. What
may be readable on a wide screen may be difficult to read on smaller devices.

o User Preferences: Comply with the user's operating system or browser

preferences. Your website should adjust to any user preferences for particular
font weights.

o Test with Screen Readers: Test your website using screen readers to make sure
that visitors who are blind can distinguish between different font weights. It's
crucial to ensure that the desired emphasis is properly communicated because
screen readers frequently announce the bold text. o Font Pairing: Pay attention
to font pairings when using various font weights. Readability may need to be
improved by some font choices that conflict or produce distracting visual
patterns.

o WCAG Guidelines: Learn about the WCAG or Web Content Accessibility

Guidelines. These recommendations cover every aspect of how to make web
material accessible to everyone, including those with disabilities.

Examples

Let's see an example of CSS font weight Using property values:

<!DOCTYPE html>
<html>
<head>

HARSHAN DIGI TECH

 <title> font-weight property </title>
<style> body{
font-family: sans-serif;

}
p.one{
font-weight: normal;
}
p.two{ font-
weight: lighter;

p.three{ font-
weight: bolder;

p.four{ font-
weight: bold;

p.five{ font-
weight: 1000;

p.six{ font-
weight: initial;

}
p.seven{ font-
weight: inherit;

}
p.eight{ font-
weight: unset;
 }

</style>
</head>
<body> <p
class="one"> normal
property value </p>
<p class="two">
lighter property value

</p>

<p class="three">
bolder property value

</p>
<p class="four">
bold property value

</p>
<p class="five">
number property value

</p>

<p class="six">
initial property value

</p>
<p class="seven">
inherit property value

</p>
<p class="eight">
unset property value

</p>

HARSHAN DIGI TECH

</body>
</html>

CSS font-stretch property

The font-stretch property in CSS allows us to select a normal, expanded, or
condensed face from the font's family. This property sets the text wider or narrower
compare to the default width of the font. It will not work on any font but only works on
the font-family that has a width-variant face.

This CSS property only works for the fonts with additional faces like expanded and
condensed faces; otherwise, it will be affectless for the fonts that don't have condensed
or expanded faces.

The nine keyword values for choosing the width of the font-face are given in the following
syntax.

Syntax
font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-
condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Property Values

The property values of this CSS property are tabulated as follows:

Let's understand the above property values by using an example.

Example

<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>

HARSHAN DIGI TECH

<style> body{
text-align: center;

} div{ font-family: Arial, Helvetica,

sans-serif; font-size: 20px; color: blue;

}
.normal { font-stretch:
normal;

}
.semi-condensed { font-stretch:
semi-condensed;

}
.condensed { font-stretch:
condensed;

}
.extra-condensed { font-stretch:
extra-condensed;

}
.ultra-condensed { font-stretch:
ultra-condensed;

.semi-expanded { font-stretch:
semi-expanded;

.expanded { font-stretch:
expanded;

}
.extra-expanded {
font-stretch: extra-expanded;
}

.ultra-expanded { font-stretch:
ultra-expanded;

}
</style>
</head>

<body>
<h1> Example of the font-stretch property </h1>
<div class = "normal">
normal </div>

<div class = "semi-condensed"> semi-condensed

</div>
<div class = "condensed"> condensed

</div>

<div class = "extra-condensed"> extra-condensed

</div>

<div class = "ultra-condensed"> ultra-condensed

</div>
<div class = "semi-expanded"> semi-expanded

</div>

<div class = "expanded"> expanded

</div>

<div class = "extra-expanded"> extra-expanded

HARSHAN DIGI TECH

</div>

<div class = "ultra-expanded">

ultra-expanded </div>

</body>

</html>

Output

CSS Icons
Introduction
With the help of CSS icons, we can add icons to the HTML page from the icon library.
All the icons available in the icon library can be formatted using the CSS properties. We
can customize the icon based on size, color, shadow, etc. We can graphically represent
the icons used in size, color, shadow, etc. There are three types of icons available on
the internet. These are as follows.

o Font Awesome Icons o Google Icons o Bootstrap Icons

We required the CDN link to make all the icons on the webpage. We can also customize
the predefined icons with the help of CSS.
Approach
To use the icons first, we must link the CDN link inside the <head> tag. To achieve this,
we have to follow the below steps.

o First, we have to add the name of the icon of the class in the HTML element. o

We can add the icons with the help of <i> and <span> elements.

o Then, we need all the icons to be customized with the required CSS
properties, such as size, color, shadow, etc.

Method 1: Font Awesome Icons

When there is a need for awesome icons, we must add the link below inside the <head> tag.

<link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/fontawesome.min.css">

We must follow the syntax below when adding icons to the web page.

Syntax:
<i class="fa fa-cloud"></i>

Example 1:

In the below example, we use the font property with each icon class & whose value is set
to 32px.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HARSHAN DIGI TECH

<title>Document</title> <link rel= "stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/fontawesome.min.css"> <style> .custom-icon {
font-size: 32px; color: #007bff; margin: 10px;

.custom-icon:hover {
color: #ff0000; cursor:
pointer;

}
</style>
</head>
<body>
<h1>Welcome To javaTpoint</h1>
<i class="fa fa-cloud custom-icon"></i>
<i class="fa fa-heart custom-icon"></i>
<i class="fa fa-file custom-icon"></i>
<i class="fa fa-car custom-icon"></i>
<i class="fa fa-bars custom-icon"></i>

<i class="fa fa-globe custom-icon"></i>

<i class="fa fa-sun custom-icon"></i>
<i class="fa fa-moon custom-icon"></i>
</body>
</html> Output:
Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <link rel= "stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/fontawesome.min.css"> <style>

.custom-icon { margin: 10px; /* Add some margin

between icons */ cursor: pointer; /* Add a pointer
cursor on hover */

.red-icon {
color: red;

.blue-icon {
color: blue;
}

.green-icon {
color: green;

HARSHAN DIGI TECH

 </style>
</head>
<body>
<h1> Welcome to DigiTech </h1>
<i class="fa fa-heart custom-icon red-icon" style="font-size: 28px;"></i>
<i class="fa fa-heart custom-icon blue-icon" style="font-size: 30px;"></i>
<i class="fa fa-heart custom-icon red-icon" style="font-size: 32px;"></i>

<i class="fa fa-heart custom-icon blue-icon" style="font-size: 34px;"></i>

<i class="fa fa-heart custom-icon red-icon" style="font-size: 36px;"></i>
<i class="fa fa-star custom-icon red-icon" style="font-size: 28px;"></i>
<i class="fa fa-star custom-icon blue-icon" style="font-size: 30px;"></i>
<i class="fa fa-star custom-icon green-icon" style="font-size: 32px;"></i>

<i class="fa fa-star custom-icon red-icon" style="font-size: 34px;"></i>

<i class="fa fa-star custom-icon blue-icon" style="font-size: 36px;"></i>
</body>
</html> Output:

Method 2: Google Icons

We can also insert the Google icons in our HTML web page. To do this, we have to insert the
following code inside the head tag of our HTML code.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Ico
ns">

Syntax:

We must follow the syntax below to import the Google icon into our webpage.
<i class="material-icons">cloud</i>

Example 3:

In the below example, we will see the implementation of the "material-icons" class with the
required icon.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <link rel= "stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">

<style> .custom-icon { font-size: 32px;

color: #007bff; /* Custom color (blue) */ margin:
10px; /* Add some margin between icons */

.custom-icon:hover { color: #ff0000; /* Change

color on hover (red) */ cursor: pointer; /* Add a
pointer cursor on hover */

}
</style>
</head>
<body>
<h1> Welcome to DigiTech </h1>
<i class="material-icons custom-icon">cloud</i>
<i class="material-icons custom-icon">favorite</i>
<i class="material-icons custom-icon">attachment</i>
<i class="material-icons custom-icon">computer</i>

HARSHAN DIGI TECH

 <i class="material-icons custom-icon">traffic</i>

<i class="material-icons custom-icon">home</i>

<i class="material-icons custom-icon">beach_access</i>
<i class="material-icons custom-icon">flight</i>
<i class="material-icons custom-icon">local_cafe</i>
<i class="material-icons custom-icon">movie</i>
</body>
</html> Output:

Example 4:

In the below code, we will see the implementation of the "material-icons" class with the
cloud shape.

ADVERTISEMENT

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel= "stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <style>
.custom-icon { margin: 10px; /* Add some margin
between icons */ cursor: pointer; /* Add a pointer
cursor on hover */

.red-icon {
color: red;

.blue-icon {
color: blue;

.green-icon {
color: green;

}
</style>
</head>
<body>
<h1> Welcome to DigiTech </h1>
<i class="material-icons custom-icon red-icon" style="font-size: 30px;">cloud</i>
<i class="material-icons custom-icon blue-icon" style="font-size: 40px;">cloud</i>
<i class="material-icons custom-icon green-icon" style="font-size: 50px;">cloud</i>
<i class="material-icons custom-icon red-icon" style="font-size: 60px;">cloud</i>
<i class="material-icons custom-icon blue-icon" style="font-size: 70px;">cloud</i>
<i class="material-icons custom-icon red-icon" style="font-size: 35px;">favorite</i>
<i class="material-icons custom-icon blue-icon" style="font-size: 45px;">favorite</i>
<i class="material-icons custom-icon green-icon" style="fontsize:
55px;">favorite</i>

HARSHAN DIGI TECH

<i class="material-icons custom-icon red-icon" style="font-size: 65px;">favorite</i>
<i class="material-icons custom-icon blue-icon" style="font-size: 75px;">favorite</i>
</body>
</html>

Output:

Method 3: Bootstrap Icons

We must link the link inside the <head> tag to use the bootstrap icon.

<link rel= "stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Example 5:

In the below example, we have implemented the font-size property and all the glyph icon
class & all the value is set to different numbers.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <link rel= "stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css"> <style> .custom-icon { font-size: 32px;
color: #007bff; /* Custom color (blue) */ margin:
10px; /* Add some margin between icons */

.custom-icon:hover { color: #ff0000; /* Change

color on hover (red) */ cursor: pointer; /* Add a
pointer cursor on hover */ }

</style>
</head>
<body>
<h1>Welcome to DigiTech</h1>
<i class="glyphicon glyphicon-cloud custom-icon"></i>
<i class="glyphicon glyphicon-user custom-icon"></i>
<i class="glyphicon glyphicon-thumbs-up custom-icon"></i>
<i class="glyphicon glyphicon-remove custom-icon"></i>
<i class="glyphicon glyphicon-envelope custom-icon"></i>

<i class="glyphicon glyphicon-star custom-icon"></i>

<i class="glyphicon glyphicon-thumbs-down custom-icon"></i>
<i class="glyphicon glyphicon-ok custom-icon"></i>
<i class="glyphicon glyphicon-heart custom-icon"></i>
<i class="glyphicon glyphicon-plane custom-icon"></i>
</body>
</html>

HARSHAN DIGI TECH

Output:

CSS Images
Images are an important part of any web application. Including a lot of images in a web
application is generally not recommended, but it is important to use the images
wherever they required. CSS helps us to control the display of images in web
applications.

The styling of an image in CSS is similar to the styling of an element by using the
borders and margins. There are multiple CSS properties such as
border property, height property, width property, etc. that helps us to style an image.

Let's discuss the styling of images in CSS by using some illustrations.

Thumbnail Image
The border property is used to make a thumbnail image.

Example

<!DOCTYPE html>
<html>
<head>
<style> img{
border: 2px solid red;
border-radius:5px;
padding:10px;

}
h2{ color:red;

}
</style>
</head>
<body>
<h1>Thumbnail Image</h1>
<img src="tp.png"></img>
<h2> Welcome to Digitech </h2>
</body>
</html>

Transparent image
To make an image transparent, we have to use the opacity property. The value of this
property lies between 0.0 to 1.0, respectively.

Example

<!DOCTYPE html>
<html>
<head>
<style> img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;

}
h2{ color:red;

}
</style>
</head>

<body>
<h1>Transparent Image</h1>
<img src="jp.png"></img>
<h2> Welcome to Digitech </h2>
</body>

HARSHAN DIGI TECH

</html>

Rounded image
The border-radius property sets the radius of the bordered image. It is used to create the
rounded images. The possible values for the rounded corners are given as follows:

o border-radius: It sets all of the four border-radius property.

o border-top-right-radius: It sets the border of the top-right corner. o border-top-

left-radius: It sets the border of the top-left corner. o border-bottom-right-radius:

It sets the border of the bottom-right corner.

o border-bottom-left-radius: It sets the border of the bottom-left corner.

Example

<!DOCTYPE html>
<html>
<head>
<style> #img1{
border: 2px solid green;
border-radius:10px;
padding:5px;

}
#img2{ border: 2px
solid green; border-
radius:50%;
padding:5px;

h2{ color:red;

}
</style>
</head>

<body>
<h1>Rounded Image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>

<h1>Circle Image</h1>
<img src="p.png" id="img2"></img>
<h2> Welcome to Digitech </h2>
</body>
</html>

Responsive Image
It automatically adjusts to fit on the screen size. It is used to adjust the image to the specified
box automatically.

Example

<!DOCTYPE html>
<html>
<head>
<style> #img1{
max-width:100%;
height:auto;

}
h2{ color:red;

}
</style>
</head>

<body>

HARSHAN DIGI TECH

 <h1>Responsive image</h1>
<h2>You can resize the browser to see the effect</h2>
<img src="dtp.png" id="img1" width="1000" height="300"></img>
<h2> Welcome to Digitech </h2>
</body>
</html>

Center an Image
We can center an image by using the left-margin and right-margin property. We have to
set these properties to auto in order to make a block element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#img1{ margin-
left:auto; margin-
right:auto;
display:block;

}
h1,h2{ text-align:center;

}
</style>
</head>

<body>
<h1>Center image</h1>
<img src="dp.png" id="img1"></img>
<h2>Welcome to Digitech</h2>
</body>
</html>

CSS Important
This property in CSS is used to give more importance compare to normal property. The
!important means 'this is important'. This rule provides a way of making the Cascade
in CSS.

If we apply this property to the text, then the priority of that text is higher than other
priorities. It is to be recommended not to use this CSS property into your program until
it is highly required. It is because the more use of this property will cause a lot of
unexpected behavior.

If a rule is defined with this attribute, it will reject the normal concern in which the later
used rule overrides the previous ones. If we use more than one declaration marked
!important, then the normal cascade takes it over again. That means the new marked
!important will replace the previous one.

It increases the priority of the CSS property and ignores the overriding properties.

Syntax

element { font-size: 14px

!important; color: blue
!important;

... }

Example

Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color:
white ;

HARSHAN DIGI TECH

 }
H1 { color:blue
!important;

}
body {
background-
color:lightblue
!important;
text-
align:center;
background-
color:yellow;

}
</style>
</head>
<body>
<h1>Hello World.</h1>
<h1>Welcome to the digitech. This is an example of <i>!important</i> proper
ty.</h1> <p></p>

</body>
</html>

In the above example, we can see that instead of pink, the background color of the
body is light blue because, in the body tag, the !important is applied after the light
blue background color.

Let's take another example of this property to understand it more clearly.

Example

In this example, we are applying the !important attribute on the border of the text. The
color of the border of h1 heading will remain red despite of other declarations. The
color and border-color of heading h2 will remain green and violet despite of other
declarations.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> body{
text-align: center;

}
h1 { border-color: red
!important; border: 5px
green solid; border-color:
black;
}
h2{ color: green !important;
color: red; border-color:violet
!important; border: 5px green
solid;

}
</style>
</head>
<body>

<h1>Hello World :) :)</h1>

<h2>Welcome to the digitech</h2>

</body>
</html>

HARSHAN DIGI TECH

CSS Line Height
The CSS line height property is used to define the minimal height of line boxes within the
element. It sets the differences between two lines of your content.

It defines the amount of space above and below inline elements. It allows you to set the
height of a line of independently from the font size.

CSS line-height values

There are some property values which are used with CSS line-height property.

value description

normal This is a default value. it specifies a normal line height.

number It specifies a number that is multiplied with the current font size to set the
line height.

length It is used to set the line height in px, pt,cm,etc.

% It specifies the line height in percent of the current font.

initial It sets this property to its default value.

inherit It inherits this property from its parent element.

CSS line-height example

<!DOCTYPE html>
<html>
<head> <style>
h3.small { line-
height: 70%;

}
h3.big { line-
height: 200%;

}
</style>
</head>
<body>
<h3>
This is a heading with a standard line-height.<br>
This is a heading with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</h3>
<h3 class="small">
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
</h3>
<h3 class="big">
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
</h3>
</body>
</html>

CSS List Styles

The List in CSS determines how the contents or items are listed in a certain fashion, i.e.,
they can be arranged either neatly or randomly, which aids in creating a clean webpage.
Because they are adaptable and simple to handle, they may be used to organize large

HARSHAN DIGI TECH

amounts of material. The list's default style is borderless. The list may be divided into
two categories:

1. Unordered List: By default, the list elements in unordered lists are denoted with
bullets, which are tiny black circles.

2. Ordered List: The list elements in ordered lists are identified by numbers and letters.

The following CSS list properties are available for usage in controlling the CSS lists:

ADVERTISEMENT

o List-style-type:This property is used to determine the look of the list item marker,
such as a disc, character, or custom counter style.

o List-style-image: The pictures that will serve as list item markers may be specified
using this parameter.

o List-style-position: It describes where the marker box should be about the main
block box. o List-style: The list style is configured with this attribute.

We shall now learn more about these characteristics through examples.

List-style-type property

The default list type of marker may be changed to a variety of other types, including
square, circle, Roman numerals, Latin letters, and many more. The entries in an
unordered list are denoted by round bullets (•), while the items in an ordered list are
numbered by default using Arabic numerals (1, 2, 3, etc.).

PlayNext
Mute

Current Time 0:00

/
Duration 18:10
Loaded: 2.94%
Â
Fullscreen
ADVERTISEMENT
 The markings or bullets will be removed if we set their value to none.

Syntax:

list-style-type:value;

We may use the value as follows:

1. circle

2. decimal, e.g.:1,2,3, etc

3. decimal-leading-zeroes , eg :01,02,03,04,etc

4. lower-roman

5. upper-roman

6. lower-alpha, e.g., a,b,c, etc

7. upper-alpha, e.g., A, B, C, etc

8. square

Note: The default padding and margin are also included in the list. It is necessary to add
padding:0 and margin:0 to the <ol> and <ul> tags to eliminate this.

Example

This example shows a CSS List with several list-style types and values set to square and upper-
alpha and many.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Example for CSS Lists</title>
5. <style>
6. .num{
7. list-style-type:decimal;
8. }
9. .alpha{

HARSHAN DIGI TECH

10. list-style-type:upper-alpha;
11. }
12.
13. .circle{
14. list-style-type:circle;
15. }
16. .square{
17. list-style-type:square;
18. }
19. .disc{
20. list-style-type:disc;
21. }
22. </style>
23. </head>
24. <body>
25. <h1>
26. Welcome to the course
27. </h1>
28. <h2>
29. Ordered Lists
30. </h2>
31. <ol class="num">
32. <li>one</li>
33. <li>two</li>
34. <li>three</li>
35. </ol>
36. <ol class="alpha">
37. <li>one</li>
38. <li>two</li>
39. <li>three</li>
40. </ol>
41.
42. <h2>
43. Unordered lists
44. </h2>
45. <ul class="circle">
46. <li>one</li>
47. <li>two</li>
48. <li>three</li>
49. </ul>
50. <ul class="disc">
51. <li>one</li>
52. <li>two</li> 53. <li>three</li>

54.
55. </body>
56. </html>

Output

HARSHAN DIGI TECH

 List-style-position property

It indicates whether the marker appears within or outside of the box holding the bullet points.
It has two values in it.

o Inside: This indicates that the list item will contain the bullet points. If the text in
this extends to the second line, it will wrap beneath the marker.

o Outside: It indicates that the list item's bullet points will be outside of it. It is a
default value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS Lists</title>
5. <style>
6. .num{
7. list-style-type:decimal;
8. list-style-position:inside;
9. }
10. .roman{
11. list-style-type:upper-roman;
12. list-style-position:outside;
13. }
14. .circle{
15. list-style-type:circle;
16. list-style-position:inside;
17. }
18. .disc{
19. list-style-type:disc;
20. list-style-position:inside;
21. }

HARSHAN DIGI TECH

22. .square{
23. list-style-type:square;
24. list-style-position:inside;
25. }
26. </style>
27. </head>
28. <body>
29. <h1>
30. Welcome to the Course
31. </h1>
32. <h2>
33. Ordered Lists
34. </h2>
35. <ol class="num">
36. <li>INSIDE</li>
37. <li>two</li>
38. <li>three</li>
39. </ol>
40. <ol class="roman">
41. <li>OUTSIDE</li>
42. <li>two</li>
43. <li>three</li>
44. </ol>
45. <h2>
46. Unordered lists
47. </h2>
48. <ul class="circle">
49. <li>INSIDE</li>
50. <li>two</li>
51. <li>three</li>
52. </ul>
53. <ul class="disc">
54. <li>INSIDE</li>
55. <li>two</li>
56. <li>three</li>
57. </ul>
58. <ul class="square">
59. <li>DEFAULT</li>
60. <li>two</li>
61. <li>three</li>
62. </ul>
63. </body>
64. </html>
Output

HARSHAN DIGI TECH

 List Styling

The list may be styled using CSS. The lists can have custom backgrounds, padding, borders,
and colors.

The different stylistic properties are applied to the element in the CSS List described in
this example.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <style>
6. ul.main {
7. list-style: circle;
8. background: lightblue;
9. padding: 30px;
10. width: 70px
11. }
12. </style> 13. </head>

14.
15. <body>
16. <h2>
17. Welcome
18. </h2>
19. <p> Unordered lists </p>
20. <ul class="main">
21. <li>one</li>
22. <li>two</li>
23. <li>three</li>
24. </ul> 25. </body>

26.

HARSHAN DIGI TECH

27. </html>

Output
HARSHAN DIGI TECH
 Lists styled with colour

We may decorate lists with colors to make them more visually appealing and engaging.
Anything added to the <ul> or <ol> tags will affect the whole list. However, anything
added to a specific <li> tag will only affect that list's items.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Example for CSS Lists</title>
5. <style>
6. .order{
7. list-style: lower-alpha;
8. background: lightblue;
9. padding:20px;
10. width: 90px;
11. }
12. .order li{
13. background: pink;
14. padding: 20px;
15. font-size:10px;
16. margin:10px;
17. }
18. .unorder{
19. list-style: circle inside;
20. background: lightblue;
21. padding:20px;
22. width: 90px;
23. }
24. .unorder li{
25. background: pink;
26. color:black;
27. padding:10px;
28. font-size:10px;
29. margin:10px;
30. }
31.
32. </style>
33. </head>
34. <body>
35. <h1>
36. Welcome to the course
37. </h1>
38. <h2>
39. Ordered Lists
40. </h2>
41. <ol class="order">
42. <li>ONE</li>
43. <li>TWO</li>
44. </ol>
45. <h2>
46. Unordered lists
47. </h2>
48. <ul class="unorder">
49. <li>ONE</li>
50. <li>TWO</li>
51. </ul>
52.
53. </body>
54. </html>

Output

HARSHAN DIGI TECH

CSS Margin
CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the
element.

Top, bottom, left and right margin can be changed independently using separate
properties. You can also change all properties at once by using shorthand margin
property.

There are following CSS margin properties:

CSS Margin Properties

Property Description

margin This property is used to set all the properties in one declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

 margin-bottom It is used to set bottom margin of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.

It is used to define a margin in percent of the width of containing

%
element.

inherit It is used to inherit margin from parent element.

Note: You can also use negative values to overlap content.

CSS margin Example

You can define different margin for different sides for an element.

<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:
pink;

}
p.ex { margin-top:
50px; margin-bottom:
50px; margin-right:

HARSHAN DIGI TECH

100px; margin-left:
100px;

}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

Margin: Shorthand Property

CSS shorthand property is used to shorten the code. It specifies all the margin properties in
one property.
There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;

2. margin: 50px 100px 150px;

3. margin: 50px 100px;

4. margin 50px;

1) margin: 50px 100px 150px 200px;

It identifies that:
top margin value is 50px right

margin value is 100px bottom

margin value is 150px left

margin value is 200px

<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:
pink;

}
p.ex { margin: 50px 100px 150px
200px;

}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body> </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

HARSHAN DIGI TECH

2) margin: 50px 100px 150px;

It identifies that:

top margin value is 50px left and right

margin values are 100px bottom

margin value is 150px

<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:
pink;

}
p.ex { margin: 50px 100px
150px;

}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>

</html> Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

3) margin: 50px 100px;

It identifies that:

top and bottom margin values are 50px left

and right margin values are 100px

<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:
pink;

}
p.ex { margin: 50px
100px;

}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>

</html> Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

HARSHAN DIGI TECH

4) margin: 50px;

It identifies that:

top right bottom and left margin values are 50px

<!DOCTYPE html>
<html>
<head>
<style>
p{ background-color:
pink;

}
p.ex { margin:
50px;

}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body> </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

CSS Media Query
Introduction
With the help of media in CSS, we can use media queries to apply different styles for
different devices. With the help of a media query, we can also check the device's height,
width, resolution, and orientation (Portrait/Landscape).

The main aim of the CSS rule is to make the webpage more responsive to deliver the
optimized design for the different screen sizes. With the help of media queries, we can
also specify the style for the screen readers.

Syntax:

We can write the media query with the help of the below syntax.

@media not|only media type and (media feature and|or|not media feature)
{
// CSS Property
}

Used Keywords
Below are some keywords that will be used while writing the media queries. These are as
follows.

o Note: With the help of this keyword, we can revert the entire media query.

o Only: With the help of this keyword, we can prevent the old browser from applying
the style property.

o And: With the help of this keyword, we can combine two media features and media
queries.

Media Types
There are different types of media available in the media query. These are as follows.

HARSHAN DIGI TECH

 o All: It is the default value for the media type. We can use this for all types of devices.

o Print: We can use this for printer devices. o Screen: We can use this for the mobile or

computer screen type, etc. o Speech: We can use this for the screen reader, which is

used to read the screen.

Media Features
Many features are being used for the media query. These are as follows. o

Any hover:

With the help of this, the user can hover over any element. o

Any-pointer:

With the help of this feature, we can perform a mechanism that is used for pointing

devices. o Any-ratio:

With the help of this, we can set the ratio between the width and height of the screen's
viewport.

o Color:

With the help of this, we can set the color for all the components of the output device.

o Color-gamut:

With the help of this, we can set the range for the color component that the output

devices or user agent supports. o Color-index:

With the help of this, we can set the number of colors to display to the user. o

Grid:

With the help of this, we can specify the number of rows and columns to be displayed on
the web page.

o Height:

With the help of this, we can set the height of the viewport which is going to be displayed on
the webpage.
o Hover:

With the help of this, the user can hover over any element. o

Inverted colors:

With the help of this, we can define the inverted colors for any of the devices. o

Light level:

With the help of this, we can define the level of the lights. o

max-aspect-ratio:

With this help, we can set the maximum height and width for displaying the viewport on
the web page.

o Max-color:

With the help of this, we can define the number of bits per color component that will

be displayed on the webpage. o max-color-index:

HARSHAN DIGI TECH

With the help of this, we can define a maximum number of colors that the output devices can
display.

o Max-height:

With the help of this, we can set the maximum height for the display area of the browser.

o Max-monochrome:

With the help of this, we can define the maximum number of bits per color for the
monochrome devices.

o Max-resolution:

With the help of this, we can specify the maximum resolution to be displayed in the output
devices.

o Max-width:
With the help of this, we can set the maximum width for the display area of the browser.

o min-aspect-ratio:

With this help, we can set the minimum height and width for displaying the viewport on
the web page.

o Min-color:

With the help of this, we can define the minimum number of bits per color

component that will be displayed on the webpage. o min-color-index:

With the help of this, we can define a minimum number of colors that the output devices can
display.

o Min-height:

With the help of this, we can set the minimum height for the display area of the

browser. o Min-resolution:
With the help of this, we can specify the minimum resolution to be displayed in the output
devices.

o Min-width:

With the help of this, we can set the minimum width for the display area of the browser.

o Monochrome:

With the help of this, we can provide the number of bits to display on the

monochrome devices. o Orientation:

With the help of this, we can set the viewport that it is going to display in landscape

mode or portrait mode. o Overflow-block:

With the help of this, we can control the situation when the content overflows the

viewport. o Overflow-inline:

With the help of this, we can control the situation when the content with an inline axis

overflows the viewport, o Pointer:

With the help of this, we can create the primary input mechanism for a pointing device.

o Resolution:

With the help of this, we can set the resolution for the devices by taking the help of dpi or
PCM.

o Scan:

With the help of this, we can perform the scanning process for the devices. o

Update:

HARSHAN DIGI TECH

With the help of this, we can perform the updation of output devices. o

Width:

With the help of this, we can set the width of the viewpoint.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;

.content { padding: 20px; text-

align: center; color: #fff; /*
Default text color */

/* Media query for screens larger than 768 pixels */

@media screen and (min-width: 769px) { body { background-color:
#3498db; /* Blue background for larger screens */

.content { background-color: #2980b9; /* Blue background for

larger screens */
 }
}

/* Media query for screens smaller than or equal to 768 pixels */

@media screen and (max-width: 768px) { body { background-color:
#e74c3c; /* Red background for smaller screens */

.content { background-color: #c0392b; /* Red background for

smaller screens */

}
}

</style>
</head>

<body>
<div class="content">
<h1>Hello, Media Query Example!</h1>
<p>This is an example of how to use @media rules to apply different styles based on
screen size.</p>
</div>

</body>
</html>

Output:

When the screen resolution is more than 764 px, the webpage looks like below.

HARSHAN DIGI TECH

When the screen resolution is less than 764 px, the webpage looks like below.
CSS Navigation Bar
What is a CSS Navigation Bar?
In CSS, a navigation bar is, also known as a navbar used in an interface to provide
navigation links or menus to various selectors or page users in website design. Users
can easily navigate a website's content using it as a visual guide.

With the help of a navigation bar, we can improve the presentation and styling of a
web page, and it also includes the design, colors, fonts, and spacing described using
CSS. A CSS navigation bar is developed and styled using CSS properties and rules to
produce a particular appearance and functionality.

Characteristics of CSS Navigation Bar

Some characteristics of the navigation bar are as follows:

o Layout Options: In CSS, a navigation bar can be positioned either vertically

along the side of a web page or we can position horizontally across the top.

o Links for navigation: The menu contains links to the site's various pages and
sections. These links frequently have button, text, or icon styling.

o Dropdown Menus: Dropdown menus are another feature that can be added to
navigation bars. Additional links or options are displayed when a user hovers
over or selects a menu item.

o Style: CSS lets designers alter the navigation bar's visual elements, such as
colors, fonts, borders, and hover effects. This aids in producing a unified and
visually appealing design that blends with the website's overall aesthetic.

o Responsive design: Modern navigation bars are frequently responsively

designed, which adjust to various screen sizes and devices. With the help of
responsive design, we can guarantee that the navigation will continue to be
attractive and pleasing on desktop and mobile devices.

HARSHAN DIGI TECH

 o Interaction: with the help of CSS, we can also be used to add interactive effects
to navigation elements, such as changing the link color when it is clicked, or it
can also show the highlight effect when it is hovered over.

With the help of a CSS navigation bar, we can enhance the user experience and make it
simple for visitors to navigate a website's content, so it is a crucial part of web design.

Example
Let's take a simple example of how we can create a horizontal navigation bar using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for the navigation bar */
.navbar { background-color: #333; /*
Background color */ overflow: hidden; /* Clear
floats */

/* Style for navigation bar links */

.navbar a { float: left; /* Float the links to the left */
display: block; /* Display links as blocks */ color: white; /*
text color */ text-align: center; /* Center-align the text */
padding: 14px 16px; /* Padding around the links */ text-
decoration: none; /* Remove underline from links */

/* Change color on hover */

.navbar a:hover { background-color: #ddd; /* Background
color on hover */ color: black; /* Text color on hover */

}
</style>
</head>
<body>

<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</div>

</body>
</html>

Output:

CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple word,
you can say that it specifies the clarity of the image.

HARSHAN DIGI TECH

In technical terms, Opacity is defined as degree in which light is allowed to travel through an
object.

How to apply CSS opacity setting

Opacity setting is applied uniformly across the entire object and the opacity value is
defined in term of digital value less than 1. The lesser opacity value displays the greater
opacity. Opacity is not inherited.

CSS Opacity Example: transparent image

Let's see a simple CSS opacity example of image transparency.

CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of a webpage.
The CSS filter property allows us to access the effects such as color or blur, shifting on
the rendering of an element before the element gets displayed.

The syntax of CSS filter property is given below. Syntax

filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | huerotate()

| contrast() | opacity() | grayscale() | sepia() | url();

Let's discuss the property values along with an example.

brightness()
As its name implies, it is used to set the brightness of an element. If the brightness is
0%, then it represents completely black, whereas 100% brightness represents the
original one. It can also accept values above 100% that provide brighter results.

We can understand it by using the following illustration.

Example
<!DOCTYPE html>
<html>
<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter:
brightness(130%);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>brightness(130%)</h2>
</body>

</html> blur()

It is used to apply the blur effect to the element. If the blur value is not specified, then
the value 0 is used as a default value. The parameter in blur() property does not accept
the percentage values. A larger value of it creates more blur.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>

HARSHAN DIGI TECH

 <style>
body{ text-
align:center;

}
#img1 {
filter: blur(2px);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>blur(2px)</h2>
</body>

</html> invert()

It is used to invert the samples in the input image. Its 100% value represents completely
inverted, and 0% values leave the unchanged input. Negative values are not allowed in
it.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
 #img1 {
filter: invert(60);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>invert(60)</h2>
</body>

</html>

saturate()
It sets the saturation of an element. The 0% saturation represents the completely
unsaturated element, whereas the 100% saturation represents the original one. The
values greater than 100% are allowed that provides super-saturated results. We cannot
use negative values with this property.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter:
saturate(40);

HARSHAN DIGI TECH

 </style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2>saturate(40)</h2>
</body>

</html>

drop-shadow()
It applies the drop-shadow effect to the input image. The values it accepts are hshadow, v-
shadow, blur, spread, and color.

Example
<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter: drop-shadow(10px 20px
30px yellow);

}
</style>
</head>
<body>
 <img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> dropshadow(10px 20px
30px yellow);</h2>

</body>

</html>

contrast()
It adjusts the contrast of the input. Its 0% value will create a completely black image,
whereas the 100% values leave the unchanged input, i.e., represents the original one.
Values greater than 100% are allowed that provides results with less contrast.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center; }

#img1 { filter:
contrast(50%);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> contrast(50%)</h2>
</body>

HARSHAN DIGI TECH

</html>

opacity()
It is used to apply transparency to the input image. Its 0% value indicates completely
transparent, whereas the 100% value represents the original image, i.e., fully opaque.

Let's understand it by an illustration.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter:
opacity(40%);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> opacity(40%)</h2>
</body>

</html>

hue-rotate()
It applies a hue-rotation on the input image. Its perimeter value defines the number of
degrees around the color circle; the image will be adjusted. Its default value is 0 degree,
which represents the original image. Its maximum value is 360 degrees.

Let's understand it by an illustration.

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter: hue-
rotate(240deg);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> hue-rotate(240deg)</h2>
</body>

</html>

grayscale()
It converts the input image into black and white. 0% grayscale represents the original one,
whereas 100% represents completely grayscale. It converts the object colors into 256
shades of gray.

HARSHAN DIGI TECH

Example

<!DOCTYPE html>
<html>

<head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter:
grayscale(80%);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> grayscale(80%)</h2>
</body>

</html>

sepia()
It is used to transform the image into a sepia image. 0% value represents the original image,
whereas the 100% value indicates the completely sepia.

Example

<!DOCTYPE html>
<html>
 <head>
<title>CSS filter property</title>
<style>
body{ text-
align:center;

}
#img1 { filter:
sepia(90%);

}
</style>
</head>
<body>
<img src = "tiger.png" > <h2>Original Image </h2>
<img src = "tiger.png" id = "img1"> <h2> sepia(90%)</h2>
</body>

</html>

<!DOCTYPE html>
<html>
<head> <style> img.trans { opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */

}
</style>
</head>
<body>
<p>Normal Image</p>
<img src="rose.jpg" alt="normal rose">
<p>Transparent Image</p>
<img class="trans" src="rose.jpg" alt="transparent rose">
</body>

HARSHAN DIGI TECH

</html> Output:

Normal Image

Transparent Image

Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for
transparency. The opacity value ranges from 0.1 to 1.0. Lower value produces the greater
opacity.

Note 2: The older versions of IE use filter: alpha(opacity=x). Here x value varies from 0
to 100. Lower value produces the greater opacity.
CSS Padding
CSS Padding property is used to define the space between the element content and
the element border.

It is different from CSS margin in the way that CSS margin defines the space around
elements. CSS padding is affected by the background colors. It clears an area around
the content.

Top, bottom, left and right padding can be changed independently using separate
properties. You can also change all properties at once by using shorthand padding
property.

CSS Padding Properties

Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.

CSS Padding Values

Value Description

length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.

CSS Padding Example

<!DOCTYPE html>

HARSHAN DIGI TECH

<html>
<head>
<style>
p{ background-color:
pink;

}
p.padding { padding-
top: 50px; padding-right:
100px; padding-bottom:
150px; padding-left:
200px;

}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

Output:

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.

CSS Position Absolute

What is Position Absolute?
In CSS, position absolute is a property used to position an element in a specific place.
It places the element with its nearest positioned element or the document itself. With
the help of CSS position and absolute placement of other elements, it does not change
on the page because it is removed from the document's normal flow.

There are ways to define position absolute, like top, bottom, left, and right when we
use position absolute. These attributes specify the element's distance from the
document or its nearest-positioned ancestor.

The following are important considerations regarding "position: absolute":

o Positioned relative to the closest positioned ancestor: If the parent or any

ancestor of the element has a position value of "relative," "absolute," "fixed," or
"sticky," the positioned element will be positioned with that ancestor. If no
positioned ancestor is discovered, the element will be positioned relative to the
document.

o Taking an element out of the normal document flow: An element with

"position: absolute" is taken out of the normal document flow, meaning it has
no bearing on other elements' positions. Other elements will be placed to
ignore the element that is positioned.

o Can overlap other elements: Because positioned elements are out of the
page's natural flow, they can overlap other elements. The "z-index" property
allows you to modify the order in which overlapping elements are stacked.

o A positioned element will scroll with the page if it is scrolled unless its position
is "fixed."

Here is an illustration of how "position: absolute" is used in CSS:

.container {
position: relative;

HARSHAN DIGI TECH

.box { position:
absolute; top:
50px;
left: 100px;
}

Why do We Use Position Absolute in CSS?

CSS's "position: absolute" property is used for specific layout and positioning needs.
In the following situations, "position: absolute" is helpful:

o Elements that overlap one another: "position: absolute" can be used to

precisely position one element on top of another, as in the case of adding
tooltips, drop-down menus, or pop-up windows.

o Custom positioning: With absolute positioning, you are not limited by the
natural flow of elements and can position elements wherever you want on the
page. This can be helpful when designing intricate layouts or unique layouts
that require precise control over the placement of individual elements.

o Construction of complex UI elements: Absolute positioning can be used to

construct intricate user interface elements, such as sliders, carousels, or
dragand-drop user interfaces, where the position of elements must be
dynamically changed.

o Creating fixed elements: You can create elements that stay fixed in a particular
position on the screen, even when the page is scrolled, by combining "position:
absolute" with suitable values for the "top," "bottom," "left," or "right"
properties. This is frequently used for sidebars, headers, and fixed navigation
bars.

o Z-index and layering: With absolute positioning, you can manage how
elements are stacked using the "z-index" property. This helps you create layered
effects or manage the visibility of overlapping elements when you want certain
elements to appear above or below others.
CSS Vertical Align
The CSS vertical align property is used to define the vertical alignment of an inline or
table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy
property for beginners.

What it does
1. It is applied to inline or inline-block elements.

2. It affects the alignment of the element, not its content. (except table cells)

3. When it applied to the table cells, it affect the cell contents, not the cell itself.

CSS Vertical Align Values

value description

baseline It aligns the baseline of element with the baseline of parent element.
This is a default value.

length It is used to increase or decrease length of the element by the specified

length. negative values are also allowed.

% It is used to increase or decrease the element in a percent of the

"lineheight" property. negative values are allowed.

sub It aligns the element as if it was subscript.

super It aligns the element as if it was superscript.

top It aligns the top of the element with the top of the tallest element on
the line.

It aligns the bottom of the element with the lowest element on the
bottom
line.

HARSHAN DIGI TECH

 text-top the top of the element is aligned with the top of the parent element's
font.

middle the element is placed in the middle of the parent element.

textbottom the bottom of the element is aligned with the bottom of the parent
element's font.

initial It sets this property to Its default value.

inherit inherits this property from Its parent element.

CSS Vertical Align Example

<!DOCTYPE html>
<html>
<head> <style>
img.top { vertical-align:
text-top;

}
img.bottom { vertical-align:
text-bottom;

}
</style>
</head>
<body>
<p><img src="goodmorning.jpg" alt="Good Morning Friends"/> This is an image
with a default alignme nt.</p>

<p><img src="good-
morning.jpg" class="top" alt="Good Morning Friends"/> This is an image with a text
-top alignment.</p> <p><img src="goodmorning.jpg" class="bottom"
alt="Good Morning Friends"/> This is an image with a text-bottom alignment.</p>

</body>
</html> Output:

HARSHAN DIGI TECH

 This is an image with a default
alignment.

This is an image with a text-top

alignment.

This is an image with a text-bottom

alignment.

CSS Width
The CSS width property is used to set the width of the content area of an element.

It does not include padding borders or margins. It sets width of the area inside the
padding, border, and margin of the element.

CSS width values

 Value Description

auto It is a default value. it is used to calculate the width.

length It is used to define the width in px, cm etc.

% It defines the width of the containing block in %.

initial It is used to set the property to its default value.

inherit It is used to inherit the property from its parent element.

CSS Width Example: width in px

<!DOCTYPE html>
<html>
<head> <style>
img.normal {
width: auto;

}
img.big {
width: 150px;

}
p.ex { height:
150px; width:
150px;

}
</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84">
<p class="ex">The height and width of this paragraph is 150px.</p>
<p>This is a paragraph.</p>

HARSHAN DIGI TECH

</body>
</html> Output:

The height and width of this paragraph is 150px.

This is a paragraph.

CSS Width Example: width in %

The percent width is a measurement unit for the containing block. It is great for images.

<!DOCTYPE html>
<html>
<head> <style>
img.normal {
width: auto;

}
img.big {
width: 50%;

}
img.small {
width: 10%; }

</style>
</head>
<body>
<img class="normal" src="good-morning.jpg" width="95" height="84"><br>
<img class="big" src="good-morning.jpg" width="95" height="84"><br>
<img class="small" src="good-morning.jpg" width="95" height="84">
</body>
</html> Output:

Note: You can also use the "min-width" and "max-width" property to control the size of
image.

CSS height property

This CSS property sets the height of an element. It is used to set the height of content
area of an element.

It does not include padding borders or margins, whereas it sets the height of the area
inside the padding, border, and margin of the element. It can accept the length and
percentage values. But it does not allow negative values.

If we set the height to a numeric value (like in px, %, etc.), the content can be overflow
if it does not fit in the given height. We can manage the overflowing content by
defining the overflow property.
If the height of the container is not explicitly defined, and the element is not absolutely
positioned (i.e., position: absolute;), the value of height property is set to auto. The
min-height and max-height properties can also be used to control the size.

HARSHAN DIGI TECH

Syntax
height: auto | length | initial | inherit;
Property Values

The values of this property are tabulated as follows.

Now, we will see some of the examples to understand this property more clearly.

Example

Here, we are using the keyword value auto and the length values of height property
in px and em.

<!DOCTYPE html>

<html>

<head>

<style> #auto{
height: auto; width:
275px; border: 2px
solid blue; }
Value Description

auto It is a default value. Using this value browser is responsible for calculating the
height of the element. Negative values are not allowed.

length It specifies the height of an element using the length units such as px, cm, pt, etc.
Negative values are not allowed.

% It defines the height of the container in %. Negative values are not allowed.

initial It is used to set the property to its default value.

inherit It is used to inherit the property from its parent element.

#px{ height: 320px;

width: 275px; border:
2px solid blue;

#em{ height: 16em;

width: 275px; border:
2px solid blue;

} p{ font-size:
20px;

</style>

</head>

<body>

<h2> height: auto; </h2>

<div id ="auto">
<img src="jtp.png">
<p> Welcome to the Digitech.com </p>

<p> The height this div element is set to auto. </p>

</div>

<h2> height: 320px; </h2>

<div id ="px">

HARSHAN DIGI TECH

 <img src="jtp.png">
<p> Welcome to the Digitech.com </p>

<p> The height this div element is set to 320px. </p>

</div><br>

<h2> height: 16em; </h2>

<div id ="em">

<img src="p.png">
<p> Welcome to the Digitech.com </p>

<p> The height this div element is set to 16em. </p>

</div>

</body>

</html>
Output

Example

Here, we are specifying the value of height property in percentage.

<!DOCTYPE html>

<html>

<head>

<style> #per{
position: absolute;
width: auto; height:
65%; border: 2px solid
blue;

p{ font-size:
20px;

}
</style>

</head>

<body>

<h2> height: 65%; </h2>

<div id ="per">
<img src="p.png">
<p> Welcome to the Digitech.com </p>

<p> The height this div element is set to 65%. </p>

</div>

</body>

</html>

Output

Hover in CSS
What is CSS Hover?
The :hover selector in CSS applies styles to an element while the cursor hovers over it.
It's frequently employed to produce interactive effects or to draw attention to
elements when they're being interacted with.

You can target an element with the :hover selector using its tag name, class, or ID.

For Example:

.button:hover { background-
color: #ff0000;

color: #ffffff;
}

The background color in the previous example will turn red (#ff0000) when a user
hovers over an element with the class "button," while the text color will turn white

HARSHAN DIGI TECH

(#ffffff).

Various hover effects can be produced by combining the :hover selector with other
CSS elements like font size, border, or transform. It's a potent tool for boosting your
website or application's visual feedback and interactivity.

Syntax:

:hover { css
declarations;

Let's take some examples to understand hover by using CSS:

Example 1:

HTML Code:

<button class="hover-button">Hover Me</button> CSS

Code:

.hover-button {
background-color: #eaeaea; color:
#333333; padding: 10px 20px;
border: none; cursor: pointer;
transition: background-color 0.3s ease;

.hover-button:hover { background-
color: #ff0000;

color: #ffffff; }

Explanation:
In the above example, we have a button with a class hover-button. The button's initial
color combinations are a light grey background (#eaeaea) and dark grey text
(#333333). When the mouse hovers over the button, the background color changes to
red (#ff0000) and the text color to white (#ffffff).

With a duration of 0.3 seconds and an ease timing function, the transition property in
the hover-button class ensures a fluid transition for the background color change
when the mouse hovers over the button.

Other elements, such as links (<a>), images (<img>), divs (<div>), or any other
element you want to make interactive, can use similar hover effects. You can create
various hover effects suited to your design needs by changing the properties and
values within the :hover selector.

Example 2: image zoom effect

HTML Code:

<div class="image-zoom">
<img src="image.jpg" alt="Image">
</div>

CSS Code:

.image-zoom {
overflow: hidden; }

.image-zoom img { transition:

transform 0.3s ease;

.image-zoom:hover img {
transform: scale(.2);

Example 3: Link Underline Effect

HARSHAN DIGI TECH

HTML Code:

<a href="#" class="underline-link">Hover Me</a> CSS

Code:

.underline-link { text-decoration:
none; transition: border-bottom 0.3s
ease;

.underline-link:hover { border-
bottom: 2px solid #ff0000;

Feature of Hover in CSS

You can improve the interactivity and visual effects of your web pages by using the
CSS:hover feature, which offers a variety of advantages and features. The following are
some essential CSS hover features:

o Interactive effect: Interactive effects can be produced by altering the

appearance of elements when hovered over using the :hover selector. As users
interact with your content, you can change properties like background color,
text color, opacity, box shadow, transform, and more to show them visual
feedback.
o Targeting Multiple Elements: You can select multiple elements on a page with
the :hover selector. This implies that you can design standardized hover effects
for various elements, including buttons, links, images, navigation menus, and
any other element you want to make interactive.

o Support for Transitions and Animations: The :hover selector can be used with
CSS transitions and animations to produce slick, aesthetically pleasing effects.
By defining transition or animation properties, you can specify the duration,
 timing function, and other animation-related settings to regulate how the styles
change when an element is hovered over.

o Adding Additional Selectors: The :hover selector can be used with other CSS
selectors to focus on particular elements or apply styles under predefined
criteria. For instance, you can create unique and tailored hover effects by
combining the :hover selector with class selectors, ID selectors, or
pseudoelements.

o Supporting Accessibility: Accessibility should be considered when developing

hover effects. Users of assistive technologies who use a cursor, such as screen
readers, might not have access to the hover effect. Because of this, it is advised
to check that the primary functionality or content is still readable and usable
without hover effects.

o Cross-Browser Support: Most modern web browsers support the CSS: hover
feature. It is a CSS specification component compatible with most widely used
browsers, including Chrome, Firefox, Safari, Edge, and others. This ensures
consistency in appearance and behaviour across different platforms.

HTML Layouts
HTML layouts provide a way to arrange web pages in well-mannered, well-structured,
and in responsive form or we can say that HTML layout specifies a way in which the
web pages can be arranged. Web-page layout works with arrangement of visual
elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website
so that our website can appear professional with the great look. You can also use CSS
and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic
website designing.

HARSHAN DIGI TECH

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts
of a webpage.

o <header>: It is used to define a header for a document or a section.

o <nav>: It is used to define a container for navigation links o <section>: It is

used to define a section in a document

o <article>: It is used to define an independent self-contained article o

<aside>: It is used to define content aside from the content (like a sidebar)

o <footer>: It is used to define a footer for a document or a section o

<details>: It is used to define additional details

o <summary>: It is used to define a heading for the <details> element

NOTE: HTML layouts create an individual space for every part of the web page. So that
every element can arrange in a significant order.
 Description of various Layout elements
HTML <header>

The <header> element is used to create header section of web pages. The header
contains the introductory content, heading element, logo or icon for the webpage, and
authorship information.

Example:

<header style="background-color: #303030; height: 80px; width: 100%">

<h1 style="font-size: 30px; color: white;text-align: center; paddingtop:
15px;">Welcome to MyFirstWebpage</h1> </header>

HTML <nav>

The <nav> elements is a container for the main block of navigation links. It can contain
links for the same page or for other pages.

Example:

<nav style="background-color:#bcdeef;">
<h1 style="text-align: center;">Navgation Links</h1>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</nav>

HTML <section>

HTML <section> elements represent a separate section of a web page which contains
related element grouped together. It can contain: text, images, tables, videos, etc.

HARSHAN DIGI TECH

 Example:

<section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">

<h2>Introduction to HTML</h2>
<p>HTML is a markup language which is used for creating attractive web pages w
ith the help of styling, and which looks in a nice format on a web browser..</p>
</section>

HTML <article>

The HTML

tag is used to contain a self-contained article such as big story, huge article, etc.

Example:

<article style="width: 100%; border:2px solid black; background-color: #fff0f5;">

<h2>History of Computer</h2>
<p>Write your content here for the history of computer</p>
</article>

HTML <aside>
HTML <aside> define aside content related to primary content. The <aside> content must be
related to the primary content. It can function as side bar for the main content of web page.

Example:

<aside style="background-color:#e6e6fa">
<h2>Sidebar information</h2>
<p>This conatins information which will represent like a side bar for a webpage</p>
</aside>

HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains
information about author, copyright, other links, etc.

Example:
<footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
<h3>Footer Example</h3>
<p>© Copyright 2018-2020. </p>
</footer>

HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or
show the details as per requirement.

Example:

<details style="background-color: #f5deb3">

<summary>This is visible section: click to show other details</summary>
<p>This section only shows if user want to see it. </p>
</details>

HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as
summary, captions about the content of <details> element.

Example:

<details>
<summary>HTML is acronym for?</summary>
<p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
</details>

HTML Layout Techniques

Creating layouts are the most important things while designing a website, as it will
ensure that your website looks in a well-arranged way and the content appears easy
to understand. There are various techniques, and frameworks available for creating
layouts, but here we will learn about simple techniques. You can use the following
methods to create multicolumn layouts:

HARSHAN DIGI TECH

 o HTML tables (Try not to use) o

CSS float property o CSS

framework o CSS flexbox o

Layout using div

HTML Tables (Not Recommended)

HTML table-based layout is one of the easiest ways for creating a layout, as table use
only rows and column-based format, but HTML tables are not recommended for
your page layout. The

element is designed to display tabular data. It is not good for a layout. Although first
creating a layout is easy, but if you want to change or redesign your website, then it
will be a complicated task.

Following is an example for the creation of a simple web page layout using HTML table.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

li{
display: inline-block;
padding: 10px;} a{
color:#20b2aa;

}
</style>
</head>
<body>
<!-- Header Section -->
 <table width="100%" style="border-collapse:collapse;">
<tr>
<td colspan="2" style="background-color:#1a1a1a; text-align: center;">
<h3 style="font-size: 30px; color: #ff6a6a;">javaTpoint Table-layout</h3>
</td>
</tr>
<!-- Nav Section -->
<tr>
<td colspan="2" style="background-color:#666666;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About-us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</td>
</tr>
<!-- Main Section -->
<tr>
<td style="background-color:#e6e6fa; width:80%; height: 400px; textalign:
center;">

<p>Write your content Here</p>

</td>
<td style="background-color:#a7e6fb; height: 400px;">
<p>This is your side bar</p>
</td>
</tr>
<!-- Footer Section -->
<tr>
<td colspan="2" style="background-color:#2e2e2e; text-align: center;">

HARSHAN DIGI TECH

 <p style="color:#f08080">©<strong>Copyright Digitech</strong></p>
</td>
</tr>
</table>
</body>
</html>

Note: This example is just for show you how to create layout using table but it's not
recommended to use table layout.

CSS Frameworks
CSS provides many frameworks like W3.CSS, Bootstrap, and many more, to create your
layout fast. Using CSS frameworks you can easily create a responsive and attractive
web layout. You just need to add a link for these frameworks, and you can use all
properties available in the framework.

CSS Float
You can create an entire web layout using CSS float property.

Advantage: It is very easy to learn and use. You just learn how the float and clear
properties work.

Disadvantage: Floating elements are tied to the document flow, which may harm the
flexibility.

Example:

<!DOCTYPE html>
<html>
<head> <style>
div.container { width:
100%; border: 1px
solid gray;

}
header, footer { padding:
1em; color: white;
background-color: #000080;

clear: left; text-

align: center; }

nav {
float: left;

max-width: 160px;
margin: 0; padding:
1em;

nav ul { list-style-
type: none; padding:
0;

nav ul a { text-
decoration: none;

}
article { margin-left:
170px; border-left: 1px
solid gray; padding: 1em;
overflow: hidden;

}
</style>
</head>
<body>

HARSHAN DIGI TECH

<div class="container">

<header>
<h1>Tutorials Gallery</h1>
</header>

<nav>
<ul>
<li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html.
Our HTML tutorial is developed for beginners and professionals.</p>

<p>TML is an acronym which stands for Hyper Text Markup Language. Let's see wha
t is Hyper Text and what is Markup Language?</p>

</article>
<footer>Copyright © Copyright Digitech </footer>
</div>
</body>
</html>

CSS Flexbox
Flexbox is a new layout mode in CSS3.

Advantage: It ensures that the page layout must accommodate different screen sizes
and different display devices.

Disadvantages: It does not work in IE10 and earlier.

Example:

<!DOCTYPE html>
<html>
<head>
<style> .flex-container
{ display: -webkit-
flex; display: flex;

-webkit-flex-flow: row wrap;

flex-flow: row wrap; text-align:
center;

.flex-container > * {
padding: 15px; -webkit-
flex: 1 100%; flex: 1
100%;

.article { text-
align: left;

header {background: #000080;color:white;} footer

{background: #000080;color:white;}

.nav {background:#eee;}

.nav ul { list-style-
type: none; padding:
0;

HARSHAN DIGI TECH

.nav ul a { text-
decoration: none;

@media all and (min-width: 768px) {

.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}

}
</style>
</head>
<body>

<div class="flex-container">
<header>
<h1>City Gallery</h1>
</header>

<nav class="nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>

<article class="article">
<h1>HTML</h1>
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html.
Our HTML tutorial is developed for beginners and professionals.</p>
<p>TML is an acronym which stands for Hyper Text Markup Language. Let's see wha
t is Hyper Text and what is Markup Language?</p>

<p><strong>Resize this page to see what happens!</strong></p> </article>

<footer>Copyright © Digitech </footer>

</div>

</body>

</html> Layout
using div

<!DOCTYPE html>
<html>
<head>
<title>Webpage using div</title>
<style>
body{
margin:0px;

}
.header{ padding:
10px; background-
color:#455e64; text-align:
center;

}
.header h2{
color: black; }

/*===============[Nav CSS]==========*/
.nav{
background-color:#243238;
padding: 5px;

HARSHAN DIGI TECH

 .nav li{
list-style: none;
display: inline-block;
padding: 8px;

}
.nav a{
color: #fff;

.nav ul li a:hover{ text-

decoration: none; color:
#7fffd4;

} .lside{
float: left; width: 80%;
min-height: 440px;
background-color: #f0f8ff;
text-align: center;

}
.rside
{ text-align: center;
float: right; width: 20%;
min-height: 440px;
background-color: #c1cdcd; }

.footer{ height: 44px;

background-color:#455e64;
text-align: center; padding-
top: 10px;}

.footer p{
color: #8fbc8f;
 }

</style>
</head>
<body>
<div>
<div class="header">
<h2> Div Layout</h2>
</div>
<!-- Nav -->
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>

<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li style="float: right;"><a href="#">LOGIN</a></li>
<li style="float: right;"><a href="#">SIGN-UP</a></li>
</ul>
</div>

<!-- main -->

<div style="height:440px">
<div class="lside">
<p>Write your content here</p>
</div>
<!-- side -->
<div class="rside">
<p>This is side</p>
</div>
</div>

HARSHAN DIGI TECH

 <!-- footer -->
<div class="footer">
<p>©<strong> Copyright Digitech </strong></p>
</div>
</div>
</body>
</html>
Border Shadow CSS
The "box-shadow" property in CSS enables developers to apply a shadow effect to an
element, giving the appearance of depth and separation from the backdrop. The box
shadow may produce various effects, such as border shadows, commonly referred to
as "border shadows". we will start with the fundamentals in this article before moving
on to more complex usage.

Basics of Box Shadow in CSS

The box-shadow property's fundamental syntax is as listed below:

Box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color]; o

Horizontal Offset (required): This specifies how far away from the element the
shadow is supposed to offset horizontally. The shadow is moved to the right by a
positive value and to the left by a negative number.

o Vertical Offset (required): The height at which the shadow should be displaced
from the element. The shadow is moved up or down by a positive or negative
number. o Blur Radius (optional): This parameter controls how blurry the
shadow will be. The shadow will be more hazy the higher the value. The shadow
will display a sharp edge if the value is zero.

o Spread Radius (optional): The spread radius modifies the shadow's size. A
positive value makes the size larger, while a negative value makes it smaller. If
left out, the blur radius automatically calculates the shadow size.

o Color (optional): The shadow's color, if applicable. You may represent colors
using various methods, including named colors, RGB, HEX, or HSL values.

Border Around Text

Imagine you're drawing a picture, and you want to put a line around something to
make it pop. That's what a border around text does. It's like a fancy line around words
to make them look special and easier to see. A border around the text is like a frame
that goes around the outside of the text. It's like drawing a line around the words to
make them stand out or separate them from the rest of the content. This can help

HARSHAN DIGI TECH

highlight the text and make it more noticeable on a webpage, document, or design.
The border can have different colors, thicknesses, and styles, such as solid or dashed
lines, to give the text a specific look or emphasize its importance.
Example

.element { color: coral; text-shadow: -1px 0 black, 0 1px black,

1px 0 black, 0 -1px black;

Output

Adding Border Shadow

Applying the box-shadow attribute to an element using a solid background color will
provide the border shadow impact. The shadow will encircle the element's boundaries,
creating the appearance of a border. Here's an illustration:

/* Basic border shadow */ boxshadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31,
193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px
0px 0px 12px, rgb(255, 85, 85) 0px 0 p x 0px 15px;

Output
Advanced Border Shadow Techniques
1. Multiple Shadows:

A single element can have many shadows applied to it, separated by commas. This
enables you to produce more complicated shadow effects. The above example can be
applied here.

2. Inset Shadows:

The element will appear to be pressed into the backdrop if the "inset" keyword is used
to produce an inner shadow impact.

/* Inset shadow */ .element { box-shadow: inset

2px 2px 5px rgba(0, 0, 0, 0.3);

3. Spread Radius for Border-Like Shadows:

A more distinct border-like shadow effect can be produced by utilizing a spread radius
that is not zero.

/* Border-like shadow with spread radius */

.element { box-shadow: 0 0 0 3px
rgba(0, 0, 0, 0.3);

HARSHAN DIGI TECH

In this case, the spread radius is set to 3 pixels, creating a shadow resembling a border
surrounding the element.

4. Transition and Animation:

Additionally, you may create shadow effects by adding transitions or animations to the
box-shadow attribute.

.element{ width: 100px;

height: 100px;
background-color: coral;
color: white;
animation: mymove 5s infinite;
}

@keyframes mymove {
50% {box-shadow: 10px 20px 30px blue;}
}

Output

Before effect After effect

CSS Text-shadow
As its name implies, this CSS property adds shadows to the text. It accepts the
commaseparated list of shadows that applied to the text. It's default property is none.
It applies one or more than one text-shadow effect on the element's text content.

Let's see the syntax of text-shadow property. Syntax text-shadow: h-

shadow v-shadow blur-radius color| none | initial | inherit; Values

h-shadow: It is the required value. It specifies the position of the horizontal shadow
and allows negative values.

v-shadow: It is also the required value that specifies the position of the vertical

shadow. It does not allow negative values. blur-radius: It is the blur-radius, which is

an optional value. Its default value is 0. color: It is the color of the shadow and also an

optional value. none: It is the default value, which means no shadow. initial: It is used

to set the property to its default value. inherit: It simply inherits the property from its

parent element.

Let's understand it by using some illustrations.

Example- Simple shadow

<!DOCTYPE html>

<html>
<head>
<title> font-weight property </title>
<style>
p.simple{ text-shadow:
3px 3px red;

HARSHAN DIGI TECH

 }
</style>
</head>

<body>
<p class="simple">
Simple Shadow
</p>

</body>
</html>

Example- Fuzzy shadow

<!DOCTYPE html>

<html>
<head>
<title> font-weight property </title>
<style>
p.fuzzy{ text-shadow: 3px
3px 3px violet; font-size:30px;
text-align:center;

}
</style>
</head>

<body>
<p class="fuzzy">
Fuzzy Shadow
</p>
</body>
</html>

HARSHAN DIGI TECH