CSS Revise

CSS websites link to read:
Link-1: https://developer.mozilla.org/en-US/docs/Web/CSS
Link-2: https://www.javatpoint.com/css-tutorial
Link-3: https://web.dev/learn/css
Link-4: https://www.geeksforgeeks.org/css/
HTML Revise
1. What is CSS?
 CSS stands for Cascading Style Sheets. It is a style sheet language
which is used to describe the look and formatting of a document
written in markup language. It provides an additional feature to
HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of
XML documents including plain XML, SVG and XUL.
 CSS is used along with HTML and JavaScript in most websites to
create user interfaces for web applications and user interfaces
for many mobile applications.
 You can add new looks to your old HTML documents.
 You can completely change the look of your website with only a
few changes in CSS code.
 Why to use CSS:
 Solves a problem: Before CSS, tags like font, color, background
style, element alignments, border and size had to be repeated on
every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information
are added on every single page, it will be become a long and
expensive process. CSS was created to solve this problem. It was
a W3C recommendation.
 Saves a lot of time: CSS style definitions are saved in external CSS
files so it is possible to change the entire website by changing
just one file.
 Provide more attributes
 CSS provides more detailed attributes than plain HTML to define
the look and feel of the website.
 CSS Syntax:
 A CSS rule set contains a selector and a declaration block.
 Selector: Selector indicates the HTML element you want to style.
It could be any tag like <h1>, <title> etc.
 Declaration Block: The declaration block can contain one or
more declarations separated by a semicolon. For the above
example, there are two declarations:
 color: yellow;
 font-size: 11 px;
 Each declaration contains a property name and value, separated
by a colon.
 Property: A Property is a type of attribute of HTML element. It
could be color, border etc.
 Value: Values are assigned to CSS properties. In the above
example, value "yellow" is assigned to color property.
 Selector {Property1: value1; Property2: value2; ..........;}
__________________________________________________
2. What is selector?
 CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
 There are several different types of selectors in CSS.
 CSS Element Selector: the element selects the html element by
name.
 CSS Id Selector: The id selector selects the id attribute of an
HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique
element. It is written with the hash character (#), followed by the
id of the element.
 CSS Class Selector: The class selector selects HTML elements with
a specific class attribute. It is used with a period character. (full
stop symbol) followed by the class name.
 Note: A class name should not be started with a number.
 We can give class name multiple elements
 CSS Class Selector for specific element: If you want to specify
that only one specific HTML element should be affected then you
should use the element name with class selector.
 CSS Universal Selector: The universal selector is used as a
wildcard character. It selects all the elements on the pages.
 CSS Group Selector: The grouping selector is used to select all the
elements with the same style definitions.
 Grouping selector is used to minimize the code. Commas are
used to separate each selector in grouping.
Example-1:
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>selctors</title>
<link rel="stylesheet" href="selectors.css">
</head>
<body>
<h1>This is heading 1</h1>
<h3>This is subheading 1</h3>
<div>
<p class="para">This is paragraph 1</p>
</div>
</body>
</html>
CSS File:
/*universal selector*/
*{
margin: 0;
padding: 0;
background-color: pink;
}
body{
text-align: center;
}
/*ID selector*/
#h1{
color: red;
}
/*Class selector*/
.para{
color: blue;
}
/*Element selector*/
h3{
color:brown;
}
/*group selector*/
p,h1,h3{
font-family: Tahoma;
}
Browser:
__________________________________________________
3. How to add CSS?

 CSS is added to HTML pages to format the document according
to information in the style sheet. There are three ways to insert
CSS in HTML documents.
 Inline CSS: We can apply CSS in a single element by inline CSS
technique.
 The inline CSS is also a method to insert style sheets in HTML
document. This method mitigates some advantages of style
sheets so it is advised to use this method sparingly.
 If you want to use inline CSS, you should use the style attribute to
the relevant tag.
 Disadvantages of Inline CSS:
 You cannot use quotations within inline CSS. If you use
quotations the browser will interpret this as an end of your style
value.
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not stored
at a single place.
 It is not possible to style pseudo-codes and pseudo-classes with
inline CSS.
 Inline CSS does not provide browser cache advantages.
 Internal CSS: The internal style sheet is used to add a unique
style for a single document. It is defined in <head> section of the
HTML page inside the <style> tag.
 External CSS: The external style sheet is generally used when you
want to make changes on multiple pages. It is ideal for this
condition because it facilitates you to change the look of the
entire web site by changing just one file.
 It uses the <link> tag on every pages and the <link> tag should be
put inside the head section.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 The external style sheet may be written in any text editor but
must be saved with a .css extension. This file should not contain
HTML elements.
__________________________________________________
4. Explain CSS comments.
 CSS comments are generally written to explain your code. It is
very helpful for the users who reads your code so that they can
easily understand the code.
 Comments are ignored by browsers.
 Comments are single or multiple lines statement and written
within /*............*/
__________________________________________________
Explain Below Properties
5. Explain CSS background.
 CSS background property is used to define the background
effects on element.
 background-color: This property is used to set the background
color of an element. The background of an element covers the
total size, including the padding and border and excluding
margin. It can be applied to all HTML elements.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-color: 1</title>
<style>
h3{
background-color: blue;
}
</style>
</head>
<body>
<h3>This is paragraph with Background-color pink</h3>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-color: 2</title>
<style>
body{
}
</style>
</head>
<body>
<h3>This is paragraph with Background-color pink</h3>
</body>
</html>
Browser:
 background-image: The background-image property is used to

set an image as a background of an element. By default the
image covers the entire element.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-image</title>
<style>
body{
background-image: url("Picture.png");
background-size: 1400px 650px;
}
p{
padding: 150px;
text-align: center;
font-size: 40px;
font-family: fantasy;
}
</style>
</head>
<body>
<p>Fly!!! Fly!!! High! High! like a bird</p>
</body>
</html>
Browser:
 background-repeat: By default, the background-image property

repeats the background image horizontally and vertically. Some
images are repeated only horizontally or vertically.
 The background looks better if the image repeated horizontally
only.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-repeat</title>
<style>
body{
background-image: url("Imagination.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Background-repeat-x</p>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-repeat</title>
<style>
body{
background-image: url("Imagination.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Background-repeat-y</p>
</body>
</html>
Browser:
 background-attachment: The background-attachment property is

used to specify that the background image is fixed or scroll with
the rest of the page in the browser window.
 This property has three values scroll, fixed, and local. Its default
value is scroll, which causes the element to not scroll with its
content. The local value of this property causes the element to
scroll with the content. If we set the value to fixed, the
background image will not move during scrolling in the browser.
 This CSS property can support multiple background images. We
can specify a different value of the background-attachment
property for each background-image, separated by commas.
Every image will match with the corresponding value of this
property.
 Scroll: The background is fixed relative to the element itself and
does not scroll with its contents. (It is effectively attached to the
element's border.)
 Fixed: The background is fixed relative to the viewport. Even if an
element has a scrolling mechanism, the background doesn't
move with the element. (This is not compatible with background-
clip: text.)
 Local: The background is fixed relative to the element's contents.
If the element has a scrolling mechanism, the background scrolls
with the element's contents, and the background painting area
and background positioning area are relative to the scrollable
area of the element rather than to the border framing them.
 https://developer.mozilla.org/en-US/docs/Web/CSS/background-
attachment
 background-size:
 The background-size CSS property is used to set the size of a
background image of an element. The background image can be
stretched or constrained to fit into the existing space. It allows us
to control the scaling of the background image.
 This property can be defined using length, percentage, or
keyword values. It has two possible keyword values that are
contain and cover. Its single-value syntax defines the width of the
image (in this case, the height sets to auto), whereas the double
values define the value of both height and width in which the
first value sets the width and second sets the height.
 If an element has multiple background images, we can define the
comma-separated values to define the different sizes of each
one.
 The cover value of the background-size property is used to cover
the entire background area of the element. In contrast, the
contain value of this property scales the image as much as
possible without clipping the image.
 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
 background-position:
 The background-position property is used to define the initial
position of the background image. By default, the background
image is placed on the top-left of the webpage.
 You can set the following positions:
center, top, bottom, left, right.
 https://developer.mozilla.org/enUS/docs/Web/CSS/background-position
 background-clip:
 This CSS property specifies the painting area of the background.
It limits the area in which the background color or image appears
by applying a clipping box. Anything outside the box will be
discarded and invisible.
 It sets whether the background of an element extends under the
border-box, padding-box, and content-box.
 border-box: It is the default value. It means that the background
image and color will be drawn inside the border-box. It sets the
background color, which spreads over the entire division.
 padding-box: It sets the background within the border, i.e., the
background image and color are drawn inside the padding-box.
 content-box: It sets the background-color up to the content only.
The background is painted inside the content box, i.e., the
background image and color will be drawn in the content box.
 https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-clip: 1</title>
<style>
p {
border: 0.8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow,
red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<p class="border-box">The background extends behind the
border.</p>
<p class="padding-box">
The background extends to the inside edge of the border.
</p>
<p class="content-box">
The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground
text.</p>
</body>
</html>
Browser:
 background-origin:
 This CSS property helps us to adjust the background image of the
webpage. It specifies the background position area, i.e., the
origin of a background image. This CSS property will not work
when the value of the background-attachment is set to be fixed.
 The background-origin property is similar to the background-clip
property, but it resizes the background instead of clipping it. By
default, the origin of an element is the top-left corner of the
screen.
 If the element has more than one background image, then we
can specify a different value of the background-origin property
for each background-image, separated by commas. Every image
will match with the corresponding value of the background-origin
property.
Values Description
padding It is the default value that positions the background

-box relative to the padding-box. The background starts from
the top left corner of the padding edge.
border- It positions the background relative to the border-box.

box The background starts from the top left corner of the
border.
content- It positions the background relative to the content-box.

box The background starts from the top left corner of the
content.
initial It sets the property to its default value.
inherit It inherits the property from its parent element.
 background-blend-mode:
 This CSS property sets the blend mode for each background layer
(image/color) of an element. It defines how the background
image of an element blends with the background color of the
element. We can blend the background images together or can
blend them with background-color.
 This property is not supported in Edge/Internet Explorer.
 Normal: It is the default value which sets the property mode to
normal.
 Multiply: It multiplies the background-color and background-
images and leads to a darker image than before. It is used to set
the blending mode to multiply
 Screen: It is used to set the blending mode to screen and inverts
both image and color. This effect is like displaying two images on
the projection screen.
 color-dodge: It is similar to the screen blend mode. It is used to
set the blending mode to color-dodge. The final result of this
mode is the result of dividing the background-color by the
inverse of the background-image.
 Difference: It is used to set the blending mode to difference. Its
final result is the result of subtracting the dark color from the
lightest one.
 Darken: It is used to set the blending mode to darken.
 Lighten: It is used to set the blending mode to lighten.
 Saturation: Its final result is the saturation of the top color, while
using the hue and luminosity of the bottom color.
 Luminosity: It is used to set the blending mode to luminosity. Its
final result is the luminosity of the top color, while using the hue
and saturation of the bottom color.
 Overlay: It is used to set the blending mode to overlay.
 hard-light: It is used to set the blending mode to hard-light.
 soft-light: It is used to set the blending mode to soft-light.
 Exclusion: It is used to set the blending mode to exclusion.
 Hue: Its result is the combination of the hue of the background-
image with the luminosity and saturation of the background-
color.
 color-burn: It is used to set the blending mode to color-burn.
 Color: It is used to set the blending mode to color. It keeps the
luminosity of the background-color and the hue and saturation of
the background-image.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Background-blend-mode</title>
<style>
.div1{
height: 200px;
width: 300px;
background-image: url("Imagination.png"),
url("Picture.png");
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: screen;
color: white;
font-size: 40px;
}
.div2{
height: 200px;
width: 300px;
background-image: url("Imagination.png"),
url("Picture.png");
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: luminosity;
}
</style>
</head>
<body>
<div class="div1">This is text</div>
<hr>
<div class="div2"></div>
</body>
</html>
Browser:
__________________________________________________
6. Explain CSS border.
 The CSS border is a shorthand property used to set the border on
an element.
 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.
dotte It is used to define a dotted border.

d
dashe It is used to define a dashed border.

d
solid It is used to define a solid border.
doubl It defines two borders with the same border-width value.

e
groov It defines a 3d grooved border. effect is generated

e according to border-color 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.
 border-color:
 There are three methods to set the color of the border.
 Name: It specifies the color name. For example: "red".
 RGB: It specifies the RGB value of the color.
 For example: "rgb(255,0,0)".
 Hex: It specifies the hex value of the color.
 For example: "#ff0000".
 There is also a border color named "transparent". If the border
color is not set it is inherited from the color property of the
element.
 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.
 border-radius:
 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.
 This CSS property sets the rounded borders and provides the
rounded corners around an element, tags, or div. It defines the
radius of the corners of an element.
 It is shorthand for border top-left-radius, border-top-right-
radius, border-bottom-right-radius and border-bottom-left-
radius. It gives the rounded shape to the corners of the border of
an element. We can specify the border for all four corners of the
box in a single declaration using the border-radius. The values of
this property can be defined in percentage or length units.
 This CSS property includes the properties that are tabulated as
follows:
 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.
 If we provide a single value (such as border-radius: 30px;) to this
property, it will set all corners to the same value.
 When we specify two values (such as border-radius: 20% 10% ;),
then the first value will be used for the top-left and bottom-right
corners, and the second value will be used for the top-right and
bottom-left corners.
 When we use three values (such as border-radius: 10% 30%
20%;) then the first value will be used for the top-left corner, the
second value will be applied on top-right, and bottom-left
corners and the third value will be applied to the bottom-right
corner.
 Similarly, when this property has four values (border-radius: 10%
30% 20% 40%;) then the first value will be the radius of top-left,
the second value will be used for the top-right, the third value
will be applied on bottom-right, and the fourth value is used for
bottom-left.
 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.
 border-collapse:
 This CSS property is used to set the border of the table cells and
specifies whether the table cells share the separate or common
border.
 This property has two main values that are separate and
collapse. When it is set to the value separate, the distance
between the cells can be defined using the border-spacing
property. When the border-collapse is set to the value collapse,
then the inset value of border-style property behaves like
groove, and the outset value behaves like ridge.
 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 border-spacing 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.
 border-spacing:
 This CSS property is used to set the distance between the
borders of the adjacent cells in the table. It applies only when the
border-collapse property is set to separate. There will not be any
space between the borders if the border-collapse is set to
collapse.
 It can be defined as one or two values for determining the
vertical and horizontal spacing.
 When only one value is specified, then it sets both horizontal and
vertical spacing.
 When we use the two-value syntax, then the first one is used to
set the horizontal spacing (i.e., the space between the adjacent
columns), and the second value sets the vertical spacing (i.e., the
space between the adjacent rows).This CSS property is used to
set the distance between the borders of the adjacent cells in the
table. It applies only when the border-collapse property is set to
separate. There will not be any space between the borders if the
border-collapse is set to collapse.
 It can be defined as one or two values for determining the
vertical and horizontal spacing.
 When only one value is specified, then it sets both horizontal and
vertical spacing.
 When we use the two-value syntax, then the first one is used to
set the horizontal spacing (i.e., the space between the adjacent
columns), and the second value sets the vertical spacing (i.e., the
space between the adjacent rows).
 border-image:
 This CSS property defines an image to be used as the element's
border. It draws an image outside the element and replaces the
element's border with the corresponding image. It is an
interesting task to replace the border of an element with the
image.
 The border-image property can be applied to all elements except
the elements of the internal table (such as tr, th, td) when
border-collapse is set to collapse.
 It is the shorthand property for border-image-source, border-
image-slice, border-image-width, border-image-outset, and
border-image-repeat. We can set all these properties at once
using the border-image property.
 https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
 The border-image property is the combination of many

properties which are listed below:
 border-image-source
 border-image-slice
 border-image-width
 border-image-outset
 border-image-repeat
__________________________________________________
7. Explain CSS display.
 The Display property in CSS defines how the components (div,
hyperlink, heading, etc) are going to be placed on the web page.
As the name suggests, this property is used to define the display
of the different parts of a web page.
 Display inline: This property is the default property of anchor
tags. This is used to place the div inline i.e. in a horizontal
manner. The inline display property ignores the height and the
width set by the user.
 The inline elements are: <span>, <a>, <em>, <b> etc.
 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.
 Display inline-block: 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.
 Display none: This property hides the div or the container which
use this property. Using it on one of the div it will make working
clear.
Value Description
inline It is used to display an element as an inline element.
block It is used to display an element as a block element

Value Description
contents It is used to disappear the container.
It is used to display an element as a block-level flex

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

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

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

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

inline-grid container.
inline-table It is used to display an inline-level table
list-item It is used to display all the elements in <li> element.
It is used to display an element inline or block level,

run-in depending on the context.
table It is used to set the behavior as <table> for all elements.
table- It is used to set the behavior as <caption> for all

caption elements.
table-
It is used to set the behavior as <column> for all
column-
elements.
group
table-
It is used to set the behavior as <header> for all
header-
elements.
group
table- It is used to set the behavior as <footer> for all elements.

Value Description
footer-
group
table-row-
It is used to set the behavior as <row> for all elements.
group
table-cell It is used to set the behaviour as <td> for all elements.
table-
It is used to set the behavior as <col> for all elements.
column
table-row It is used to set the behavior as <tr> for all elements.
none It is used to remove the element.
initial It is used to set the default value.
inherit It is used to inherit property from its parents’ elements.
__________________________________________________
8. Explain CSS cursor.
 It is used to define the type of mouse cursor when the mouse
pointer is on the element. It allows us to specify the cursor type,
which will be displayed to the user. When a user hovers on the
link, then by default, the cursor transforms into the hand from a
pointer.
 auto: This is the default property where the browser sets a
cursor.
 alias: This property is used to display the cursor’s indication of
something is to be created.
 all-scroll: In this property, the cursor indicates scrolling.
 cell: In this property, the cursor indicates a cell or set of cells are
selected.
 context-menu: In this property, the cursor indicates that a
context menu is available.
 col-resize: In this property, the cursor indicates that the column
can be resized horizontally.
 copy: In this property, the cursor indicates something is to be
copied.
 crosshair: In this property, the cursor renders as a crosshair.
 default: The default cursor.
 e-resize: In this property, the cursor indicates an edge of a box is
to be moved to the right.
 ew-resize: In this property, the cursor indicates a bidirectional
resize cursor.
 help: In this property, the cursor indicates that help is available.
 move: In this property, the cursor indicates something is to be
moved
 n-resize: In this property, the cursor indicates an edge of a box is
to be moved up.
 ne-resize: In this property, the cursor indicates an edge of a box
is to be moved up and right.
 nesw-resize: This property indicates a bidirectional resize cursor.
 ns-resize: This property indicates a bidirectional resize cursor.
 nw-resize: In this property, the cursor indicates an edge of a box
is to be moved up and left.
 nwse-resize: This property indicates a bidirectional resize cursor.
 no-drop: In this property, the cursor indicates that the dragged
item cannot be dropped here.
 none: This property indicates no cursor is rendered for the
element.
 not-allowed: In this property, the cursor indicates that the
requested action will not be executed.
 pointer: In this property, the cursor is a pointer and indicates link
 progress: In this property, the cursor indicates that the program
is busy.
 row-resize: In this property, the cursor indicates that the row can
be resized vertically.
 s-resize: In this property, the cursor indicates an edge of a box is
to be moved down.
 se-resize: In this property, the cursor indicates an edge of a box is
to be moved down and right.
 sw-resize: In this property, the cursor indicates an edge of a box
is to be moved down and left.
 text: In this property, the cursor indicates text that may be
selected.
 URL: In this property a comma-separated list of URLs to custom
cursors and a generic cursor at the end of the list.
 vertical-text: In this property, the cursor indicates vertical-text
that may be selected.
 w-resize: In this property, the cursor indicates an edge of a box is
to be moved left.
 wait: In this property, the cursor indicates that the program is
busy.
 zoom-in: In this property, the cursor indicates that something
can be zoomed in.
 zoom-out: In this property, the cursor indicates that something
can be zoomed out.
 initial: This property is used to set to its default value.
 inherit: Inherits from its parent element
__________________________________________________
9. Explain CSS Buttons.
 In HTML, we use the button tag to create a button, but by using
CSS properties, we can style the buttons. Buttons help us to
create user interaction and event processing. They are one of the
widely used elements of web pages. During the form submission,
to view or to get some information, we generally use buttons.
 Let's see the basic styling in buttons: We can apply background
color, border, color, padding, font-size, border-radius, box-
shadow, width, hover-effects.
__________________________________________________
10. Explain CSS Float property.
 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.
 Elements are floated only horizontally. so it is possible only to
float elements left or right, not up or down.
 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.
 The elements after the floating element will flow around it.
 The elements before the floating element will not be affected.
 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.
 Property values:
 none: This is the default value & the element does not float.
 left: Element floats on the left side of the container.
 right: Element floats on the right side of the container.
 initial: Element will be set to its default value.
 inherit: Element inherits floating property of its parent property.
__________________________________________________
11. Explain 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.
 There are many font properties in CSS which are mentioned
and briefly discussed below:
 CSS font-family Property: The font-family property specifies the
font of an element.
 CSS font-style Property: If we want to give design to any type of
text then we can make use of CSS font-style property.
 CSS font-weight Property: The font-weight property of the CSS is
used to set the weight or thickness of the font being used with
the HTML Text.
 CSS font-variant Property: The font-variant property is used to
convert all lowercase letters into uppercase letters.
 CSS font-size Property: The font-size property in CSS is used to
set the font size of the text in an HTML document.
 CSS font-stretch Property: The font-stretch property in CSS is
used to set the text wider or narrower.
 CSS font-kerning Property: This property is used to control the
usage of the Kerning Information that has been stored in the
Font.
 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: By a color name, By hexadecimal value, By RGB.
__________________________________________________
12. Explain CSS colors.
 CSS Color property is used to set the color of HTML elements.
This property is used to set font color, background color, etc.
The color of an element can be defined in the following ways:
1. Built-In Color: These are a set of predefined colors which are
used by its name. For example: red, blue, green etc.
2. RGB Format: The RGB (Red, Green, Blue) format is used to
define the color of an HTML element by specifying the R, G, B
values range between 0 to 255. For example: RGB value of Red
color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0,
255) etc.
3. RGBA Format: The RGBA format is similar to the RGB, but the
difference is RGBA contains A (Alpha) which specifies the
transparency of elements. The value of alpha lies between 0.0
to 1.0 where 0.0. represents fully transparent and 1.0
represents not transparent.
4. Hexadecimal Notation: The hexadecimal notation begins with #
symbol followed by 6 characters each ranging from 0 to F. For
example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
5. HSL: HSL stands for Hue, Saturation, and Lightness respectively.
This format uses the cylindrical coordinate system.
Hue: Hue is the degree of the color wheel. Its value lies between
0 to 360 where 0 represents red, 120 represents green and 240
represents blue color.
Saturation: It takes a percentage value, where 100% represents
completely saturated, while 0% represents completely
unsaturated (gray).
Lightness: It takes percentage value, where 100% represents
white, while 0% represents black.
6. HSLA: The HSLA color property is similar to HSL property, but
the difference is HSLA contains A (Alpha) which specifies the
transparency of elements. The value of alpha lies between 0.0
to 1.0 where 0.0. represents fully transparent and 1.0
represents not transparent.
 List of Colors: Following is the list of a few CSS colors.
Color Hex Decimal
Name (RGB) (RGB) Color
Red FF0000 255, 0, 0
Pink FFC0CB 255, 192, 203
Orange FFA500 255, 165, 0
Yellow FFFF00 255, 255, 0
Violet EE82EE 238, 130, 238
Green 008000 0, 128, 0
Aqua 00FFFF 0, 255, 255
Blue 0000FF 0, 0, 255
Brown A52A2A 165, 42, 42
White FFFFFF 255, 255, 255
Gray 808080 128, 128, 128
Black 000000 0, 0, 0
__________________________________________________
13. Explain CSS Hovers.
 The :hover selector is for selecting the elements when we move
the mouse on them. It is not only limited to the links. We can
use it on almost every HTML element. To style the link to
unvisited pages, we can use the :link selector. To style the link
for visited pages, we can use the :visited selector and to style
the active links we can use the :active selector.
 It is introduced in CSS1. The hover can be used to highlight the
web pages as per the preference of users in an effective web-
designing program.
 The hover feature includes the following effects:
 Change the color of the background and font.
 Modify the opacity of the image.
 Text embedding.
 Create image rollover effects.
 Swapping of images.
 NOTE: To make the hover effective, we must have to declare it
after the :link and :visited selectors if they are present in the CSS
definition.
 Basically, the hover effect modifies the element's property value
to enable the animate changes on a stated image/text or the
corresponding elements. Embedding of the hover elements in
the web pages makes them interactive and functional.
 Generally, the hover feature is compatible with all of the main
browsers. But it will be a challenging task to implement it on
touch devices. It is observed that an active hover function gets
stuck on the non-supportive device.
__________________________________________________
14. Explain 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.
__________________________________________________
15. Explain CSS Line-Height.
 The line-height property in CSS is used to set the amount of
space used for lines, such as in the text. Negative values are not
allowed.
 normal: This mode represents the normal line height. This is the
default value.
 initial: This mode is used to set this property to its default value.
 number: This value is a unitless number multiplied by the
current font-size to set the line height. In most cases, this is the
preferred way to set line height and avoid unexpected results
due to inheritance.
 length: In this mode a fixed line height is specified.
 percentage: This mode is used to set line height in percent of
the current font size.
__________________________________________________
16. Explain 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:
Property Description
margin This property is used to set all the properties in one

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

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

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

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

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

 Shorthand property:
 margin: top | right | bottom | left.
 margin: top | left and right | bottom.
 margin: top and bottom | left and right.
 margin: top and right and bottom and left.
__________________________________________________
17. Explain 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.
 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.
__________________________________________________
18. Explain 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.
 none, blur(), brightness(), contrast(), drop-shadow(), invert(),
grayscale(), hue-rotate(), opacity(), saturate(), sepia(), url().
 none: It is the default value and it does not apply any effect.
 brightness(): It sets the brightness of the element. If the
brightness is 0% then it is completely black and if the brightness
is 100% then it is the same as the original. The values greater
than 100% result in brighter elements.
 grayscale(): It converts the element colors into black and white.
The grayscale 0% indicates the original element and 100%
indicates the completely grayscale element. It does not accept
the negative values.
 sepia(): It converts the image into the sepia image where 0%
represents the original image and 100% represents completely
sepia. It does not accept the negative values.
 contrast(): It helps to adjust the contrast of the element. The 0%
contrast indicates the complete black element and the 100%
contrast indicate the original element.
 saturate(): It is used to set the saturation of elements. The 0%
saturate indicates an element is completely unsaturated and
the 100% saturate indicates the original image. The value
greater than 100% result is the super-saturated element.
 blur(): It applies the blur effect to the element. If the blur value
is not specified then it takes 0 as the default value.
 opacity(): It sets the opacity effect of the image. The 0% opacity
indicates the element is completely transparent and if opacity is
100% then it indicates the original image. It doesn’t accept the
negative value.
 hue-rotate(): It applies a hue rotation to the image. The value
defines the number of degrees around the color circle the
image samples will be adjusted. The default value is 0 degrees
and it represents the original image.
 invert(): It inverts the element. The default value is 0% and it
represents the original image. The 100% makes the image
completely inverted. It doesn’t accept the negative value.
 drop-shadow(): It applies a drop shadow effect to the element.
It accepts h-shadow, v-shadow, blur, spread, and color as
values. It is not only applied to images but it can be applied to
shapes as it can have the same shape as of original one. The
negative values for the h-shadow & v-shadow will shift the
shadow to the left of the image.
 initial: It sets the filter property to its default value.
__________________________________________________
19. Explain CSS Styling Images.
 Styling images in CSS works exactly the same way as styling any
element using the Box Model of padding, borders, and margins
for the content. There are many ways to set style in images
which are listed below:
 Thumbnail images
 Rounded images
 Responsive Images
 Transparent Image
 Center an Image
 Link: https://www.geeksforgeeks.org/css-styling-images/
__________________________________________________
20. Explain CSS overflow.
 The CSS overflow controls the big content. It tells whether to
clip content or to add scroll bars. The overflow contains the
following property:
 visible: The content is not clipped and is visible outside the
element box.
 Hidden: The overflow is clipped and the rest of the content is
invisible.
 Scroll: The overflow is clipped but a scrollbar is added to see
the rest of the content. The scrollbar can be horizontal or
vertical.
 Auto: It automatically adds a scrollbar whenever it is required.
 Overflow-x and Overflow-y: This property specifies how to
change the overflow of elements. x deals with horizontal edges
and y deals with vertical edges.
 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
__________________________________________________
21. Explain CSS padding.
 CSS Padding is the space between the content and the border
of an element. It adds spacing inside the element, controlling
its internal space, thus affecting its dimensions and
appearance.
 CSS Padding Properties: CSS provides properties to specify
padding for each side of an element individually.
 padding-top: Sets the padding for the top side of the element.
 padding-right: Sets the padding for the right side of the
element.
 padding-bottom: Sets the padding for the bottom side of the
element.
 padding-left: Sets the padding for the left side of the element.
 Padding: top | right | bottom | left;
 Padding: top | left or right | bottom.
 Padding: top or bottom | left or right.
 Padding: all four sides.
 Values can be given in px, pt, %.
__________________________________________________
22. Explain CSS position.
 The CSS position property is used to set position for an element.
it is also used to place an element behind another and also
useful for scripted animation effect.
 You can position an element using the top, bottom, left and
right properties.
 static (default): It is the default position value for the element.
Under static position, elements are positioned according to the
normal flow of the page.
Note: left, right, top, and bottom properties will not affect if the
position is static.
 Relative: In this case, the element remains in the normal flow of
the document but left, right, top, and bottom affects. Elements
get shifted from their original position in the document creating
vacant space and other elements may adjust themselves
according to the vacant space left by the element.
 Absolute: The absolute positioning is used to position an
element relative to the first parent element that has a position
other than static. If no such element is found, the containing
block is HTML.
With the absolute positioning, you can place an element
anywhere on a page.
 Fixed: The fixed positioning property helps to put the text fixed
on the browser. This fixed test is positioned relative to the
browser window, and doesn't move even you scroll the window.
 Sticky: It’s kind of a little tricky but very easy to understand. We
can think of sticky as a combination of relative and fixed.
Remember fixed elements remain fixed at some position but
the sticky element will behave relative to a certain point and
after behave like a fixed.
 Link:https://www.geeksforgeeks.org/explain-the-positions-
property-in-css/
__________________________________________________
23. Explain CSS vertical align.
 Vertical-align property in CSS is used to specify the vertical
alignment of the table-box or inline element.
 Note: This property is mostly used to align images to it’s
corresponding text.
 This property can also be used to align the cells inside tables.
 The vertical-align property cannot be used for the alignment of
block level elements like p, ol, ul, h1, div etc.
 Property Values:
 baseline: It aligns the element baseline corresponding to the
baseline of the parent. This might vary according to the
browser. It is the default value.
 sub: It aligns the element baseline corresponding to the
subscript-baseline of its parent.
 super: It aligns the element baseline corresponding to the
superscript-baseline of its parent.
 text-top: It aligns the element top corresponding to the top of
the parent’s font.
 text-bottom: Align the element’s bottom corresponding to the
bottom of the parent’s font.
 middle: Aligns the element’s middle corresponding to the
middle of the parent.
 top: Aligns the element’s top corresponding to the top of the
tallest element on it’s line.
 bottom: Aligns the element’s bottom corresponding to the top
of the shortest element on it’s line.
 length: Aligns the baseline of the element to the given length
above the baseline of its parent. A negative value is allowed.
 percentage: Aligns the element’s baseline corresponding to the
given percentage above the baseline of its parent, with the
value being a percentage of the line-height property.
 initial: Initializes the value to the default value.
 inherit: Inherits the value from the parent element.
__________________________________________________
24. Explain CSS whitespace.
 The white-space property in CSS is used to control the text
wrapping and white-spacing ie., this property can be used to
set about the handling of the white-space inside the elements.
There are several types of values in this property to use.
 normal: This is the default value of this property. When the
white-space property of CSS is set to normal, every sequence of
two or more white spaces will appear as a single white-space.
The content in the element will wrap wherever necessary.
 nowrap: When the white-space property of CSS is set to
nowrap every sequence of two or more white-spaces will
appear as a single white-space. The content in the element will
not be wrapped to a new line unless explicitly specified.
 pre: This value makes the white-space have the same effect as
<pre>tag in HTML. The content in the element will wrap only
when specified using line breaks.
 pre-line: When the white-space property of CSS is set to a pre-
line value, every sequence of two or more white-spaces will
appear as a single white-space. The content in the element will
be wrapped when required and when explicitly specified.
 pre-wrap: When the white-space property of CSS is set to a pre-
line value, every sequence of white-spaces will appear as it is.
The content in the element will be wrapped when required and
when explicitly specified.
 initial: This value sets the white-space property to the default
value.
 inherit: This value sets the white-space property to the value of
the parent element.
__________________________________________________
25. Explain CSS height and width.
 Width property:
 The width property in CSS is used to set the width to the text,
images. The width can be assigning to the text and images in
the form of pixels(px), percentage (%), centimetre(cm) etc. The
width property does not contain padding, borders, or margins.
The width property is overridden by the min-width & max-
width properties. The width property, by default, sets the width
for the content area, although if the value of the box-sizing is
set to border-box then it will set the width of the border area.
 Note: The width property for the element does not involve the
padding, border & margin.
 auto: It is used to set the width property to its default value. If
the width property is set to auto then the browser calculates
the width of the element.
 value: It is used to set the width in the form of pixels(px),
Percentage (%), centimetre(cm) etc. The width cannot be
negative.
 initial: It is used to set an element’s CSS property to its default
value.
 inherit: It is used to inherit a property to an element from its
parent element property value.
 Height property:
 The height property is used to set the height of an element. The
height property does not contain padding and margin and
border of the element.
 auto: It is used to set the height property to its default value. If
the height property is set to auto then the browser calculates
the height of the element.
 length: It is used to set the height of the element in the form of
px, cm, etc. The length cannot be negative.
 initial: It is used to set the height property to its default value.
 inherit: It is used to set the height property from its parent
element.
__________________________________________________
26. Explain CSS word wrap.
 The word-wrap property in CSS is used to break long words and
wrap them into the next line. It defines whether to break words
when the content exceeds the boundaries of its container.
 normal: It is the default value, the lines can only be broken at
normal break points (spaces, non-alphanumeric characters,
etc.).
 break-word: Words that exceed the width of the container will
be arbitrarily broken to fit within the container’s bounds.
 initial: It is used to set word-wrap property to its default value.
 inherit: This property is inherited from its parent.
__________________________________________________
27. Explain CSS Box Shadow.
 The box-shadow property in CSS is used to give a shadow-like
effect to the frames of an element. The multiple effects can be
applied to the element’s frame which is separated by the
comma. The box-shadow can be described using X and Y offsets
relative to the element, blur and spread radius, and color.
 h-offset: It is required to set the position of the shadow
horizontally. The positive value is used to set the shadow on
the right side of the box and a negative value is used to set the
shadow on the left side of the box.
 v-offset: It is required to set the position of shadow value
vertically. The positive value is used to set the shadow below to
the box and a negative value is used to set the shadow above
the box.
 blur: It is an optional attribute, the work of this attribute is to
blur the shadow of the box.
 box-shadow: h-offset v-offset blur;
 spread: It is used to set the size of the shadow. The size of the
spread depends on the value of the spread.
 color: It is an optional attribute and is used to set the color of
the shadow.
 box-shadow: h-offset v-offset blur spread color;
 inset: By default, the shadow generates outside the box. But
using the inset, we can create the shadow inside the box.
 initial: It is used to set the box-shadow property to its default
value.
 inherit: This property is inherited from its parent.
 none: It is the default value and it does not contain any shadow
property.
__________________________________________________
28. Explain CSS text shadow.
 The text-shadow property in CSS is used to add shadows to the
text. This property accepts a list of shadows that are to be
applied to the text, separated by the comma. The default value
of the text-shadow property is none.
 h-shadow: This property is required & used to specify the
position of horizontal shadow. It accepts the negative values.
 v-shadow: This property is required & used to specify the
position of vertical shadow. It also accepts the negative values.
 blur-radius: It is used to set the blur radius. Its default value is 0
& is optional.
 none: It represents no shadow added to the text, this is the
default value.
 color: It is used to set the color of the shadow. It is optional.
 initial: It is used to set text-shadow to its default value.
 inherit: This property is inherited from its parent element.
__________________________________________________
29. Explain CSS text transform.
 The text-transform property is used to control the
capitalization of the text.
 none: It has a default value. It has no Capitalization.
 capitalize: It is used to transform the first character of each
word to uppercase.
 uppercase: It is used to convert or transform all characters in
each word into uppercase.
 lowercase: It is used to convert or transform all characters in
each word to lowercase.
 initial: It sets the property to its Default Value.
__________________________________________________
30. Explain CSS outline.
 The outline CSS shorthand property allows drawing a line
around the element, outside the border. It is used to set all the
properties of the outline in a single declaration. CSS outline
properties can be categorized into 4 types, namely, Outline-
style, Outline-color, Outline-width & Outline-offset. We will
discuss all the types of outline properties sequentially through
the examples.
 Outline-style: It is used to set the appearance of the outline of
an element ie., it tells us the style or type of outline. Any other
outline property cannot be accessed without setting the
outline-style. If absent then the default style will be set to
none.
 auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;
 Outline-color: It is used to sets the outline color of an element.
The color can be set by its name ie., rgb value or a hex value,
etc. If absent then the default color will be the current color.
 Outline-width: It is used to specify the width of this outline for
a specific element. The width of the outline can be set by
specifying the size of the width in px, cm, pt, etc, or by using
terms like a thin, thick, medium. If absent then the default
width will be the medium.
 Outline-offset: The CSS outline-offset Property sets the amount
of space between an outline and the edge or border of an
element. An outline is a line drawn around elements outside
the border edge. The space between the element and its
outline is transparent. Also, the outline may be non-
rectangular. The default value is 0.
__________________________________________________
31. Explain CSS visibility.
 This property is used to specify whether an element is visible or
not in a web document but the hidden elements take up space
in the web document. Use the display property to remove or
display property to both hide and delete an element from the
browser.
 visibility: visible|hidden|collapse|initial|inherit;
 visible: It is the default value. The element is show or visible
normally in the web document.
 hidden: This property hide the element from the page but takes
up space in the document.
 collapse: This property only used for the table elements. It is
used to remove the rows and column from the table but it does
not affect the layout of the Table. But their space is available
for other content.
 Note: This property is not used for other elements except table
elements.
__________________________________________________
32. Explain CSS counter.
 Counters in CSS are basically variables that can be used for
numbering and values of CSS counters may be incremented by
CSS rules. For example, CSS counters can be used to increment
the numbering of the headings automatically. In HTML, <ol> tag
is used to give the ordered numbers to list items but CSS
contains a counter to give order elements in some other
fashion.
 CSS counters properties: CSS counters contain the following
properties:
 counter-reset: It is used to reset a counter.
 counter-increment: It basically increments a counter value.
 content: It is used to generate content.
 counter () or counters () function: The value of a counter can
be displayed using either the counter () or counters () function
in a content property. These two functions basically used to
add the value of a counter to the element.
 Initialization the CSS Counter: To use the CSS counter property
firstly it must be created with the counter-reset property and
the first step is resetting the counter. The myCounter by default
initialized to a value 0(zero) with the counter-reset property.
 counter-reset: myCounter;
 Incrementation and Use of CSS Counter: To increment the
counter use CSS counter-increment property.
 counter-increment: myCounter;
 The counter () or counters() function in a content is used to
display the content in a particular order.
 content: counter(myCounter);
 Nested CSS counters: The counter within a counter is known as
a nested counter. Nested counters are used to create headings
and subheadings. This example shows the use of CSS counters
with nested tags. Different counters are used for different types
of tags.
 Link: https://www.geeksforgeeks.org/css-counters/
Example-1:
<!DOCTYPE html>
<html>
<head>
<title>Nested css counter</title>
<style>
body {
counter-reset: counter1;
}
h3 {
counter-reset: counter2;
}
h3::before {
counter-increment: counter1;
content: counter(counter1) ". ";
}
h4::before {
margin-left: 40px;
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) " ";
}
.geeks {
color: #090;
font-size: 40px;
font-weight: bold;
}
.gfg {
font-size: 18px;
}
</style>
</head>
<body>
<div class="geeks">Heading</div>
<div class="gfg">Nested counter property</div>
<h3>CSS counter example</h3>
<h4>GeeksforGeeks</h4>


</body>
</html>
Browser:
__________________________________________________
33. Explain CSS clearfix.
 A clearfix is a way for an element to automatically clear or fix its
elements so that it does not need to add additional markup. It
is generally used in float layouts where elements are floated to
be stacked horizontally. If the element is taller than the
element containing it then use the overflow property of CSS by
setting its value as auto in order to overcome & fix the
problem.
 Example: From the below image, the logo is not fit into the div
element.
 To fix this problem, there are two ways. The first is by

increasing the height of the div block and the second by the use
of clearfix CSS property.
__________________________________________________
33. Explain CSS icons.
 Icons can be defined as the images or symbols used in any
computer interface refer to an element. It is a graphical
representation of a file or program that helps the user to
identify about the type of file quickly.
 Using the icon library is the easiest way to add icons to our
HTML page. It is possible to format the library icons by using
CSS. We can customize the icons according to their color,
shadow, size, etc.
 There are 3 types of icon libraries available, namely
1. Font Awesome Icons
2. Google Icons
3. Bootstrap Icons
 Link: https://www.geeksforgeeks.org/css-icons/
__________________________________________________
34. Explain CSS justify content.
 This CSS property is used to align the items of the flexible box
container when the items do not use all available space on the
main-axis (horizontally). It defines how the browser distributes
the space around and between the content items.
 This CSS property can't be used to describe containers or items
along the vertical axis. To align the items vertically, we have to
use the align-items property.
 Property values
 center: As its name implies, it set the position of items at the
center of the container.
 flex-start: It is the default value that positioned the items at
the beginning of the container.
 flex-end: It set the position of items at the end of the
container.
 space-around: It positioned the items with equal spacing from
each other. It evenly distributes the items in the line along with
the same space around them.
 space-between: Items are evenly spaced in which the first item
is at the beginning, and the last item is at the end.
 space-evenly: It also positioned the items with equal space, but
the spacing from the corners differs.
__________________________________________________
35. Explain CSS text-decoration.
 The text-decoration-style property in CSS is used to set the
text-decoration of an element. The text-decoration property is
the combination of text-decoration-line, text-decoration-style,
and text-decoration-color properties.
 solid: It draw a solid single line. It is the default value of the
text-decoration-style property.
 double: It draws double solid lines.
 dotted: It draws a dotted line.
 dashed: It draws a dashed line.
 wavy: It draws a wavy line.
 initial: It sets the text-decoration-style property to its default
value.
 inherit: This property is inherited from its parent element.
 We can apple these properties with underline, overline and
line-through: solid underline, solid overline, solid line-through,
double underline, double overline, double line-through, dotted
underline, dotted overline, dotted line-through.
__________________________________________________
36. Explain CSS Lists.
 The List in CSS specifies the listing of the contents or items in a
particular manner i.e., it can either be organized orderly or
unorder way, which helps to make a clean webpage. It can be
used to arrange the huge with a variety of content as they are
flexible and easy to manage. The default style for the list is
borderless. The list can be categorized into 2 types:
 Unordered List: In unordered lists, the list items are marked
with bullets i.e. small black circles by default.
 Ordered List: In ordered lists, the list items are marked with
numbers and an alphabet.
 We have the following CSS lists properties, which can be used
to control the CSS lists:
 list-style-type: This property is used to specify the appearance
(such as disc, character, or custom counter style) of the list
item marker.
 list-style-image: This property is used to set the images that
will be used as the list item marker.
 list-style-position: It specifies the position of the marker box
with respect to the principal block box.
 list-style: This property is used to set the list style.
 Now, we will learn more about these properties with examples.
 List Item Marker: This property specifies the type of item
marker i.e. unordered list or ordered. The list-style-type
property specifies the appearance of the list item marker (such
as a disc, character, or custom counter style) of a list item
element. Its default value is a disc.
 The following value can be used:
1. circle
2. decimal, eg :1,2,3, etc
3. decimal-leading-zeroes, eg :01,02,03,04, etc
4. lower-roman
5. upper-roman
6. lower-alpha, eg: a, b, c, etc
7. upper-alpha, eg: A, B, C, etc
8. square
 Image as List Marker: This property specifies the image as a list
item marker. The list-style-image property is used to sets an
image to be used as the list item marker. Its default value is
“none”.
 List Marker Position: This property specifies the position of the
list item marker. The list-style-position property is used to sets
the position of the marker relative to a list item. Its default
value is “outside”.
 There are 2 types of position markers:
 list-style-position: outside; In this, the bullet points will be
outside the list item. The start of each line of the list will be
aligned vertically.
 list-style-position: inside; In this, the bullet points will be inside
the list. The line along with the bullet points will be aligned
vertically.
 Shorthand Property: Shorthand Property allows us to set all
the list properties in one command. The order of property is a
type, position, and image. If any of the properties is missing,
the default value is inserted. List-style: square inside;
 Styling Lists: The list can be formatted in CSS. Different colors,
borders, backgrounds, and paddings can be set for the lists.
 Nested List: Lists can also be nested. We have sub-sections for
sections, so we need the nesting of lists.
__________________________________________________
37. Explain CSS nth selector.
 The :nth-child() CSS pseudo-class selector is used to match the
elements based on their position in a group of siblings. It
matches every element that is the nth-child, regardless of the
type, of its parent.
 Where number is the single argument that represents the
pattern for matching elements. It can be odd, even, or in a
functional notation.
 odd: It represents elements whose position is odd in a series: 1,
3, 5, etc.
 even: It represents the elements whose position is even in a
series: 2, 4, 6, etc.
 functional notation (<An+B>): It represents elements whose
position of siblings matches the pattern An+B, for every
positive integer or zero value of n. Here, A represents the
integer step size, and B represents the integer offset.
__________________________________________________
38. Explain CSS sticky.
 The CSS position property is used to set the position for an
element. It is also used to place an item behind another
element and also useful for the scripted animation effect. The
"position: sticky;" is used to position the element based on the
scroll position of the user.
 This CSS property allows the elements to stick when the scroll
reaches to a certain point. Depends upon the scroll position, a
sticky element toggles in between fixed and relative. The
element will be positioned relative until the specified position
of offset is met in the viewport. Then, similar to position: fixed,
the element sticks in one place.
 For more click on: https://www.geeksforgeeks.org/what-is-the-
difference-between-positionsticky-and-positionfixed-in-css/
__________________________________________________
39. Explain CSS checkbox style.
 The checkbox is an HTML element used to take input from the
user. It is hard to style the checkbox, but pseudo-elements
makes it easier to style a checkbox.
 This HTML element is generally used on every website, but
without styling them, they look similar on every website. So,
styling them will make our site different and attractive. We
have to hide the original checkbox in order to style the
checkbox. Styling the checkboxes using CSS is an interesting
and creative task, which will provide a new and attractive look
to the default checkbox.
 Link-1: https://www.javatpoint.com/css-checkbox-style
 Link-2 GeeksforGeeks: https://www.geeksforgeeks.org/how-
to-style-a-checkbox-using-css/
__________________________________________________
40. Explain CSS letter spacing.
 This CSS property used to control the space between every
letter inside an element or the block of text. It sets the spacing
behavior between the characters of the text. Using this
property, we can increase or decrease the space between the
characters of the text. It modifies the space between the
adjacent characters.
 normal: It is the default value that does not provide any space
between the characters. It does not change the default spacing
between the letters. It is similar to set the value to 0.
 length: It is used to specify an additional space between the
characters. It allows the negative values that tighten the text
appearance instead of loosening it. The greater length implies
the maximum space between the letters. This value supports
the font-relative values (em, rem), absolute values (px).
Negative values are also allowed.
 A large negative or positive value of letter-spacing will make
the word unreadable. If we apply a very large positive value, it
will cause the appearance of letters like a series of
unconnected and individual letters. A very large negative value
will overlap the letter to each other, which makes the word
unrecognizable.
__________________________________________________
41. Navigation bar.
 A Navigation bar or navigation system comes under GUI that
helps the visitors in accessing information. It is the UI element
on a webpage that includes links for the other sections of the
website.
 A navigation bar is mostly displayed on the top of the page in
the form of a horizontal list of links. It can be placed below the
logo or the header, but it should always be placed before the
main content of the webpage.
 It is important for a website to have easy-to-use navigation. It
plays an important role in the website as it allows the visitors to
visit any section quickly.
 Examples: Horizontal Navigation bar, Border dividers, Fixed
Navigation bars, Sticky Navbars, Dropdown Navbar, vertical
Navigation bar, Full height fixed Vertical Navbar.
Example-1:
Browser:
__________________________________________________
42. Explain CSS Overlay.
 Overlay means to cover the surface of something with a coating.
In other words, it is used to set one thing on the top of another.
The overlay makes a web-page attractive, and it is easy to design.
 Creating an overlay effect means to put two div together at the
same place, but both will appear when required. To make the
second div appear, we can hover or click on one div. In these two
divs, one div is the overlay div that contains what will show up
when the user hovers over the image, and the second div is a
container that will hold both the image and its overlay.
 Check out: https://blog.logrocket.com/guide-image-overlays-css/
 Check out: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/
 Check out: https://imagekit.io/blog/css-image-overlay/
__________________________________________________
43. Explain CSS root.
 This pseudo-class in CSS matches the root element of the
document. It selects the highest-level parent in the document
tree or DOM.
 In HTML, the <html> element is always the root element.
Although the: root is equivalent to html selector because both
of them target the same element, but the: root selector has a
higher specificity.
__________________________________________________
[
44. Explain CSS specificity.

 When more than one conflicting rules of CSS indicates the same
element, then the browser will follow some rules for
determining the particular one. Specificity is the way which
helps the browsers to decide which property value is most
relevant for the element. It determines which style declaration
is applied to an element.
 The CSS specificity is important only when various selectors are
affecting the same element. In this case, the browser needs a
way to identify the style to be applied to the matching element,
and CSS specificity is the way of doing it.
 When two or more selectors have equal specificity value, then
the latest one considers.
 Universal selectors (*) and the inherited values have lower
specificity, i.e., 0 specificity.
 The style property has a greater specificity value compare to the
selectors (except the! important in the stylesheet selector).
 The! important alter the selector specificity. When two selectors
have equal specificity, then the selector having! Important.
Specificity hierarchy: Each selector has a place in the hierarchy.
There are mainly four categories that define the selector's specificity
level:
 Inline styles: It is directly attached to the element which is to be
styled. For example: <p style="color: red;">. It has the highest
priority.
 IDs: It is a unique identifier for the elements of a page that has
the second-highest priority. For example: #para.
 Classes, attributes, and pseudo-classes: It includes classes,
attributes, and pseudo-classes (like :focus, :hover, etc.).
 Elements and pseudo-elements: It includes the name of
elements (div, h1) and pseudo-elements (like :after
and :before). They have the lowest priority.
 Specificity rules: Specificity is the weight, which is applied to the
CSS declaration. It is determined by the number of every
selector type in the matching selector. Let's see the calculation
of specificity.
 The specificity of ID selectors is higher than attribute selectors
 In equal specificity, the latest rule will count
 In the external stylesheet, if the same rule is applied twice, then
the latest (or last) rule will be applied.
 The specificity of class selector is greater than the element
selectors
 A class selector (.nav, .high, etc.) is highly specific than element
selectors (like div, h1, p, etc.)
__________________________________________________
45. Explain CSS text indent.
 The text-indent property in CSS is used to define the
indentation of the first line in each block of text. It also take
negative values. It means if the value is negative then the first
line will be indented to the left.
 length: This value sets the fix indentation with the units cm, pt,
em, px, and others. Its default value is 0. It allows negative
values. The indentation of the first line is on the left when its
value is negative.
 percentage: It specifies the amount in space in the percentage
of the width of the containing block.
 This CSS property has two experimental values, which are
discussed as follows. These two following values are not
supported in browsers.
 hanging: It is unofficial and experimental value. It inverts the
indented lines. It indents each line except the first. Usually,
bibliographies are written with the hanging indents, in which
the first line is with the left-hand margin, and the rest of the
content is indented.
 each-line: It is also an experimental value. It affects every line,
including the first line after a forced line break (using <br>).
__________________________________________________
46. Explain CSS text stroke.
 This CSS property adds a stroke to the text and also provides
decoration options for them. It defines the color and width of
strokes for text characters.
 This CSS property is the shorthand of the following two
properties:
 text-stroke-width: It describes the thickness of the stroke effect
and takes the unit value.
 text-stroke-color: It takes the value of a color.
 The text-stroke can only be used with the -webkit- prefix.
 the -webkit-text-fill-color fills the foreground color of the text
content of an element.
__________________________________________________
47. Explain CSS zoom.

 This CSS property scales the content . It manages the
magnification level of the content. Instead of using this
property, we can also use the transform: scale (); property.
 The use of this CSS property is not recommended because it is
not supported in some browsers. It is a non-standard feature,
which is recommended not to use on production sites. It was
initially implemented in the IE browser.
 This property supports the values mentioned above are
discussed as follows.
 normal: It shows the element to its normal size. It defines the
normal size of the element. Tt holds the normal content that
does not zoom-out or zoom-in. It has the value zoom: 1;
 number: It is a positive float value that indicates a zoom factor.
Its value smaller than 1.0 represents zoom out (or size
reduction), and larger than 1.0 represents zoom in (increase the
size). Suppose we specify zoom: 1.5; then, the content will be
1.5 times larger than the original content.
 percentage: It defines a value in percentage. Its 100% value is
equivalent to normal. It scales the content using the percentage
value. Its value greater than 100% represents zoom in, and
value less than 100% represents zoom out. Suppose if we define
zoom: 175%; then it means that the content will be 175% larger
than the original content.
__________________________________________________
48. Explain CSS order.
 This CSS property specifies the order of the flex item in the grid
container or flex. It is basically used for ordering the flex items.
It is to note that, if the element isn't flexible, then this property
will not work.
 The elements will get displayed in the increasing order of their
order values. If two elements use the same order value, then
they will display based on their occurrence defined in the source
code.
 The order property modifies the visual order of the flex items.
The item with the lowest order value comes first, and a higher
value will be placed afterward. It only affects the visual order of
elements rather than the tab or logical order. It must not be
used on non-visual media such as speech.
 It is allowed to define the negative values of order. Negative
values are useful when we want to display one item first and
leave the order of other items unchanged. When there is no
value is specified, then the value 0 will be used, which is its
default value. So, when we want to display an item first, we can
provide it a negative value such as -1. As this negative value is
smaller than 0, then the corresponding item will always be
displayed first.
__________________________________________________
49. Explain CSS descendent selector.
 The CSS descendant selector is used to match the descendant
elements of a particular element. The word Descendant
indicates nested anywhere in the DOM tree. It can be a direct
child or deeper than five levels, but it will still be referred to as a
descendant.
 The Descendant combinator is represented using a single space.
It combines two selectors in which the first selector represents
an ancestor (parent, parent's parent, etc.), and the second
selector represents descendants. The elements matched by the
second selector are selected if they have an ancestor element
that matches the first selector. Descendant selectors use the
descendant combinators.
__________________________________________________
50. Explain CSS calc ().
 It is an inbuilt CSS function which allows us to perform
calculations. It can be used to calculate length, percentage,
time, number, integer frequency, or angle. It uses the four
simple arithmetic operators add (+), multiply (*), subtract (-),
and divide (/).
 It is a powerful CSS concept because it allows us to mix any
units, such as percentage and pixel,
 The arithmetic operators add (+) and subtract (-) should always
be surrounded by whitespace. Otherwise, the expression will be
treated as an invalid expression. As an example, calc(60%-4px)
will be invalid because it is parsed as a percentage, followed by
a negative length. On the other hand, the expression calc(60% -
4px) will be parsed as a subtraction operator and a length.
 Although the operators * and / does not requires whitespace,
but it is recommended to add it for consistency.
 Nesting of calc() function can be possible.
__________________________________________________
51. Explain CSS clip.
 The clip property specifies defining what portion of an absolutely
positioned element you want to make visible. Except for the
specified region, the rest all other the regions are hidden. The
clip property is only applicable to the absolutely positioned
element ie., the element having the position: absolute or
position: fixed.
 Note:
 CSS clip property won’t work for “overflow: visible”.
 The clip property is now deprecating which will be replaced by
the clip-path property.
 auto: It is the default value, there won’t be any clipping. The
element is shown as it is.
 shape: shape clips the defined portion of the element. The rect
(top, right, bottom, left) is used to define the visible portion.
 initial: initial sets the default value i.e. there won’t be any
clipping as the default value is auto.
 inherit: inherit receives the property from the parent element.
When it is used with the root element then the initial property
will be used.
__________________________________________________
52. Explain CSS clip path.
 This CSS property is used to create a clipping region and specifies
the element's area that should be visible. The area inside the
region will be visible, while the outside area is hidden. Anything
outside the clipping will be clipped by browsers, including borders,
text-shadows, and many more.
 It allows us to define a particular region of the element to display,
instead of displaying the entire area. It makes it easier to clip the
basic shapes by using ellipse, circle, polygon, or inset keywords.
 Link-1: https://www.javatpoint.com/css-clip-path
 Link-2: https://www.geeksforgeeks.org/css-clip-path-property/
__________________________________________________
53. Explain CSS Radio button.
 The radio button is an HTML element that helps to take input
from the user. Although it is hard to style the radio button,
pseudo-elements makes it easier to style the radio button. Radio
buttons are applied when there is the requirement of a single
selection from a group of items.
 This HTML element is generally used on every website, but

without styling them, they look similar on every website. So,
styling them will make our site different and attractive. Designing
the radio button using CSS is an interesting and creative task,
which will provide a new look to the default radio button.
__________________________________________________
54. Explain CSS subscript and superscript.
 In HTML, there is the use of <sub> and <sup> tags to define the
subscript and superscript text. The superscript text appears in a
smaller font and the half character above the normal line. It is
generally used to write mathematical equations (like x2 + y2 =
r2), footnotes, and many more.
 Unlike superscript, the subscript text appears in a smaller font
and the half character below the normal line. It is generally
used to write chemical equations or chemical formulas such as
H2O, H2SO4, etc.
 In CSS, the vertical-align property is used to achieve the same
thing. We can specify the superscript and subscript of text using
CSS as well. This CSS property specifies the vertical alignment of
the text.
 vertical-align: baseline | super | sub;
__________________________________________________
55. Explain CSS text effects.
 CSS is the mechanism to adding style in the various web
documents. Text Effects allows us to apply different types of
effect on text used in an HTML document.
 Below are some of the properties in CSS that can be used to
add effects to text:
 text-overflow: It specifies the representation of overflowed
text, which is not visible to the user. It signals the user about
the content that is not visible. This property helps us to decide
whether the text should be clipped or show some dots
(ellipsis).
 clip: It is the default value that clips the overflowed text.
 ellipsis: This value displays an ellipsis (…) or three dots to show
the clipped text. It is displayed within the area, decreasing the
amount of text.
 word-wrap: CSS word-wrap property is used to break the long
words and wrap onto the next line. This property is used to
prevent overflow when an unbreakable string is too long to fit
in the containing box.
 normal: This property is used to break words only at allowed
break points.
 break-word: It is used to break unbreakable words.
 initial: It is used to set this property to its default value.
 inherit: It inherits this property from its parent element.
 word-break: It specifies how words should break at the end of

the line. It defines the line break rules.
 The default value of this property is normal. So, this value is
automatically used when we don't specify any value.
 keep-all: It breaks the word in the default style.
 break-all: It inserts the word break between the characters in
order to prevent the word overflow.
 writing-mode: It specifies whether the text will be written in

the horizontal or vertical direction. If the writing direction is
vertical, then it can be from left to right (vertical-lr) or from
right to left (vertical-rl).
 horizontal-tb: It is the default value of this property in which
the text is in the horizontal direction and read from left to right
and top to bottom.
 vertical-rl: It displays the text in the vertical direction, and the
text is read from right to left and top to bottom.
 vertical-lr: It is similar to vertical-rl, but the text is read from left
to right.
__________________________________________________
56. Explain CSS text align.
 This CSS property is used to set the horizontal alignment of a
table-cell box or the block element. It is similar to the vertical-
align property but in the horizontal direction.
 justify: It is generally used in newspapers and magazines. It
stretches the element's content in order to display the equal
width of every line.
 center: It centers the inline text.
 right: It is used to align the text to the right.
 left: It is used to align the text to the left.
__________________________________________________
57. Explain CSS variables.
 The CSS variables are used to add the values of custom property
to our web page. The custom properties are sometimes referred
to as cascading variables or CSS variables. The authors define
these entities that contain specific values and can be reused
throughout the document. These entities are set using the
custom property notation and can be accessed by using the var()
function.
 The variables store the values and have a scope in which they can
be used.
 CSS variables are advantageous because they allow us to reuse

the same value at multiple places. The name of the variable is
easy to understand and use, as compared to the color values.
 A variable in CSS is defined by using the two dashes (--) at the
beginning, followed by the name, which is case-sensitive.
 Link-1: https://www.javatpoint.com/css-variables
 Link-2: https://www.geeksforgeeks.org/css-variables/
__________________________________________________
58. Explain below terminologies.
 the CSS properties page-break-before and page-break-after and
page-break-inside help us to define the behaviour of the
document when printed.
a) page break before property:
https://www.geeksforgeeks.org/css-page-break-before-property/
https://www.javatpoint.com/css-page-break-before-property
b) page break inside property:

https://www.javatpoint.com/css-page-break-inside-property
https://www.geeksforgeeks.org/css-page-break-inside-property/
c) page break after property:

https://www.geeksforgeeks.org/css-break-after-property/
https://www.javatpoint.com/css-page-break-after-property
__________________________________________________
59. Explain CSS word spacing.
 It is a CSS property to increases or decreases the white space
between words. This property can have only two values, they are
normal and length.
 Normal: It defines normal space between words which is 0.25em.
This is default value.
 Length: It defines an additional space between words (in px, pt,
cm, em, etc). Negative values are also allowed.
__________________________________________________
60. Explain CSS object fit and object position.
 Object fit:
 This CSS property specifies how a video or an image is resized to
fit its content box. It defines how an element fits into the
container with an established width and height.
 It is generally applied to images or videos. This property specifies
how an element reacts to the width and height of its container.
 Mainly five values of this property are defined as follows:
 fill: It is the default value. Using this value, the entire object fills
in the container. The replaced content is sized to fill the content
box. If the aspect ratio of the object doesn't match the aspect
ratio of the box, the object will be squished or stretched to fit in
the box. The image will fill the area; even its aspect ratio is not
matched.
 contain: It resizes the content of an element to stay contained
inside the container. It fits the image in the width and height of
the box while maintaining the aspect ratio of the image. The
replaced content is scaled for maintaining the aspect ratio while
fitting within the content box of the element.
 cover: It resizes the content of an element to cover its container.
It fills the entire box with the image. If the aspect ratio of the
object is not matched with the aspect ratio of the box, it clips the
object to fit.
 none: It does not resize the replaced content. The image retains
its original size and ignores the height and width of the parent.
 scale-down: It sized the content as none or as contain. It results
in the smallest object size. It finds the smallest concrete object
size by comparing the none and contain.
 initial: It sets the property to its default value, i.e., the image is
stretched to fit in the container because the default value is fill.
 inherit: It inherits the value from its parent element.
 Object-position:
 This CSS property is used to specify the alignment of the content
within the container. It is used with the object-fit property to
describe how an element like <video> or <img> is positioned with
x/y coordinates within its container.
 When using the object-fit property, the default value for object-
position is 50% 50%, so, by default, all images are positioned in
the center of their container. We can change the default
alignment by using the object-position property.
 position: It defines the position of the video or the image within
the container. It takes two numerical values (such as 0 10px) in
which the first value manages the x-axis, whereas the second
value controls the y-axis. It can be a string (left, right or center) or
can be number (in % or px). It allows negative values. Its default
value is 50% 50%. We can use string values like the right top, left
bottom, etc.
 initial: It sets the property to the default value.
__________________________________________________
61. Explain CSS content property.
 The content property in CSS is used to generate the content
dynamically (during run time) ie., it replaces the element with
generated content value. It is used to generate content ::before
& ::after pseudo-element.
Values Description
normal It is used to set the default value
none This value does not set the content.
counte It sets the content as the counter. It is generally a

r number. It is displayed by using
the counter() or counters() function.
string It is used to set any string value. It should always be

enclosed within quotation marks. It generates any string
after or before the HTML element.
attr It inserts the value of the specified attribute after or

before the element. If the selector does not have a
particular attribute, then an empty string will be inserted.
open- It is used to insert the opening quotation mark, or it sets

quote the content to be an opening quote.
close- It is used to insert the closing quotation mark, or it sets

quote the content to be a closing quote.
no- If the closing quotes are specified, then it is used to

close- remove the closing quote from the content.
quote
no- If the opening quotes are specified, then it is used to

open- remove the opening quote from the content.
quote
url It is used to set the content to some media, which could

be an image, video, audio, and many more.
Initial It is used to set the property to its default value.
Inherit It inherits the property from its parent element.
__________________________________________________
62. Explain CSS columns.
 The columns property in CSS sets the number and width of
columns in a single declaration. It is a shorthand property that
can take several values at a time.
 It is used to set both column-count and column-width properties
at the same time. Both of these properties are used to control
how many columns will appear. The column-count property is
used to set the number of columns, whereas the column-width
property specifies the width of the columns.
 Together using column-count and column-width properties
creates a multi-column layout that breaks automatically into a
single column at narrow browser widths without using the media
queries. It is not always helpful to use both of them because it
can restrict the responsiveness and flexibility of the layout.
 If the column-count and width don't fit in the element's width,
then the browser reduces the column count automatically to fit
the specified column widths.
 columns: auto | column-width column-count| initial | inherit;
__________________________________________________
63. Explain CSS pointer events.
 This property is used to specify whether an element show
pointer events and whether or not show on the pointer.
 auto: This property is used to specify that an element must react
to pointer events.
 none: This property is used to specify that an element does not
react to pointer events.
__________________________________________________
64. Explain CSS hyphens.
 The Hyphens Property in CSS tells us how the words should be
hyphenated to create soft wrap opportunities within words.
 none: This property means that the words are not hyphenated.
 manual: This is the default property value. It means that the
words are only hyphenated when the characters inside the word
suggest hyphenation opportunities.
 auto: This property lets the algorithm break the words at
appropriate hyphenation points.
 initial: The initial property value sets the property to its default
value.
__________________________________________________
65. Explain CSS font-variant.
 The font-variant property is used to convert all lowercase letters
into uppercase letters. But the converted upper letters appear
too small font-size than the original uppercase letters.
 normal: It has a default value. It specifies a normal font-size.
 small-caps: It is used to convert all the lowercase letters into
uppercase letters.
__________________________________________________
66. Explain CSS left, right, top, bottom property.
 Left property:
https://www.geeksforgeeks.org/css-left-property/
 Right property:
https://www.geeksforgeeks.org/css-right-property/
 Top Property:
https://www.geeksforgeeks.org/css-top-property/
 Bottom property:
https://www.geeksforgeeks.org/css-bottom-property/
__________________________________________________
67. Explain CSS max-height, max-width, min-height, min-
width.
 Max-height property: It sets the max height of the browser
display area.
 Max-width property: It sets the max-width of the browser display
area.
 Min-height property: It sets the minimum height of the browser
display area.
 Min-width property: It sets the minimum width of the browser
display area.
 Media queries: https://www.geeksforgeeks.org/css-media-rule/?
ref=lbp
[
__________________________________________________
70. Explain CSS quotes.
 The quotes property in CSS specifies the type of quotation mark
for the quotation used in the sentence. It defines which
quotation mark to be used when the quotation is inserted by
using the open-quote and close-quote values of the content
property.
" double quote \0022
' single quote \0027

„ double quote (double low-9) \201E
« double, left angle quote \00AB
» double, right angle quote \00BB
‹ single, left angle quote \2039
› single, right angle quote \203A
' left quote (single high-6) \2018
' right quote (single high-9) \2019
“ left quote (double high-6) \201C
” right quote (double high-9) \201D
 Above values used with <q> </q> tag.

__________________________________________________
71. Explain CSS transform-origin.
 This CSS property is used to change the position of transformed
elements. It is a point around which the transformation is
applied. It establishes the origin of the transformation of an
element. It can be applied to both 2D and 3D rotations.
 The transform-origin property must be used with the transform
property. The 2d transformation can change the x-axis and y-axis
of the element, whereas the 3D transformation can change the z-
axis along with the x-axis and y-axis.
 This property can be specified by using one, two, or three values.
The first value affects the horizontal position, the second value
affects the vertical position, and the third value indicates the
position of the z-axis. The third value can also work on 3D
transformations and cannot be defined using a percentage.
__________________________________________________
72. Explain CSS resize.
 This CSS property allows the user to control the resizing of an
element just by clicking or dragging the bottom right corner of the
element
 This CSS property is used to define how an element is resizable by
the user. It doesn't apply on the block or inline elements where
overflow is set to visible. So, to control the resizing of an element,
we have to set the overflow other than visible like (overflow:
hidden or overflow: scroll or auto).
 It is possible to resize the elements either in a horizontal or
vertical direction or in both directions. After applying the resize
property to an element, we can see a small triangular knob at the
bottom right corner of the element. The user can drag the knob to
enlarge the textarea in either vertical, horizontal, or in both
directions.
 Sometimes resizing the element may affect the entire layout in an
undesirable way. So, depending on the layout, it is sometimes
preferable to not allow the element from being resized or restrict
the resizability to only one direction.
 Link: https://www.javatpoint.com/css-resize-property
__________________________________________________
73. Explain CSS text orientation.
 This CSS property specifies the orientation of characters in the
line of content. It only applies to the vertical mode of content.
This property does not affect elements with horizontal writing
mode.
 It helps us to control the display of languages that use a vertical
script. This property has five values: mixed, sideways, upright,
sideways-right, and use-glyph-orientation. Its default value is
mixed. All of the values of this property work only in vertical
mode.
 This property depends upon the writing-mode property. It works
only when the writing-mode is not set to horizontal-tb.
__________________________________________________
CSS Advance
1. Explain CSS Animation.
 CSS Animation: CSS Animations is a technique to change the
appearance and behaviour of various elements in web pages. It is
used to control the elements by changing their motions or
display. It has two parts. one contains the CSS properties which
describe the animation of the elements and the other contains
certain keyframes which indicate the animation properties of the
element and the specific time intervals at which those have to
occur.
 What is a Keyframe?
 Keyframes are the foundations with the help of which CSS
Animations work. They define the display of the animation at the
respective stages of its whole duration. For example: In the first
example code, the paragraph changes its color with time. At 0%
completion, it is red, at 50% completion it is of orange color and
at full completion i.e. at 100%, it is brown.
 Animation Properties:
 animation-name: It is used to specify the name of the
@keyframes describing the animation.
 animation-duration: It is used to specify the time duration it
takes animation to complete one cycle.
 animation-timing-function: It specifies how animations make
transitions through keyframes. There are several presets
available in CSS which are used as the value for the animation-
timing-function like linear, ease, ease-in, ease-out, and ease-in-
out.
 animation-delay: It specifies the delay of the start of an
animation.
 animation-iteration-count: This specifies the number of times
the animation will be repeated.
 animation-play-state: This property specifies whether the
animation is running or paused.
 animation-direction: It defines the direction of the animation.
animation direction can be normal, reverse, alternate, and
alternate-reverse.
 animation-fill-mode: It defines how styles are applied before and
after animation. The animation fill mode can be none, forwards,
backwards, or both.
 animation-composition: The animation-composition CSS
property specifies the composite operation to use when multiple
animations affect the same property simultaneously.
 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-
composition
 animation-range: The animation-range CSS shorthand property is
used to set the start and end of an animation's attachment range
along its timeline, i.e. where along the timeline an animation will
start and end.
range
 animation-range-start: The animation-range-start CSS property is

used to set the start of an animation's attachment range along its
timeline, i.e. where along the timeline an animation will start.
 animation-range-end: The animation-range-end CSS property is
used to set the end of an animation's attachment range along its
timeline, i.e. where along the timeline an animation will end.
 animation-timeline: The animation-timeline CSS property
specifies the timeline that is used to control the progress of a CSS
animation.
timeline
 Animation shorthand property:
 animation: animation-name | animation-duration | animation-
timing-function | animation-delay | animation-iteration-count |
animation-direction | animation-fill-mode | animation-play-
state;
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>animation-1</title>
<style>
#container{
animation-name: color;
margin: 10px auto;
animation-duration: 40s;
animation-delay: 0.2s;
padding-top: 30px;
padding-bottom: 30px;
width: 400px;
border-radius:40px;
}
#name{
font-size: 42px;
color: red;
text-align: center;
}
#profession{
font-size: 20px;
color: black;
text-align: center;
}
@keyframes color{
0%{
}
20%{
background-color:salmon;
}
40%{
background-color: lightblue;
}
60%{
background-color: lightseagreen;
}
80%{
background-color: aquamarine;
}
100%{
background-color: bisque;
}
}
</style>
</head>
<body>
<div id="container">
<div id="name">Sharmila Mulla</div>
<div id="profession">Front end developer</div>
</div>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>animtion-2.html</title>
<style>
#container{
padding-top: 20px;
margin:5px auto;
animation-name: text;
animation-iteration-count: infinite;
}
#name{
text-align: center;
font-size: 40px;
color: #1774e8;
text-shadow: 3px 0px 1px #698696;
}
#profession{
text-align: center;
color: #b87a47;
font-size: 20px;
text-shadow: 2px 0px 1px #9b7d64;
}
@keyframes text{
from{
margin-top: 400px;
}
to{
margin-top: 0px;
}
}
</style>
</head>
<body>
<div id="name">Sharmila Mulla</div>
<div id="profession">front end developer</div>
</div>
</body>
</html>
Browser:
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>animation-3.html</title>
<style>
h1{
font-size: 30px;
text-align: center;
}
div{
animation-name:text;
}
#one{
color: black;
background-color: lightsalmon;
margin: 5px auto;
width: 300px;
animation-timing-function: ease;
}
#two{
color: black;
margin: 5px auto;
width: 300px;
animation-timing-function: ease-in;
}
#three{
color: black;
margin: 5px auto;
width: 300px;
animation-timing-function: ease-out;
}
#four{
color: black;
margin: 5px auto;
width: 300px;
animation-timing-function: linear;
}
#five{
color: black;
margin: 5px auto;
width: 300px;
animation-timing-function: ease-in-out;
}
@keyframes text{
from{
margin-left: 60%;
}
to{
margin-left: 0px;
}
}
</style>
</head>
<body>
<h1>animation timing function</h1>
<div id="one">This text ease</div>
<div id="two">This text is ease-in</div>
<div id="three">This text is ease-out</div>
<div id="four">This text is linear</div>
<div id="five">This text is ease-in-out</div>
</body>
</html>
Browser:
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
h1{
font-size: 30px;
text-align: center;
}
div{
animation-name:text;
}
#one{
color: black;
margin: 5px auto;
width: 300px;
animation-direction: normal;
}
#two{
color: black;
margin: 5px auto;
width: 300px;
animation-direction: reverse;
}
#three{
color: black;
margin: 5px auto;
width: 300px;
animation-direction: alternate;
}
#four{
color: black;
margin: 5px auto;
width: 300px;
animation-direction: alternate-reverse;
}
@keyframes text{
from{
margin-left: 60%;
}
to{
margin-left: 0px;
}
}
</style>
</head>
<body>
<h1>animation timing function</h1>
<div id="one">This text normal</div>
<div id="two">This text is reverse</div>
<div id="three">This text is alternate</div>
<div id="four">This text is alternate-reverse</div>
</body>
</html>
Browser:
Example-5:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.demo {
border-top: 100px solid #ccc;
height: 300px;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<h1>animation-fill-mode</h1>
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="growsandstays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div>
</body>
</html>
Browser:
Example-6:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>animation-6</title>
<style>
#animate{
height:100px;
width: 250px;
position: relative;
/* animation-name: move;
animation-direction: alternate; */
animation: move 20s linear 0.2s infinite alternate;
}
@keyframes move{
0%{
left: 0px;
top: 0px;
}
25%{
left: 200px;
top: 200px;
}
50%{
left: 200px;
top: 0px;
}
75%{
left: 0px;
top: 200px;
}
100%{
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<img id="animate"src="name.JPG" alt="name">
</body>
</html>
Browser:
Example-7:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Animation Timeline</title>
<style>
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --squareTimeline;
position: relative;
}
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to
apply the animation */
animation-direction: alternate;
animation-timeline: --squareTimeline;
position: absolute;
bottom: 0;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
}
}
#stretcher {
height: 600px;
}
</style>
</head>
<body>
<div id="square"></div>
<div id="stretcher"></div>
</div>
</body>
</html>
Browser:
__________________________________________________
2. Explain pseudo-classes and pseudo-elements.
 Pseudo-classes:
 A pseudo-class can be defined as a keyword which is combined
to a selector that defines the special state of the selected
elements. It is added to the selector for adding an effect to the
existing elements based on their states. For example, The
":hover" is used for adding special effects to an element when
the user moves the cursor over the element.
 The names of the pseudo-class are not case-sensitive.
pseudo- Description
class
:active It is used to add style to an active element.
:hover It adds special effects to an element when the user

moves the mouse pointer over the element.
:link It adds style to the unvisited link.
:visited It adds style to a visited link.
:lang It is used to define a language to use in a specified

element.
:focus It selects the element which is focused by the user

currently.
:first- It adds special effects to an element, which is the first

child child of another element.
 Pseudo-elements:
 A pseudo-class can be defined as a keyword which is combined
to a selector that defines the special state of the selected
elements. Unlike the pseudo-classes, the pseudo-elements are
used to style the specific part of an element, whereas the
pseudo-classes are used to style the element.
 As an example, a pseudo-element can be used to style the first
letter or the first line of an element. The pseudo-elements can
also be used to insert the content after or before an element.
pseudo-element Description
::first-letter It selects the first letter of the text.

(:first-letter)
::first-line It styles the first line of the text.

(:first-line)
::before It is used to add something before the element's

(:before) content.
::after (:after) It is used to add something after the element's
content.
::selection It is used to select the area of an element that is

selected by the user.
__________________________________________________
7. Explain Gradient.
 The Gradient in CSS is a special type of image that is made up of
progressive & smooth transition between two or more colors.
CSS is the way to add style to various web documents. By using
the gradient in CSS, we can create variants styling of images
which can help to make an attractive webpage.
 There are two types of gradient in CSS.
 Linear gradients: Linear Gradients: It includes the smooth color
transitions to going up, down, left, right, and diagonally. The
minimum two-color required to create a linear gradient. More
than two color elements can be possible in linear gradients. The
starting point and the direction are needed for the gradient
effect.
 Syntax:
 background-image: linear-gradient (direction, color-stop1, color-
stop2, ...);
 The linear-gradient can be implemented in the following ways:
 Top to Bottom: In this image, the transition started with white
color and ended with green color. On exchanging the color
sequence, the transition will start with green and will end with
white.
 Left to Right: In this image, the transition started from left to
right. It starts from white transitioning to green.
Html file
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Linear Gradient</title>
<link rel="stylesheet" href="linearGradient.css">
</head>
<body>
<div id="main1">
<div class="div1">Linear Gradient</div>
<div class="div2">Top to Bottom</div>
</div>
<hr>
<div id="main2">
<div class="div3">Linear Gradient</div>
<div class="div4">Left to Right</div>
</div>
</body>
</html>
CSS file
#main1{
height: 200px;
width: 200px;
border: 1px solid black;
background-color: white;
background-image: -webkit-linear-gradient(green, white);
}
.div1{
color: black;
text-align: center;
margin-top: 80px;
font-size: 20px;
font-weight: bold;
}
.div2{
color: black;
text-align: center;
}
#main2{
height: 200px;
width: 200px;
background-image: -webkit-linear-gradient(right, white, pink);
}
.div3{
color: black;
text-align: center;
margin-top: 80px;
font-size: 20px;
font-weight: bold;
}
.div4{
color: black;
text-align: center;
}
Browser
 Diagonal: This transition started from top-left to bottom-right. It

starts with the green transition to white. For the diagonal
gradient, need to specify both horizontal and vertical starting
positions.
HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Diagonal linear gradient</title>
<style>
#main1{
height: 200px;
width: 200px;
background-image: -webkit-linear-gradient(right bottom,
blue,white);
}
.div1{
text-align: center;
margin: 70px;
}
</style>
</head>
<body>
<div id="main1">
<div class="div1">Diagonal Linear Gradient</div>
</div>
</body>
</html>
Browser
 Repeating Linear Gradient: CSS allows the user to implement

multiple linear gradients using a single function repeating-linear-
gradient(). The image here contains 3 colors in each transition
with some percentage value.
HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Repeating Linear Gradient</title>
<style>
#main1{
height: 200px;
width: 200px;
background-image: repeating-linear-gradient(#090,
#fff 10%, #2a4f32 20%);
}
.div1{
text-align: center;
margin: 70px;
}
</style>
</head>
<body>
<div id="main1">
<div class="div1">Repeating Linear Gradient</div>
</div>
</body>
</html>
Browser
 Angles on Linear Gradients: CSS allows the user to implement

directions in Linear Gradients rather than restricting themselves
to predefined directions.
HTML and CSS
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Repeating Linear Gradient</title>
<style>
#main1{
height: 200px;
width: 200px;
background-image: repeating-linear-gradient(-45deg,
rgb(5, 55, 5), rgb(72, 237, 72) 10%);
}
.div1{
text-align: center;
margin: 70px;
}
</style>
</head>
<body>
<div id="main1">
<div class="div1">Angles on Linear Gradient</div>
</div>
</body>
</html>
Browser
 Radial gradients: A radial gradient differs from a linear gradient.

It starts at a single point and emanates outward. By default, the
gradient will be elliptical shape, the size will be farthest-corner
the first color starts at the center position of the element and
then fades to the end color towards the edge of the element.
Fade happens at an equal rate until specified.
 Syntax:
 background-image: radial-gradient (shape size at position, start-
color, ..., last-color);
 Radial Gradient – evenly spaced color stops: In CSS, by default,
the fade happens at an equal rate. The following figure shows
the Radial Gradient with even color stops.
 Color stops: Color stops inform the browsers that what color to
use, at the starting point of the gradient & where to stop. By
default, they are equally spaced but we can overrule it by
providing the specific color stops.
HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Radial Gradients</title>
<style>
#main {
height: 350px;
width: 700px;
background-image: radial-gradient(#090,
#fff, #2a4f32);
}
.div1 {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.div2 {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">Radial Gradient</div>
<div class="div2">
evenly radial gradient
</div>
</div>
</body>
</html>
Browser
 Radial Gradient- unevenly spaced color stops: CSS allows the user
to have variation in spacing of color stops while applying the
radial-gradient feature.
HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Radial Gradients</title>
<style>
#main {
height: 350px;
width: 700px;
background-image: radial-gradient(#090
40%, #fff, #2a4f32);
}
.div1 {
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 80px;
}
.div2 {
font-size: 17px;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">Radial Gradient</div>
<div class="div2">
unevenly radial gradient
</div>
</div>
</body>
</html>
Browser
__________________________________________________
8. Explain z-index.
 The z-index property is used to displace elements on the z-axis i.e
in or out of the screen. It is used to define the order of elements
if they overlap on each other.
 Syntax:
 z-index: auto | number | initial |inherit;
 auto: The stack order is equal to that of the parent(default).
 number: The stack order depends in the number.
 initial: Sets the property to its default value.
 inherit: Inherits the property from the parent element.
HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title></title>
<style>
.wrapper {
position: relative;
}
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
/* put .gold-box above .green-box and .dashed-box */
z-index: 3;
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
/* put .green-box above .dashed-box */
z-index: 2;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="dashed-box">Dashed box</div>
<div class="gold-box">Gold box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Browser
__________________________________________________
9. Explain Loader.
 The CSS loader is useful when a certain page took a few seconds
to load the content of the webpage. When the user has to wait
for the content to fully loaded on the webpage. If the certain
webpage doesn’t have the loader of CSS then the loading time
the user will think that the webpage is not responding at all. So,
putting the CSS loader on the web page makes the user
distracted or waited for few seconds until the page is fully
loaded. The CSS can be used for styling and adding animations
and other visual motion graphics on a webpage. A small demo
for animations under CSS is explained in the following code.
Example-1:
<!DOCTYPE html>
<html>
<head>
<title>css loader</title>
<style>
h1{
color:green;
}
.load {
display: block;
position: absolute;
width: 10px;
height: 10px;
left: calc(50% - 1em);
border-radius: 1em;
transform-origin: 1em 2em;
animation: rotate;
animation-duration: 1.8s;
}
/* Rotation of loader dots */

@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.g1 {
background-color: #1D8348;
}
.g2 {
background-color: #239B56;
}
.g3 {
background-color: #2ECC71;
}
.g4 {
background-color: #82E0AA ;
}
.g5 {
background-color: #D5F5E3;
}
</style>
</head>
<body>
<center>
<h1>CSS Loader</h1>
<div class='loader'>
<div class='load g1'></div>
</div>
</center>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html>
<head>
<title>CSS Loader</title>
<style>
h1{
text-align:center;
}
.loader {
border: 20px solid #f3f3f3;
position:absolute;
left:43%;
border-radius: 50%;
border-top: 20px solid purple;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>CSS Loader</h1>
<div class="loader"></div>
</body>
</html>
Browser:
Example-3:
Browser:
Example-4:
Browser:
Example-5:
Browser:
__________________________________________________
10. Explain CSS Units.
 There are various units in CSS to express the measurement and
length. A CSS unit is used to determine the property size, which
we set for an element or its content. The units in CSS are
required to define the measurement such as margin: 20px; in
which the px (or pixel) is the CSS unit. They are used to set
margin, padding, lengths, and so on.
 We cannot apply the whitespace between the number and the
unit. The unit can be omitted for the value 0. Some properties of
CSS allow the negative values of length.
 The length unit in CSS is of two types:
 Absolute Length: It is not good for use on-screen, cause screen
size varies so much depending on the device used for that page
it is recommended to use for print layout and where the output
medium is known.
 These are the fixed-length units, and the length expressed using
the absolute units will appear as exactly that size. It is not
recommended to use on-screen, because the size of the screen
varies too much. So, the absolute units should be used when
the medium of output is known, such as the print layout.
Unit Name Equivalent to
Cm Centimeters 1cm = 37.8px = 25.2/64in
mm Millimeters 1mm = 1/10th of 1cm

Quarter-
Q 1Q = 1/40th of 1cm
millimeters
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72nd of 1in

px Pixels 1px = 1/96th of 1in
 cm (centimeter)
 mm (millimeter)
 in (inches)
 px (pixels)
 pt (points)
 pc (picas)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Absolute units</title>
<style>
.units{
line-height: 3px;
}
.cm{
font-size: 1.5cm;
}
.mm{
font-size: 5.5mm;
}
.inch{
font-size: 1.1in;
}
.pixels{
font-size: 20px;
}
.points{
font-size:20pt;
}
.picas{
font-size: 5pc;
}
</style>
</head>
<body>
<div class="units"> 
<p class="cm">paragraph in centimeter: 1.5cm </p>
<p class="mm">paragraph in millimeter: 5.5mm</p>
<p class="inch">paragraph in inch: 1.1in</p>
<p class="pixels">paragraph in pixels: 20px </p>
<p class="points">paragraph in points: 20pt </p>
<p class="picas">paragraph in picas: 5pc</p>
</div>
</body>
</html>
Browser:
 Relative Length: It is good for use on-screen, if screen size
varies so much depending on the device then these relative
length units are perfect because it changes with the different
rendering mediums.
 Relative units are good to style the responsive site because they
scale relative to the window size or the parent. They specify the
length, which is relative to another length property.
 Depending on the device, if the size of the screen varies too
much, then the relative length units are the best because they
scale better between the different rendering mediums. We can
use the relative units as the default for the responsive units. It
helps us to avoid update styles for different screen sizes.
Unit Relative to
Font size of the parent, in the case of
typographical properties like font-size, and font
em
size of the element itself, in the case of other
properties like width.
ex x-height of the element's font.
The advance measure (width) of the glyph "0" of
ch
the element's font.
rem Font size of the root element.
lh Line height of the element.

Unit Relative to
Line height of the root element. When used on

rlh the font-size or line-height properties of the root
element, it refers to the properties' initial value.
vw 1% of the viewport's width.
vh 1% of the viewport's height.
vmin 1% of the viewport's smaller dimension.
vmax 1% of the viewport's larger dimension.
1% of the size of the initial containing block in the
vb
direction of the root element's block axis.
1% of the size of the initial containing block in the
vi
direction of the root element's inline axis.
svw, 1% of the small viewport's width and height,
svh respectively.
lvw, 1% of the large viewport's width and height,
lvh respectively.
dvw, 1% of the dynamic viewport's width and height,

dvh respectively.
 em: Relative to the font size of that element.

 Note: Here 2em means 2 times the size of the current font.
Example-1:
<!DOCTYPE html>
<html>
<head>
<title>relative units</title>
<style>
p {
font-size: 20px;
line-height: 2em;
}
</style>
</head>
<body>
<p> Line height: 2x20px = 40px</p>
</body>
</html>
Browser:
 ex: Relative to the X(axis)-height of the current font.

Example-2:
<!DOCTYPE html>
<html>
<head>
<title>relative units</title>
<style>
p {
font-size: 40px;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<p>
Sharmila Mulla <span>A Web development
enthusiast.
</span>
</p>
</body>
</html>
Browser:
 ch: Relative to the width of the 0.

Example-3:
<!DOCTYPE html>
<html>
<head>
<title>ch unit in CSS</title>
<style>
body {
font-size: 50px;
}
div {
font-size: 1ch;
}
</style>
</head>
<body>
<p>HTML, CSS, JavaScript</p>
<div>
Front end languages
</div>
</body>
</html>
Browser:
 rem: Relative to the browser base font size.

Example-4:
<!DOCTYPE html>
<html>
<head>
<title>rem unit in CSS</title>
<style>
body {
font-size: 4rem;
}
div {
font-size: 1.6rem;
}
</style>
</head>
<body>
<p>
HTML is a markup language.
</p>
<div>
Java is programming language.
</div>
</body>
</html>
Browser:
 vw: Relative to 1% of the width of the viewport.

Example-5:
<!DOCTYPE html>
<html>
<head>
<title>vw unit</title>
<style>
h1 {
font-size: 3vw;
}
</style>
</head>
<body>
<h1>Programming Languages</h1>
<p>
Java, Python, C Programming.
</p>
</body>
</html>
Browser:
 vh: Relative to 1% of the height of the viewport.

Example-6:
<!DOCTYPE html>
<html>
<head>
<title>vh unit</title>
<style>
h1 {
font-size: 10vh;
}
</style>
</head>
<body>
<h1>Programming Languages</h1>
<p>
Java and Python Programming.
</p>
</body>
</html>
Browser:
 vmin and vmax: https://www.geeksforgeeks.org/css-units/
 Percentage:
 % – The % unit is used to set the font-size relative to the current
font-size.
Example: The pixel unit is an absolute unit to set the width i.e. it
is always the same. A percentage unit is based on a relative unit
i.e. it is based on its parent size.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background: red;
margin: 10px;
}
.parent {
background: white;
}
.fifty-percent {
width: 50%;
}
.one-hundred {
width: 100px;
}
.parent {
width: 250px;
;
}
</style>
</head>
<body>
<h3>Output-1 </h3>
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
<hr>
<h3>Output-2 </h3>
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
</div>
</body>
</html>
Browser:
 Numbers:
 Some value types accept numbers, without any unit added to
them. An example of a property which accepts a unitless
number is the opacity property, which controls the opacity of an
element (how transparent it is). This property accepts a number
between 0 (fully transparent) and 1 (fully opaque).
 Colors:
 Color values can be used in many places in CSS, whether you are
specifying the color of text, backgrounds, borders, and lots
more. There are many ways to set color in CSS, allowing you to
control plenty of exciting properties.
 The standard color system available in modern computers
supports 24-bit colors, which allows displaying about 16.7
million distinct colors via a combination of different red, green,
and blue channels with 256 different values per channel (256 x
256 x 256 = 16,777,216).
 Link:https://developer.mozilla.org/enUS/docs/Learn/CSS/
Building_blocks/Values_and_units
__________________________________________________
11. Explain Combinators.
 CSS combinators are explaining the relationship between two
selectors. CSS selectors are the patterns used to select the
elements for style purposes. A CSS selector can be a simple
selector or a complex selector consisting of more than one
selector connected using combinators.
 There are four types of combinators available in CSS which are
discussed below:
 General Sibling selector (~)
 It uses the tilde (~) sign as the separator between the elements.
It selects the elements that follow the elements of first
selector, and both of them are the children of the same parent.
It can be used for selecting the group of elements that share
the common parent element.
 It is useful when we have to select the siblings of an element
even if they are not adjacent directly.
 In this figure, the blocks with the green color are the selected
blocks affected after using the general sibling selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>general sibling selector</title>
<style>
div ~ p{
color: #009900;
font-size:32px;
font-weight: bold;
margin:0px;
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div>General sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Browser:
 Adjacent Sibling selector (+)

 The Adjacent sibling selector is used to select the element that
is adjacent or the element that is next to the specified selector
tag. This combinator selects only one tag that is just next to the
specified tag.
 It uses the plus (+) sign as the separator between the elements.
 In the below figure, the blocks with the green color are the
selected blocks affected after using the adjacent sibling
selector. There is the selection of those paragraph elements
that immediately comes after another paragraph element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Adjacent sibling selector</title>
<style>
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Adjacent sibling selector property</div>
<div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Browser:
 Child selector (>)

 This selector is used to select the element that is the immediate
child of the specified tag. This combinator is stricter than the
descendant selector because it selects only the second selector
if it has the first selector element as its parent.
 It uses the greater than (>) sign as the separator between the
elements. It selects the direct descendant of the parent.
 In the above figure, the blocks with the green color are the
selected blocks affected after using the child selector. As we
can see in the figure, there is only the selection of those
paragraph elements that are the direct child of the div element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Child selector</title>
<style>
div > p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Child selector property</div>
<div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Browser:
 Descendant selector (space)

 This selector is used to select all the child elements of the
specified tag. The tags can be the direct child of the specified
tag or can be very deep in the specified tag. This combinator
combines the two selectors such that selected elements have
an ancestor the same as the first selector element.
 It uses the space as the separator between the elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Descendant selector</title>
<style>
div p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>
<body>
<div>Descendant selector property</div>
<div>
<p>G4G</p>
<p>Descendant selector</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Browser
__________________________________________________
12. Explain masking.
 The CSS masking module that defines masking and clipping for
partially or fully hiding portions of visual elements.
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_masking
 mask-border:
 mask-border-mode:
 mask-border-outset:
 mask-border-repeat:
 mask-border-slice:
 mask-border-source:
 mask-border-width:
 mask-clip:
 mask-composite:
 mask-image:
 mask-mode:
 mask-origin:
 mask-position:
 mask-repeat:
 mask-size:
 mask-type:
__________________________________________________
13. Explain Transition.
 Transitions in CSS allow us to control the way in which transition
takes place between the two states of the element. For
example, when hovering your mouse over a button, you can
change the background color of the element with help of CSS
selector and pseudo-class. We can change any other or
combination of properties, though. The transition allows us to
determine how the change in color takes place. We can use the
transitions to animate the changes and make the changes
visually appealing to the user and hence, giving a better user
experience and interactivity.
 Transition-property:
 his property allows you to select the CSS properties which you
want to animate during the transition(change).
 none is used to specify that no property should be selected.
 all is used to specify all the properties to be selected, though not
all properties are animate-able, only the properties which are
animate-able will be influenced.
 We can specify a single property or a set of comma-separated
properties property1, property2, …, propertyN.
 Transition-duration:
 This property allows you to determine how long it will take to
complete the transition from one CSS property to the other.
 Here, time can be in seconds(s) or milliseconds(ms), you should
use ‘s’ or ‘ms’ after the number (without quotes).
 Transition-delay:
 This property allows you to determine the amount of time to
wait before the transition actually starts to take place.
 Here, again, time can be in seconds(s) or milliseconds(ms), and
you should use ‘s’ or ‘ms’ after the number (without quotes).
 Transition-timing function:
 This property allows you to determine the speed of change and
the manner of change, during the transition. Like, the change
should be fast at the beginning and slow at the end, etc.
 These timing functions are commonly called easing functions,
and can be defined using a predefined keyword value, a stepping
function, or a cubic Bézier curve.
 Cubic bezier: https://cubic-bezier.com/#.17,.67,.83,.67
The predefined keyword values allowed are:
1. ease: slow start, then fast, then end slow
2. linear: same speed form start to end
3. ease-in: slow start
4. ease-out: slow end
5. ease-in-out: slow start and end
6. step-start:
7. step-end:
8. steps (4, end)
9. cubic bezier: defining our own values.
 The Shorthand Property You can combine all the four transition
properties mentioned above, into one single shorthand property,
according to the syntax given below. This saves us from writing
long codes and prevents from getting messy. Note the ordering
of property, it has significance.
 Syntax:
 transition: (property name) | (duration) | (timing function) |
(delay);
Example-1:
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>transition</title>
<link rel="stylesheet" href="transition.css">
</head>
<body>
<h3>transition timing function: ease</h3>
<div class="container">
<div class="box1">
<img src="car1.jpg" alt="" id="car" height="100px"
width="150px">
</div>
</div>
<h3>transition timing function: linear</h3>
<div class="box2">
width="150px">
</div>
</div>
<h3>transition timing function: ease-in</h3>
<div class="box3">
width="150px">
</div>
</div>
<h3>transition timing function: ease-out</h3>
<div class="box4">
width="150px">
</div>
</div>
<h3>transition timing function: ease-in-out</h3>
<div class="box5">
width="150px">
</div>
</div>
<h3>transition timing function: step-start</h3>
<div class="box6">
width="150px">
</div>
</div>
<h3>transition timing function: step-end</h3>
<div class="box7">
width="150px">
</div>
</div>
<h3>transition timing function: steps</h3>
<div class="box8">
width="150px">
</div>
</div>
<h3>transition timing function: cubic bezier</h3>
<div class="box9">
width="150px">
</div>
</div>
</body>
</html>
CSS File:
body{
background-color: black;
}
.container{
height: 130px;
width:100%;
margin-bottom: 20px;
border-radius: 25px;
}
h3{
color: white;
}
img{
margin-left: 20px;
}
/*box-1 ease*/
.box1{
margin-left: 30px;
margin-right:30px;
transition: margin-left;
transition-duration: 5s;
transition-delay: 0.5s;
transition-timing-function: ease;
}
.box1:hover{
margin-left: 900px;
}
/*box-2 linear*/
.box2{
margin-left: 30px;
margin-right:30px;
transition-timing-function: linear;
}
.box2:hover{
margin-left: 900px;
}
/*box-3 ease-in*/
.box3{
margin-left: 30px;
margin-right:30px;
transition-timing-function: ease-in;
}
.box3:hover{
margin-left: 900px;
}
/*box-4 ease-out*/
.box4{
margin-left: 30px;
margin-right:30px;
transition-timing-function: ease-out;
}
.box4:hover{
margin-left: 900px;
}
/*box-5 ease-in-out*/
.box5{
margin-left: 30px;
margin-right:30px;
transition-timing-function: ease-in-out;
}
.box5:hover{
margin-left: 900px;
}
/*box-6 step start*/
.box6{
margin-left: 30px;
margin-right:30px;
transition-timing-function: step-start;
}
.box6:hover{
margin-left: 900px;
}
/*box-7 step end*/
.box7{
margin-left: 30px;
margin-right:30px;
transition-timing-function: step-end;
}
.box7:hover{
margin-left: 900px;
}
/*box-8 steps*/
.box8{
margin-left: 30px;
margin-right:30px;
transition-timing-function: steps(20, end);
}
.box8:hover{
margin-left: 900px;
}
/*box-9 cubic bezier*/
.box9{
margin-left: 30px;
margin-right:30px;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165,
1);
}
.box9:hover{
margin-left: 900px;
}
Browser:
Example-2:
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>transition example-2</title>
<style>
.box1{
margin: 10px auto;
height: 200px;
width: 200px;
transition: all 2s linear 0.5s;
}
.box1:hover{
border-radius: 50%;
border:5px solid purple;
background-color: purple;
}
.box2{
margin: 10px auto;
height:200px;
width: 200px;
border:1px solid black;
color: white;
transition: all 2s linear 0.2s;
}
.box2:hover{
height: 100px;
width: 200px;
border: 1px solid rgb(22, 22, 182);
background-color: rgb(60, 60, 225);
color: black;
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</div>
</body>
</html>
__________________________________________________
14. Explain Tooltips.
 CSS Tooltips are a great way to display extra information about
something when the user moves the mouse cursor over an
element.
 Types of Tooltips
 Top of the element
Example:
<!DOCTYPE html>
<html>
<head>
<title>Top Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Top tooltip example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Sharmila Mulla</strong>
<span class="tooltiptext">A front end developer</span>
</div>
</body>
</html>
Browser
 Left side of the element

Example:
<!DOCTYPE html>
<html>
<head>
<title>left tooltip</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
}
</style>
</head>
<h2>Left tooltip example</h2>
<span class="tooltiptext">A front end developer<span>
</div>
</body>
</html>
Browser
 Right side of the element

Example:
<!DOCTYPE html>
<html>
<head>
<title>right tooltip</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
}
</style>
</head>
<h2>Right tooltip example</h2>
<span class="tooltiptext">A front end developer<span>
</div>
</body>
</html>
Browser
 Bottom of the element

Example:
<!DOCTYPE html>
<html>
<head>
<title>bottom Tooltip</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
}
</style>
</head>
<h2>Bottom tooltip example</h2>
<div class="tooltip"><strong> Sharmila Mulla</strong>
<span class="tooltiptext">A front end developer</span>
</div>
</body>
</html>
Browser:
 Explain Tooltip Animation.

 The CSS fade in tooltip or tooltip animation is used to fade in
the tooltip text when it is about to visible. The CSS3 "transition"
property along with "opacity" property is used 0 attain fade in
tooltip or tooltip animation. The animation time from being
completely invisible to 100% visible is specified in second.
 Let's take an example to demonstrate the CSS tooltip animation.
In this example, the fade in time is 5 second.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Animation</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100%
opac: */
opacity: 0;
transition: opacity 5s;
}
opacity: 1;
}
</style>
</head>
<h2>Fade In Tooltip Example</h2>
<div class="tooltip"><strong>HTML, CSS,
JAVASCRIPT</strong>
<span class="tooltiptext">Front end technologies</span>
</div>
</body>
</html>
Browser:
 Tooltip with arrow

 The CSS arrow is used to add an array along with tooltip. It
makes the tooltip like a speech bubble. It can also be
represented in four ways:
 Top arrow
Example:
<!DOCTYPE html>
<html>
<head>
<title>Top Arrow</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black
transparent;
}
}
</style>
</head>
<h2>Top Arrow Example</h2>
<div class="tooltip"><strong>HTML</strong>
<span class="tooltiptext">HTML is markup language</span>
</div>
</body>
</html>
Browser:
 Bottom arrow
Example:
<!DOCTYPE html>
<html>
<head>
<title>bottom arrow</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: black transparent transparent
transparent;
}
}
</style>
</head>
<h2>Bottom Arrow Example</h2>
</div>
</body>
</html>
Browser:
 Left arrow
Example:
<!DOCTYPE html>
<html>
<head>
<title>left arrow</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent black transparent
transparent;
}
}
</style>
</head>
<h2>Left Arrow Example</h2>
</div>
</body>
</html>
Browser:
 Right arrow
Example:
<!DOCTYPE html>
<html>
<head>
<title>Rigth Arrow</title>
<style>
.tooltip {
position: relative;
}
visibility: hidden;
width: 120px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent transparent transparent
black;
}
}
</style>
</head>
<h2>Right Arrow Example</h2>
</div>
</body>
</html>
Browser:
__________________________________________________
15. Explain Flexbox.
 The flexbox or flexible box model in CSS is a one-dimensional
layout model that has flexible and efficient layouts with
distributed spaces among items to control their alignment
structure i.e., it is a layout model that provides an easy and
clean way to arrange items within a container. Flexbox can be
useful for creating small-scale layouts & is responsive and
mobile-friendly.
 Features of flexbox:
 A lot of flexibility is given.
 Arrangement & alignment of items.
 Proper spacing
 Order & Sequencing of items.
 Bootstrap 4 is built on top of the flex layout.
 Flexbox is a CSS display type design to help us craft CSS layouts
quite easily.
 Control the position, size and spacing of elements relative to
their parents elements and each other.
 They are great for responsive designing.
 It has its own set of properties.
 It defines formatting context, which controls layout.
 It is a parent-child relationship.
 Before the flexbox model, we had 4 layout modes:
 Block: It is used to make sections in web pages.
 Inline: It is used for text.
 Table: It is used for two-dimensional table data.
 Positioned: It is used for the explicit position of an element.
 There are 2 main components of the Flexbox:
 Flex Container: The parent “div” which contains various
divisions is called a flex container.
 Flex Items: The items inside the container “div” are flex items.
 Flexbox Axes: While working with Flexbox, we deal with 2

axes:
 Main Axis
 Cross Axis
 Main Axis:
 By default, the main axis runs from left to right.
 Main Start: The start of the main axis is called Main Start.
 Main Size: The length between Main Start and Main End is
called Main Size.
 Main End: The endpoint is called Main End.
 Main and Cross Axis
 left to right:
 flex-direction: row;
 right to left:
 flex-direction: row-reverse;
 top to bottom:
 flex-direction: column;
 bottom to top:
 flex-direction: column-reverse;
 Cross Axis:
 The cross axis will be perpendicular to the main axis.
 By default, Cross Axis runs perpendicular to the Main Axis i.e.
from top to bottom.
 Cross Start: The start of the Cross axis is called Cross Start.
 Cross Size: The length between Cross Start and Cross End is
called Cross Size.
 Cross End: The endpoint is called Cross End.
 Note: Not all browsers support the flexbox properties, so make
sure that the browser you are using supports this property.
 Basics of Flexbox:
 Apply a display type of flexbox to the parent container, this
would make all the child elements in it to adjust into the flex
type and these would be called the “flex items”. This means
they have become more flexible i.e. we can control how much
they can shrink and how much they can grow and also the
spacing between these elements.
 display: flex property:
 The flex container can change the width, height and order of the
child elements.
 Items can grow or shrink to fill the available space or to prevent
overflow.
 Available space is distributed among other items.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>display flex property</title>
<style>
.flex-container{
height:150px;
width: 400px;
display: flex;
}
.flex-item{
height: 100px;
width: 100px;
/*display: inline-block*/
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
</div>
</body>
</html>
Browser:
 Properties of flexbox:
 Parent properties:
 display defines a flex container – flex formatting context.
 flex-direction defines the main axis inside the container.
 Flex-direction: row, row-reverse.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title> flex direction property</title>
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
flex-direction: row-reverse;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 Flex-direction: column, column-reverse.

Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:400px;
width: 400px;
display: flex;
flex-direction: column;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:400px;
width: 400px;
display: flex;
flex-direction: column-reverse;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 flex-wrap allows flex items to wrap onto more than one line.
 Flex-wrap: nowrap;
 The default value of wrap-flex is nowrap. It is used to specify
that the item has no wrap. It makes item wrap in single lines.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>flex-wrap property</title>
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-wrap: nowrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 Flex-wrap: wrap;
 This property is used to break the flex item into multiples lines.
It makes flex items wrap to multiple lines according to flex item
width.
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-wrap: wrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 Flex-wrap: wrap-reverse;
 This property is used to reverse the flow of the flex items when
they wrap to new lines.
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-wrap: wrap-reverse;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 Flex-wrap: initial;
 This property is used to set it as default value.
 flex-flow shorthand for flex-direction + flex-wrap.
 row nowrap: It arrange the row same as text direction and the
default value of wrap-flex is nowrap. It is used to specify that
the item has no wrap. It makes item wrap in single lines.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
background-color: #0000ff;
display: flex;
/* flex-direction: column;
flex-wrap: wrap-reverse; */
flex-flow: row nowrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 row-reverse nowrap: It arrange the row opposite of text
direction and the default value of wrap-flex is nowrap. It is used
to specify that the item has no wrap. It makes item wrap in
single lines.
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-flow: row-reverse nowrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 column nowrap: same as row but top to bottom and the default
value of wrap-flex is nowrap. It is used to specify that the item
has no wrap. It makes item wrap in single lines.
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>flex-flow property</title>
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-flow: column nowrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 column-reverse nowrap: Same as row-reverse top to bottom

and the default value of wrap-flex is nowrap. It is used to specify
that the item has no wrap. It makes item wrap in single lines.
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-flow: column-reverse nowrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 row wrap: It arrange the row same as text direction and wrap
property is used to break the flex item into multiples lines. It
makes flex items wrap to multiple lines according to flex item
width
Example-5:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-flow: row wrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 row-reverse wrap: It arrange the row opposite of text direction

and wrap property is used to reverse the flow of the flex items
when they wrap to new lines.
Example-6:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 300px;
display: flex;
flex-flow: row-reverse wrap;
}
.flex-item{
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 justify-content allows items to align along main axis.

 Justify-content: The justify-content property in CSS is used to
describe the alignment of the flexible box container. It contains
the space between and around content items along the main
axis of a flex container which is distributed in a browser.
 Note: This property cannot be used to describe items or
containers along the vertical axis. For aligning the items
vertically, we can use the align-items property
 The alignment is possible after applying the lengths and auto
margins properties, i.e., if there is at least one flexible element,
with flex-grow property, other than 0, in a Flexbox layout then it
will not impact & has any effect as there won’t be any available
space.
 justify-content: flex-start | flex-end | center |space-between|
space-around |space-evenly |initial |inherit;
 flex-start: It is the default value that is used to align flex items
from the start of the container.
 inherit: The items are placed according to their inherited parent
element value.
 flex-end: It is used to align flex items at the end of the
container.
 center: It aligns flex items at the center of the container.
 space-between: The flex items are placed with even spacing
where the item is pushed to the start and the last item is
pushed to the end.
 space-around: The flex items are placed with equal spacing ie.,
before, between, and after, from each other & the corners.
 space-evenly: The items are positioned with equal spacing
between them but the spacing from corners differs.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>justify-content property</title>
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: flex-start;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: flex-end;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: space-between;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-5:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: space-evenly;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
Example-6:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:150px;
width: 500px;
display: flex;
justify-content: center;
}
.flex-item{
height: 100px;
width: 100px;
font-size: 30px;
/* margin: 10px; */
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 align-content allows items to align along cross axis in a single
line.
 The align-content: this property changes the behaviour of the
flex-wrap property. It aligns flex lines. It is used to specify the
alignment between the lines inside a flexible container. This
property defines how each flex line is aligned within a flexbox
and is only applicable if flex-wrap: wrap is applied i.e. if there
are multiple lines of flexbox items present.
 center: Displays the flex lines at the center of the flex
container.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 500px;
display: flex;
/* justify-content: center; */
align-content: center;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-item">1</div>
</div>
</body>
</html>
Browser:
 stretch: The line stretched to take the remaining space of flex

container. It is the default value.
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 400px;
display: flex;
align-content: stretch;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 flex-start: Displays the lines at the start of the flex container.

Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 400px;
display: flex;
align-content: flex-start;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 flex-end: Displays the flex lines at the end of the flex container
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 400px;
display: flex;
align-content: flex-end;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 space-around: By using space-around property space will be

distributed equally around the flex lines.
Example-5:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 400px;
display: flex;
align-content: space-around;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
}
</style>
</head>
<body>
</div>
</body>
</html>
Browser:
 space-between: Displays the flex lines with equal space

between them.
Example-6:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height:300px;
width: 400px;
display: flex;
align-content: space-between;
}
.flex-item{
height: 50px;
width: 50px;
font-size: 30px;
}
</style>
</head>
<body>
</div>
</body>
</html>
[
Browser:
 Other properties: start, end, normal, baseline, first baseline, last
baseline, space-evenly, safe, unsafe.
 https://developer.mozilla.org/en-US/docs/Web/CSS/align-
content
 align-items aligns multiple lines of items on the cross axis.

 The align-items: this property is used to set the alignment of
items inside the flexible container or in the given window. It
aligns the Flex Items across the axis. The align-self property is
used to override the align-items property.
 Syntax:
 align-items: normal | start | end | self-start |self-end |
baseline, first baseline, last baseline |stretch | center | flex-
start | flex-end |baseline |safe |unsafe | initial |inherit;
 initial: Sets this value/property to its default value.
 stretch: Items are stretched to fit the container and it is the
default value.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>align-items property</title>
<style>
.flex-container{
height: 100px;
width: 100px;
display: flex;
align-items: stretch;
}
</style>
</head>
<body>
<div style="background-color: green;">
green
</div>
<div style="background-color: red;">
red
</div>
</div>
</body>
</html>
Browser:
 center: The position of Items should be center of the container

vertically.
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 100px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
green
</div>
red
</div>
</div>
</body>
</html>
Browser:
 flex-start: Items will be positioned to the beginning of the

container.
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 100px;
display: flex;
align-items: flex-start;
}
</style>
</head>
<body>
green
</div>
red
</div>
</div>
</body>
</html>
Browser:
 flex-end: Items will be positioned to the end of the container.
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 100px;
display: flex;
align-items: flex-end;
}
</style>
</head>
<body>
green
</div>
red
</div>
</div>
</body>
</html>
Browser:
 baseline: Items will be positioned to the baseline of the
container.
Example-5:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 100px;
display: flex;
align-items: baseline;
}
</style>
</head>
<body>
green
</div>
red
</div>
</div>
</body>
</html>
Browser:
 Children/Flex-items properties:
 order allows the change of order of items without altering the
source order.
 Order property: This property is used to specify the order of
each flexible item in relation to other items inside the flexible
container. It only gives the position of the items present in the
container and is categorized into a different order as desired by
the user. If the element is not the flexible item then this
property does not exist anymore.
 Syntax:
 order: number | initial | inherit;
 number: This property is used to specify the order for the
flexible item and it gives a number to each item according to the
requirement for the user.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 200px;
display: flex;
}
#green{
order: 5;
}
#yellow{
order: 4;
}
#red{
order: 3;
}
</style>
</head>
<body>
<div id="green" style="background-color: green;">
1. green
</div>
<div id="yellow" style="background-color: yellow;">
2. yellow
</div>
<div id="red" style="background-color: red;">
3. red
</div>
<div id="blue" style="background-color: blue;">
4. blue
</div>
<div id="purple" style="background-color: purple;">
5. purple
</div>
</div>
</body>
</html>
Browser:
 flex-grow allows an item to fill up the available free space.

 The flex-grow property: specifies how much the item will grow
compared to other items inside that container. In other words,
it is the ability of an item to grow compared to other items
present inside the same container.
 Note: If the item in the container is not a flexible item then the
flex-grow property will not affect that item.
 Syntax:
 flex-grow: number| initial| inherit;
 Default Value: 0
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<style>
.flex-container{
height: 100px;
width: 400px;
display: flex;
}
#green:nth-of-type(1){
flex-grow: 1;
}
#red:nth-of-type(3){
flex-grow: 2;
}
</style>
</head>
<body>
1. green
</div>
2. yellow
</div>
3. red
</div>
4. blue
</div>
5. purple
</div>
</div>
</body>
</html>
Browser:
 flex-shrink allows an item to shrink if there is no enough free
space available.
 The flex-shrink property: specifies how much the item will
shrink compared to other items inside that container. It defines
the ability of an element to shrink in comparison to the other
elements which are placed inside the same container.
 Note: If the item in the container is not a flexible item then the
flex-shrink property will not affect that item.
 Syntax:
 flex-shrink: number| initial| inherit;
 Default Value: 1
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>flex shrink property</title>
<style>
.flex-container{
height: 150px;
width: 400px;
display: flex;
}
flex-shrink: 8;
}
#yellow:nth-of-type(2){
flex-shrink: 4;
}
flex-shrink: 4;
}
</style>
</head>
<body>
<p>A number specifying how much the item
will shrink relative to the rest of the
flexible items.
</p>
</div>
<p>Default value is 1</p>
</div>
red: color indicaction of danger
</div>
blue
</div>
</div>
</body>
</html>
Browser:
 flex-basis defines the size of an item before space is distributed.

 The flex-basis property in CSS is used to specify the initial size
of the flexible item. The flex property is not used if the element
is not flexible item.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>flex basis property</title>
<style>
.flex-container{
height: 100px;
width: 300px;
display: flex;
}
flex-basis: 80px;
}
#yellow:nth-of-type(2){
flex-basis: 50%;
}
flex-basis: auto;
}
#blue:nth-of-type(4){
flex-basis: initial;
}
#purple:nth-of-type(5){
flex-basis: inherit;
}
</style>
</head>
<body>
number 80px
</div>
percentage
</div>
auto
</div>
initial
</div>
inherit
</div>
</div>
</body>
</html>
Browser:
 flex is the shorthand for flex-grow + flex-shrink + flex-basis.
 flex-self has the ability to align one single item within the flex
container. Examples are align-self and justify-self.
 align-self Property: The align-self property in CSS is used to
align the selected items in the flexible container in many
different manners such as flex-end, center, flex-start, etc.
 align-self: auto |normal | self-start | self-end | stretch |center
|baseline, first baseline, last baseline |flex-start |flex-end |
baseline |safe | unsafe;
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>flex basis property</title>
<style>
.flex-container{
height: 100px;
width: 200px;
display: flex;
}
#green{
align-self: flex-end;
}
#yellow{
align-self: flex-start;
}
#red{
align-self: center;
}
#blue{
align-self: last baseline;
}
#purple{
align-self:first baseline;
}
</style>
</head>
<body>
green
</div>
yellow
</div>
red
</div>
blue
</div>
purple
</div>
</div>
</body>
</html>
Browser:
__________________________________________________
16. Explain @media queries.
 CSS Media query is a W3C recommendation and a CSS3 module
which is used to adapt to conditions such as screen resolution
(e.g. Smartphone screen vs. computer screen).
 The media query technique first used in CSS3.
 It became a W3C recommendation in June 2012.
 It is an extension of media dependent stylesheets used in
different media types (i.e. screen and print) found in CSS2.
 The most commonly used media feature is "width".
 It uses the @media rule to include a block of CSS properties only
if a certain condition is true.
 What is Responsive Web Design?
 The term Responsive Web Design was given by Ethan Marcotte.
It facilitates you to use fluid grids, flexible images, and media
queries to progressively enhance a web page for different
viewing contexts i.e. Desktop, Smartphone, Tablet etc.
 What screen resolutions do you use while taking screenshots?
 Smartphone: 320px
 Tablet: 768px
 Netbook: 1024px
 Desktop: 1600px
 Features of Media query: There are many features of media
query which are listed below:
 color: The number of bits per color component for the output
device.
 grid: Checks whether the device is grid or bitmap.
 height: The viewport height.
 aspect ratio: The ratio between width and height of the viewport.
 color-index: The number of colors the device can display.
 max-resolution: The maximum resolution of the device using dpi
and dpcm.
 monochrome: The number of bits per color on a monochrome
device.
 scan: The scanning of output devices.
 update: How quickly can the output device modify.
 width: The viewport width.
 Let's take an example to see the simple use of media query:
 This example specifies that if you resize your window less than
500px, the background color will be changed.
 We can add the breakpoint to see the screen width along with
the width and height of the viewport for the different devices. A
breakpoint is a point or key that determines when to change the
layout by reshaping & adding new rules inside the media queries.
There are some common breakpoints, not a standard resolution,
that can be used for the different widths & heights of devices:
 For Mobile devices: 320px-480px
 For Tablets or iPad: 480px - 768px
 For Laptop or small-size screen: 768px -1024px
 For Desktop or large-size screen: 1024px -1200px
 For Extra-large size device: 1200px and more
 How to add a breakpoint?
 Media query can be used to create a responsive webpage. The
breakpoint is used on web pages where you want that certain
parts of the design will behave differently on each side of the
breakpoint.
__________________________________________________
17. Explain 2D Transforms and 3D Transforms.
 CSS Transforms
 CSS3 supports transform property. This transform property
facilitates you to translate, rotate, scale, and skews elements.
 Transformation is an effect that is used to change shape, size and
position.
 There are two type of transformation i.e. 2D and 3D
transformation supported in CSS3.
 2D Transforms
 The CSS 2D transforms are used to re-change the structure of the
element as translate, rotate, scale and skew etc.
 Following is a list of 2D transforms methods:
 translate(x,y): It is used to transform the element along X-axis
and Y-axis.
 translateX(n): It is used to transform the element along X-axis.
 translateY(n): It is used to transform the element along Y-axis.
 rotate(): It is used to rotate the element on the basis of an angle.
 scale(x,y): It is used to change the width and height of an
element.
 scaleX(n): It is used to change the width of an element.
 scaleY(n): It is used to change the height of an element.
 skewX(): It specifies the skew transforms along with X-axis.
 skewY(): It specifies the skew transforms along with Y-axis.
 matrix(): It specifies matrix transforms.
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>translate property</title>
<style>
.translate{
height: 100px;
width: 100px;
background-color: greenyellow;
text-align: center;
/* transform: translateY(50px);
transform: translateX(50px); */
transform: translate(50px, 100px);
}
</style>
</head>
<body>
<div class="translate">
This is translateX and translateY property.
</div>
</body>
</html>
Browser:
Example-2:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>rotate property</title>
<style>
.rotate{
height: 100px;
width: 100px;
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="rotate">
This is translateX and translateY property.
</div>
</body>
</html>
Browser:
Example-3:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>scale property</title>
<style>
.scale{
height: 100px;
width: 100px;
text-align: center;
margin: 100px;
}
.scale:hover{
transform: scale(2.4, 2);
}
</style>
</head>
<body>
<div class="scale">
This is scaleX and scaleY property.
</div>
</body>
</html>
Browser:
Example-4:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>rotate property</title>
<style>
.skew{
height: 100px;
width: 100px;
text-align: center;
margin: 20px;
}
.skew:hover{
transform: skew(-20deg);
}
</style>
</head>
<body>
<div class="skew">
This is skew property.
</div>
</body>
</html>
Browser:
 3D Transforms
 The CSS 3D transforms facilitates you to move an element to X-
axis, Y-axis and Z-axis. Following is a list of 3D transforms
methods:
__________________________________________________
18. Explain Aural Media.
 CSS Aural Media or CSS Style Sheets are used to attach specific
sound style features to specific document elements. It uses
speech synthesis and sound effect to facilitate users to listen to
information instead of reading them. So, it is very useful for
visually impaired people.
 Aural media can be used in following:
 Used by blind or visually impaired people
 Help users learning to read and right pronunciation
 Training
 Help users who have reading problems
 Facilitates web access in vehicles
 Home entertainment
 Used by print-impaired communities
 Medical documentation
 Industrial documentation
__________________________________________________
19. Explain CSS User Interface.
 User Interface (UI) defines the way humans interact with the
information systems. In Layman’s term, User Interface (UI) is a
series of pages, screens, buttons, forms and other visual
elements that are used to interact with the device. Every app and
every website has a user interface.
 The user interface property is used to change any element into
one of several standard user interface elements.
Values Description
appearanc It facilitates users to make elements as user interface

e elements.
box-sizing It facilitates users to fix elements on area in clear way.
icon It is used to provide the icon on area.

resize It is used to resize elements which are on area.
outline- It is used to set space between an outline and the

offset edge or border of an element.
nav-down It is used to move down while pressing the down arrow

button in keypad.
nav-left It is used to move left while pressing the left arrow

button in keypad.
nav-right It is used to move right while pressing the right arrow

button in keypad.
nav-up It is used to move up while pressing the up arrow

button in keypad.
 Note: resize and outline-offset are the most important properties

of the CSS user interface.
 Resize property can have 3 common values:
 Horizontal resize
 Vertical resize
 Both (horizontal & vertical) resize.
__________________________________________________
20. Explain CSS pagination.
 CSS pagination is a very useful technique for indexing different
pages of a website on the homepage. If your website has lots of
pages, you have to add some sort of pagination to each page.
 Pagination is the process of dividing the document into pages
and providing them with numbers.
 Types of Pagination: There are many types of pagination in CSS.
Some of them are given below:
 Simple Pagination
 Active and Hoverable Pagination
 Rounded Active and Hoverable Buttons
 Hoverable Transition Effect
 Bordered Pagination
 Rounded Border Pagination
 Centered Pagination
 Space between Pagination
 Pagination Size
__________________________________________________
21. CSS minify.
 The minification of a CSS file means the elimination of
unnecessary characters from the source code to decrease the
size of the file. The main purpose of minification is to increase
the speed of the website.
 When any user requests on a webpage, then instead of sending
the full version, the minified version will be sent. It results in the
lower cost of bandwidth and makes the response time faster. It
helps to make the site accessible and increase the ranking of the
search engine.
 Minification includes the removal of unnecessary characters such
as line breaks, white spaces, block delimiters, and comments.
The minified CSS files end with the extension '.min.css'.
 Minification is different from compression. Compression is used
to make a minified file reduce, but it does not affect the structure
and styling of the code. After the minification, the minified code
is harder to read for the human but not for a machine. It is
because the machine does not care about the whitespaces and
the beauty of code.
 How to minify the CSS file?
 There are multiple tools available online to minify the CSS file.
We can use them to reduce the size of the CSS file. Let's discuss
them.
 CSS minifier - An online tool
 It is an online tool that helps us to minify the CSS file. You can use
this tool by following the link https://cssminifier.com/. This tool
is simple to use. In this tool, first, we have to paste our source
code, or directly upload the source code file. Then, we need to
click the minify button to minify the CSS file. After completing the
process, our CSS code will get minified, and we can see it in the
minified output column.
__________________________________________________
22. Explain CSS Grid.
 The CSS grid layout module is used to create a grid-based layout
system, with the help of rows and columns it makes it easier to
design any webpage without using floats and positioning.
 A grid can be defined as an intersecting set of horizontal lines
and vertical lines. CSS Grid layout divides a page into major
regions. It defines the relationship between the parts of a control
built from HTML primitives in terms of layer, position, and size.
Grid property offers a grid-based layout system having rows and
columns. It makes the designing of web pages easy without
positioning and floating.
 Similar to the table, it enables a user to align the elements into
rows and columns. But compare to tables, it is easy to design
layout with the CSS grid. We can define columns and rows on the
grid by using grid-template-rows and grid-template-columns
properties.
 Syntax:
 .class {
display: grid;
}
 Note: An HTML element becomes a grid if that element sets
display: grid; in style section or inline-grid. Below you will see
both examples.
 CSS Grid Layout Properties: These are the following grid-layout
properties:
 column-gap: It is used to specify the amount of gap between the
columns in which a given text is divided using the column-count
property.
 gap: It is used to set the spacing also caller gutter between the
rows and columns.
 grid: It offers a grid-based layout system, with rows and columns,
making it easier to design web pages without floats and
positioning.
 grid-area: It is used to set a grid item size and location in a grid
layout.
 grid-auto-columns: It is used to specify the size for the columns
of implicitly generated grid containers.
 grid-auto-flow: It specifies exactly how auto-placed items get
flow into the grid.
 grid-auto-rows: It is used to specify the size for the rows of
implicitly generated grid containers.
 grid-column: It describes the number of properties that allow to
design of grid structures and control the placement of grid items
using CSS.
 grid-column-end: It explains the number of columns an item will
span, or on which column-line the item will end.
 grid-column-gap: It is used to set the size of the gap between the
columns in a grid layout.
 grid-column-start: It defines for which column line item will start.
 grid-gap: It is used to sets the size of the gap between the rows
and columns in a grid layout.
 grid-row: It is used to specify the size and location in a grid
layout.
 grid-row-end: It is used to define the grid item’s end position
within a grid row by specifying the inline edge of its grid area.
 grid-row-gap: It is used to define the size of the gap between the
grid elements.
 grid-row-start: It is used to define the grid items’ start position
within the grid row by specifying the inline start edge of its grid
area.
 grid-template: It is a shorthand property for defining grid
columns, rows, and areas.
 grid-template-areas: It is used to specify the area within the grid
layout.
 grid-template-columns: It is used to set the number of columns
and size of the columns of the grid.
 grid-template-rows: It is used to set the number of rows and
height of the rows in a grid.
 justify content with grid:
 It is used to align the entire grid within the container. It includes
values such as:
 space-evenly: It provides equal space in between or around the
columns.
 space-around: It provides equal space around the columns.
 space-between: It gives an equal amount of space between the
columns.
 center: It is used to align the grid in the middle of the container.
 start: It is used to align the grid at the beginning of the container.
 end: It is used to align the grid at the end of the container.
 The align-content property
 It is used to align the entire grid within the container vertically.
 Note: It is noted that the total height of the grid should be less
than the height of the container for any effect of the align-
content property.
 The values of the align-content property are the same as the
values of the justify-content property.
__________________________________________________
23. Explain CSS Layout.
 CSS layout is easy to design. We can use CSS layout to design our
web page such as home page, contact us, about us etc.
 There are 3 ways to design layout of a web page:
 HTML Div with CSS: fast and widely used now.
 HTML Table: slow and less preferred.
 HTML Frameset: deprecated(discouraged) now.
 A CSS layout can have header, footer, left pane, right pane and
body part. Let's see a simple example of CSS layout.
 A website can be divided into various sections comprising of
header, menus, content, and footer based on which there are
many different layout designs available for developers. Different
layouts can be created by using a div tag and using CSS property
to style it.
 Notice: Header section contains a website logo, a search bar and
profile of user. The navigation menu contains link to various
categories of articles available and content section is divided into
3 parts(columns) with left and right sidebar containing links to
other articles and advertisements whereas the main content
section is the one containing this article, then at the bottom
there is a footer section which contains address, links, contacts
etc.
 Header Section: The header section is generally placed either at
the top of the Website or just below a top navigation menu. It
often comprises of the name of the Website or the logo of the
Website.
 Navigation Menu: A Navigation Bar/Menu is basically a list of
links that allows visitor to navigate through the website
comfortably with easy access.
 Content Section: The content section is the main body of the
website. The user can divide the content section in an n-column
layout.
 The most common layouts are:
 1-Column Layout: It is mostly used for mobile layout.
 2-Column Layout: This website layout is mostly used for tablets

or laptops.
 3-Column Layout: This website layout is mostly used for

desktops.
__________________________________________________
24. Explain CSS table.
 We can apply style on HTML tables for better look and feel. There
are some CSS properties that are widely used in designing table
using CSS:
 border
 border-collapse
 padding
 width
 height
 text-align
 color
 background-color
 vertical align
 empty cells
 caption side
 table layout
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>CSS tables</title>
<style>
/* spacing */
table,th,td,tr{
border: 1px solid purple;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
thead th:nth-child(1) {
width: 30%;
}
width: 20%;
}
width: 15%;
}
width: 35%;
}
th,
td {
padding: 20px;
}
.cap{
font-size: 30px;
}
</style>
</head>
<body>
<table>
<caption class="cap">
A summary of the UK's most famous punk bands
</caption>
<thead>
<tr>
<th scope="col">Band</th>
<th scope="col">Year formed</th>
<th scope="col">No. of Albums</th>
<th scope="col">Most famous song</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Buzzcocks</th>
<td>1976</td>
<td>9</td>
<td>Ever fallen in love (with someone you
shouldn't've)</td>
</tr>
<tr>
<th scope="row">The Clash</th>
<td>1976</td>
<td>6</td>
<td>London Calling</td>
</tr>

<tr>
<th scope="row">The Stranglers</th>
<td>1974</td>
<td>17</td>
<td>No More Heroes</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" colspan="2">Total albums</th>
<td colspan="2">77</td>
</tr>
</tfoot>
</table>
</body>
</html>
Browser:
__________________________________________________
25. Explain Box Model.

 What is the CSS box model?
 The CSS box model as a whole applies to block boxes and defines
how the different parts of a box — margin, border, padding, and
content — work together to create a box that you can see on a
page. Inline boxes use just some of the behaviour defined in the
box model.
 To add complexity, there is a standard and an alternate box
model. By default, browsers use the standard box model.
 Parts of a box
 Making up a block box in CSS we have the:
 Content box: The area where your content is displayed; size it
using properties like inline-size and block-size or width and
height.
 Padding box: The padding sits around the content as white
space; size it using padding and related properties.
 Border box: The border box wraps the content and any padding;
size it using border and related properties.
 Margin box: The margin is the outermost layer, wrapping the
content, padding, and border as whitespace between this box
and other elements; size it using margin and related properties.
 Box-Model has multiple properties in CSS. Some of them are
given below:
 content: This contains the actual data in the form of text, images,
or other media forms and it can be sized using the width & height
property.
 padding: This property is used to create space around the
element, inside any defined border.
 border: This property is used to cover the content & any padding,
& also allows setting the style, color, and width of the border.
 margin: This property is used to create space around the element
i.e., around the border area.
 The following figure illustrates the Box model in CSS.
 box model property
 Content Area: This area consists of content like text, images, or
other media content. It is bounded by the content edge and its
dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is
actually the space around the content area and within the
border-box. Its dimensions are given by the width of the
padding-box and the height of the padding-box.
 Border Area: It is the area between the box’s padding and
margin. Its dimensions are given by the width and height of the
border.
 Margin Area: This area consists of space between the border and
the margin. The dimensions of the Margin area are the margin-
box width and the margin-box height. It is useful to separate the
element from its neighbours.
 https://developer.mozilla.org/enUS/docs/Learn/CSS/
Building_blocks/The_box_model#what_is_the_css_box_model
Example-1:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Box-model property</title>
<style>
.main{
color: black;
font-size: 40px;
text-align: center;
}
.box{
border: 10px solid green;
padding: 20px;
margin-left: 35%;
margin-right: 35%;
text-align: center;
padding:30px;
margin-top: 30px;
padding-top: 40px;
padding-bottom: 40px;
}
.heading{
color: green;
font-size: 30px;
}
.description{
color:black;
}
</style>
</head>
<body>
<div class="main">Box-model property</div>
<div class="box">
<div class="heading">Box-Model</div>
<div class="description">This is box-model property</div>
</div>
</body>
</html>
Browser:

CSS Revise

Uploaded by

Copyright:

Available Formats

CSS Revise

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Revise

Uploaded by

Copyright:

Available Formats

CSS websites link to read:

3. How to add CSS?

 background-image: The background-image property is used to

 background-repeat: By default, the background-image property

 background-attachment: The background-attachment property is

padding It is the default value that positions the background

border- It positions the background relative to the border-box.

content- It positions the background relative to the content-box.

inherit It inherits the property from its parent element.

none It doesn't define any border.

dotte It is used to define a dotted border.

dashe It is used to define a dashed border.

solid It is used to define a solid border.

doubl It defines two borders with the same border-width value.

groov It defines a 3d grooved border. effect is generated

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

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

outset It defines a 3d outset border. effect is generated according

 The border-image property is the combination of many

inline It is used to display an element as an inline element.

block It is used to display an element as a block element

contents It is used to disappear the container.

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

It is used to display an element as a block-level grid

It is used to display an element as an inline-level block

It is used to display an element as an inline-level flex

It is used to display an element as an inline-level grid

inline-table It is used to display an inline-level table

list-item It is used to display all the elements in <li> element.

It is used to display an element inline or block level,

table It is used to set the behavior as <table> for all elements.

table- It is used to set the behavior as <caption> for all

table- It is used to set the behavior as <footer> for all elements.

table-cell It is used to set the behaviour as <td> for all elements.

table-row It is used to set the behavior as <tr> for all elements.

none It is used to remove the element.

initial It is used to set the default value.

inherit It is used to inherit property from its parents’ elements.

 A floated element may be moved as far to the left or the right as

Red FF0000 255, 0, 0

Pink FFC0CB 255, 192, 203

Orange FFA500 255, 165, 0

Yellow FFFF00 255, 255, 0

Violet EE82EE 238, 130, 238

Green 008000 0, 128, 0

Aqua 00FFFF 0, 255, 255

Blue 0000FF 0, 0, 255

Brown A52A2A 165, 42, 42

White FFFFFF 255, 255, 255

Gray 808080 128, 128, 128

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

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

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

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

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

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

<h3>CSS counter example</h3>

<h3>CSS counter example</h3>

 To fix this problem, there are two ways. The first is by

44. Explain CSS specificity.