CSS Tutorial

CSS tutorial: CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS
are given below:

○ CSS stands for Cascading Style Sheet.

○ CSS is used to design HTML tags.

○ CSS is a widely used language on the web.

○ HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

CSS 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.
 1. CSS Element Selector : p{ text-align: center ; color: blue; }

2. CSS Id Selector : #idName { text-align: center; color: blue; }

3. CSS Class Selector : .className { text-align: center; color: blue; }

4. CSS Universal Selector : * { color: green; font-size: 20px; }

5. CSS Group Selector : h1,p.center { text-align: center; color: blue; }

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.

1. Inline CSS : <p style="color:blue">Hello CSS</p>

2. Internal CSS : <style>p{color:blue}</style>

3. External CSS :<link rel="stylesheet" type="text/css" href="style.css">

CSS Properties

CSS Background
CSS background property is used to define the background effects on element. There
are 5 CSS background properties that affects the HTML elements:

1. background-color : #b0d4de , #fff, red;

2. background-image: url("paper1.gif");

3. background-repeat: repeat-x, repeat-y, no-repeat;

4. background-attachment: fixed, scroll, local, unset;

5. background-position : center,left,right,top,bottom;
 CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are used to specify the style, color and size of the border of
an element. The CSS border properties are given below

1. border-style : none, dotted, solid, dashed, double, groove, ridge, inset, outset;

2. border-color : “red”, rgba(255,255,255, 0.5), rgb, hex(#fff000);

3. border-width : px, rem, em;

4. Border-radius : all(5px), top,bottom, left, right, (10%, 0%, 12%, 12%),

border-top-left-radius:50%;

5. border-collapse: separate | collapse | initial | inherit;

6. border-spacing: length | initial | inherit;

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

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

CSS display values

There are following CSS display values which are commonly used.

1. display: inline; (<span> <a> <em> <b> etc.)

2. display: inline-block;(Just content area block)

3. display: block; (p, h1, div, etc)

 4. display: run-in;

5. display: none;

6. display: flex;

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.

cursor : (alias Value, auto Value, all-scroll value, col-resize value, Crosshair Default value
,copy value, Pointer, Move, e-resize, ew-resize, ne-resize, nw-resize, n-resize ,se-resize,
sw-resize, s-resize, w-resize, text, wait, help, Progress, no-drop, not-allowed, vertical-text,
Zoom-in, Zoom-out)

CSS Buttons
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.

button : (background-color:red, border: none,solid, groove, dashed, dotted, double,

font-size:19px,padding:12px,color:highlight)

CSS Float
The CSS float property is a positioning property. It is used to push an element to the left
or right, allowing other elements to wrap around it. It is generally used with images and
layouts.
Polymorphism in Java | Dynamic Method Dispatch

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

Its web layout is also just similar to print layout.

 CSS Float Properties

Property Description Values

clear The clear property is left, right, both, none, inherit

used to avoid

elements after the

floating elements

which flow around it.

float It specifies whether left, right, none, inherit

the box should float

or not.

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.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (color name,
hexadecimal,RGB)
 2. CSS Font family: This property is used to change the face of the font.(Times new
roman, Georgia etc)

3. CSS Font size: This property is used to increase or decrease the size of the
font.(px, %, rem, em, xx-small: used to display the extremely small text size.
x-small: used to display the extra small text size. small: used to display small text
size. medium: used to display medium text size. large used to display large text
size. x-large: used to display extra large text size. xx-large: used to display
extremely large text size. smaller:used to display comparatively smaller text size.
larger: used to display comparatively larger text size. size in pixels or % used
to set value in percentage or in pixels.)

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

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

small-caps; } h3 { font-variant: normal; };

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

CSS font-stretch property

The font-stretch property in CSS allows us to select a normal, expanded, or condensed
face from the font's family. This property sets the text wider or narrower compare to the
default width of the font. It will not work on any font but only works on the font-family
that has a width-variant face.This CSS property only works for the fonts with additional
faces like expanded and condensed faces; otherwise, it will be affectless for the fonts
that don't have condensed or expanded faces.The nine keyword values for choosing the
width of the font-face are given in the following syntax.

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

| semi-expanded | expanded | extra-expanded | ultra-expanded.
 CSS hover
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.

className:hover { css declarations; }

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
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 property

element { font-size: 14px !important; color: blue !important; ... }

CSS 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.

Syntax

element {background-color: color_name|transparent|initial|inherit; }

CSS background-attachment property

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.

Syntax
1. background-attachment: scroll | fixed | local | initial | inherit;

CSS background-size property

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.

Syntax
1. background-size: auto | length | cover | contain | initial | inherit;

CSS Line Height

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

Polymorphism in Java | Dynamic Method Dispatch

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

CSS line-height values

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

value description

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

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

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

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

 initial It sets this property to its default value.

inherit It inherits this property from its parent element.

CSS Line Height

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

Polymorphism in Java | Dynamic Method Dispatch

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

CSS line-height values

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

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

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

height.

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

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

initial It sets this property to its default value.

inherit It inherits this property from its parent element.

CSS 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.

Polymorphism in Java | Dynamic Method Dispatch

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

There are following CSS margin properties:

CSS Margin Properties

Property Description

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

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

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

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

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

 CSS Margin Values
These are some possible values for margin property.

Value Description

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

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

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

inherit It is used to inherit margin from parent elements.

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.

CSS Opacity Example: transparent image

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

img.trans { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

 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.

Polymorphism in Java | Dynamic Method Dispatch

The syntax of CSS filter property is given below.

Syntax

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

hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();

Syntext

#img1 {

filter: brightness(130%);

filter: blur(2px);

filter: invert(60);

filter: saturate(40);

filter: drop-shadow(10px 20px 30px yellow);

filter: opacity(40%);

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

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

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

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

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

#img1 { filter: invert(60); }

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

#img1 { filter: saturate(40); }

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

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

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

#img1 { filter: contrast(50%); }

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

Let's understand it by an illustration.

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

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

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

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

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

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

img{ border: 2px solid red; border-radius:5px; padding:10px; opacity:0.3; }

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

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

○ border-top-left-radius: It sets the border of the top-left corner.

○ border-bottom-right-radius: It sets the border of the bottom-right corner.

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

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

Responsive Image

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

#img1{max-width:100%;height:auto;}

Center an Image

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

#img1{margin-left:auto;margin-right:auto;display:block;}

CSS Overflow
The CSS overflow property specifies how to handle the content when it overflows its
block level container.

We know that every single element on a page is a rectangular box and the size,
positioning and behavior of these boxes are controlled via CSS.
Let's take an example: If you don't set the height of the box, it will grow as large as the
content. But if you set a specific height or width of the box and the content inside
cannot fit then what will happen. The CSS overflow property is used to overcome this
problem. It specifies whether to clip content, render scroll bars, or just display content.

CSS Overflow property values

Value Description

visible It specifies that overflow is not clipped. it renders outside the element's box.this is a

default value.

hidden It specifies that the overflow is clipped, and rest of the content will be invisible.

scroll It specifies that the overflow is clipped, and a scroll bar is used to see the rest of

the content.

auto It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the

content.

inherit It inherits the property from its parent element.

 initial It is used to set the property to its initial value.

CSS Padding
CSS Padding property is used to define the space between the element content and the
element border.

It is different from CSS margin in the way that CSS margin defines the space around
elements. CSS padding is affected by the background colors. It clears an area around
the content.

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

CSS Padding Properties

Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.

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

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

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

CSS Padding Values

Valu Description
e

Length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element

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. These
properties can be used only after position property is set first. A position element's
computed position property is relative, absolute, fixed or sticky.
Let's have a look at following CSS positioning:

1. CSS Static Positioning

2. CSS Fixed Positioning

3. CSS Relative Positioning

4. CSS Absolute Positioning

1) CSS Static Positioning

This is a by default position for HTML elements. It always positions an element

according to the normal flow of the page. It is not affected by the top, bottom, left and
right properties.

2) CSS Fixed Positioning

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.

3) CSS Relative Positioning

The relative positioning property is used to set the element relative to its normal
position.

h2.pos_left { position: relative; left: -30px; }

4) CSS Absolute Positioning

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.

h2 { position: absolute; left: 150px; top: 250px; }

All CSS Position Properties

No. propert description values

y

1) bottom It is used to set auto, length, %, inherit

the bottom

margin edge for

a positioned

box.
2) clip It is used to clip shape, auto, inherit

an absolutely

positioned

element.

3) cursor It is used to url, auto, crosshair, default, pointer, move, e-resize,

specify the type ne-resize, nw-resize, n-resize, se-resize, sw-resize,

of cursors to be s-resize, w-resize, text, wait, help

displayed.

4) left It sets a left auto, length, %, inherit

margin edge for

a positioned

box.

5) overflow This property is auto, hidden, scroll, visible, inherit

used to define

what happens if

content overflow
 an element's

box.

6) position It is used to absolute, fixed, relative, static, inherit

specify the type

of positioning

for an element.

7) right It is used to set auto, length, %, inherit

a right margin

edge for a

positioned box.

8) top It is used to set auto, length, %, inherit

a top margin

edge for a

positioned box.

9) z-index It is used to set number, auto, inherit

stack order of

an element.
CSS Vertical Align
The CSS vertical align property is used to define the vertical alignment of an inline or
table-cell box. It is the one of the self-explanatory property of CSS. It is not very easy
property for beginners.

What it does

1. It is applied to inline or inline-block elements.

2. It affects the alignment of the element, not its content. (except table cells)

3. When it applied to the table cells, it affect the cell contents, not the cell itself.

CSS Vertical Align Values

value description

baseline It aligns the baseline of an element with the baseline of the parent element.

This is a default value.

length It is used to increase or decrease the length of the element by the specified

length. negative values are also allowed.

% It is used to increase or decrease the element in a percent of the "line-height"

property. negative values are allowed.

sub It aligns the element as if it was subscript.

super It aligns the element as if it was superscript.

top It aligns the top of the element with the top of the tallest element on the line.

bottom It aligns the bottom of the element with the lowest element on the line.

text-top the top of the element is aligned with the top of the parent element's font.

middle the element is placed in the middle of the parent element.

text-bottom the bottom of the element is aligned with the bottom of the parent element's

font.

initial It sets this property to Its default value.

 inherit inherits this property from Its parent element.

CSS White Space

The CSS white space property is used to specify how to display the content within an
element. It is used to handle the white spaces inside an element.

CSS White Space values

There are many white space values that can be used to display the content inside an
element.

Value Description

normal This is a default value. in this value, text is wrapped when necessary. sequences

of white space will collapse into a single whitespace.

nowrap Sequences of white space will collapse into a single whitespace. in this value,

text will never wrap to the next line and only break when <br> tag is used.
 pre Whitespace is preserved by the browser. it is act like html <pre> tag. text will

only wrap on line breaks.

pre-line Sequences of white space will collapse into a single whitespace. texts are

wrapped when necessary, and on line break.

pre-wrap Whitespace is preserved by the browser. texts are wrapped when necessary, and

on line break.

initial It sets this property to its default value.

inherit It inherits this property from its parent element.

CSS Width
The CSS width property is used to set the width of the content area of an element.

It does not include padding borders or margins. It sets width of the area inside the
padding, border, and margin of the element.
CSS width values

Valu Description
e

auto It is a default value. it is used to calculate the width.

length It is used to define the width in px, cm etc.

% It defines the width of the containing block in %.

initial It is used to set the property to its default value.

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

CSS 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.

CSS Word Wrap Values

Value Description

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.

Box-shadow CSS
It is used to add shadow-like effects around the frame of an element.

Syntax

1. box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;

Let's understand property values.

h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to the
right side of the box. Its negative value is used to set the shadow on the left side of the box.

v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive value in
it sets the shadow below the box, and the negative value sets the shadow above of the box.

blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.

spread: It sets the shadow size. The spread size depends upon the spread value.

color: As its name implies, this attribute is used to set the color of the shadow. It is an optional
attribute.

inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be
created within the box.

initial: It is used to set the property of the box-shadow to its default value.

inherit: it is inherited from its parent.

none: It is the default value that does not include any shadow property.

Let's understand the above attributes by using an illustration.

CSS Text-shadow
As its name implies, this CSS property adds shadows to the text. It accepts the
comma-separated list of shadows that applied to the text. It's default property is none. It
applies one or more than one text-shadow effect on the element's text content.

Let's see the syntax of text-shadow property.

Syntax

1. text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;

Values

h-shadow: It is the required value. It specifies the position of the horizontal shadow and
allows negative values.

v-shadow: It is also the required value that specifies the position of the vertical shadow.
It does not allow negative values.

blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.

color: It is the color of the shadow and also an optional value.

none: It is the default value, which means no shadow.

initial: It is used to set the property to its default value.

inherit: It simply inherits the property from its parent element.

Let's understand it by using some illustrations.

CSS text-transform
This CSS property allows us to change the case of the text. It is used to control the text
capitalization. This CSS property can be used to make the appearance of text in
all-lowercase or all-uppercase or can convert the first character of each word to
uppercase.

Syntax

1. text-transform: capitalize| uppercase | lowercase | none | initial | inherit;

CSS Outline
CSS outline is just like CSS border property. It facilitates you to draw an extra border
around an element to get visual attention.

It is as easy to apply as a border.

See this example:.box {

background-color: #eee;

outline: 3px solid red;

border: 3px solid lightgreen;

padding: 5px 10px;

}
Difference between Border and Outline

At first glance, border and outline look similar, but there are some very important
differences between them:

○ It is not possible to apply a different outline width, style and color for the four
sides of an element while in border; you can apply the provided value for all four
sides of an element.

○ The border is a part of element's dimension while the outline is not the part of
element's dimension. Means, it doesn't matter how thick an outline you apply to
the element, the dimensions of it won't change.

The outline property is a shorthand property. It can be divided into outline-width,

outline-style and outline-color properties. It facilitates you to use any of the property
alone, if you need it.

See this example: .box {

background-color: #eee;

border: 3px solid Lightgreen;

padding: 5px 10px;

outline-width: 3px;

outline-style: solid;

outline-color: red;

}
Outline-width:It is similar to margin and padding. It can be either an absolute value or a
relative value or one of the predefined outline width values i.e. thin, medium or thick. It is
preferred to use either an absolute value or a relative value because different browsers
interpret differently while using predefined outline width values like thin, medium or
thick.

Outline-color:It specifies the color that you use for the outline. It supports all the colors
available in HTML and CSS.

Outline-style:In the above example, we have used only solid outline style while there are
a lot of outline style i.e. hidden, dotted, dashed, solid, double, groove, ridge, inset and
outset.

Let's take an example to demonstrate the usage of different outline-styles.

CSS Visibility
The CSS visibility property is used to specify whether an element is visible or not.

Note: An invisible element also take up the space on the page. By using display property
you can create invisible elements that don't take up space.

Syntax:

1. visibility: visible|hidden|collapse|initial|inherit;

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

hidden:It specifies that the element is invisible (but still takes up space).
collapse:It is used only for table elements. It is used to remove a row or column, but it
does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

initial:It is used to set this property to its default value.

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

CSS Visibility Example

h1.visible { visibility: visible } h1.hidden { visibility: hidden }

CSS Counters
CSS counters are similar to variables. These are maintained by CSS and those values
can be incremented by CSS rules to track how many times they are used.

CSS counters facilitate simple CSS based incrementing and display of a number for
generated content.

CSS Counter Properties

Following is a list of properties that are used with CSS counter:

○ counter-reset: It is used to create or reset a counter.

○ counter-increment: It is used to increment the counter value.

○ content: It is used to insert generated content.

○ counter() or counters() function: It is used to add the value of a counter to an

element.
 CSS Counter Example

Let's take an example to create a counter for a page and increment the counter value for
each next element.

h2::before {

counter-increment: section;

content: "Section " counter(section) ": ";

CSS clearfix
A clear float (or clearfix) is a way for an element to fix or clear the child elements so that
we do not require to add additional markup. It resolves the error which occurs when
more than one floated elements are stacked next to each other.

Suppose if we set the position of a sidebar to the left of the main content block, but we
get the elements collapse and overlap on each other. We can understand it as if a child
element is floated and taller than its parent element; it will overflow outside of its
container.

To overcome this, we can use the overflow: auto; property to the containing element.

Let us try to understand it by using an example.

Example

In this example, the image is floated and taller than the element containing it, so that it
overflows outside of its container.

Now, we are creating a class jtp and add the overflow: auto; property to the
corresponding element.
Example

In this example, we set the clear property to 'both', which stands that the floating
elements will not allow on both the left and right sides. We set the display property to
'table', which makes the element behave like <table> element of HTML. And we also
have to leave the content empty.

div {

border: 3px solid red;

padding: 5px;

background-color:pink;

font-size:20px;

img{

float: right;

border: 3px solid blue;

p{

font-size:20px;

clear:right;

.jtp:after{

content:'.';

clear:both;

display: table;

}
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 given some of the icon libraries such as Bootstrap icons, Font Awesome
icons, and Google icons that can be used in CSS easily. There is no need to install or
download the libraries mentioned above.

Let's discuss the above-mentioned libraries of icons.

Font Awesome icons

To use this library in our HTML page, we need to add the following link within the
<head></head> section.

1. <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awes
ome.min.css">

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.

Syntax

1. justify-content: center | flex-start | flex-end | space-around | space-evenly |

space-between | initial | inherit;

The default value of this property is flex-start. Let's understand its property values in
detail.

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.

#flexstart{

display:flex;

justify-content: flex-start;

#flexend{
display:flex;

justify-content: flex-end;

#cent{

display:flex;

justify-content: center;

#evenly{

display:flex;

justify-content: space-evenly;

#around{

display:flex;

justify-content: space-around;

#between{

display:flex;

justify-content: space-between;

.flex-item{

width:50px;

height:50px;

margin:5px;

padding:5px;
color:white;

font-size:2em;

font-weight:bold;

text-align:center;

border: 1px solid black;

background-color:blue;

CSS text-decoration
It is a CSS property that decorates the content of the text. It adds lines under, above, and
through the text. It sets the appearance of decorative lines on text. This CSS property
decorates the text with several kinds of lines. This is shorthand for text-decoration-line,
text-decoration-color, and text-decoration-style.

The syntax of this CSS property is given as follows-

Syntax

1. text-decoration: text-decoration-line text-decoration-color

text-decoration-style|initial|inherit;

text-decoration-line
It sets the kind of text-decoration like overline, underline, or line-through. It can be used
to add a combination of lines to the selected text.

text-decoration-style
This property is used to set the style of the line. Its values are solid, dotted, wavy,
double, and dashed.
text-decoration-color
This property is used to provide color to the decoration. Its value is any color in a valid
format.

#p1 {

text-decoration: underline double cyan;

CSS Lists
There are various CSS properties that can be used to control lists. Lists can be
classified as ordered lists and unordered lists. In ordered lists, marking of the list items
is with alphabet and numbers, whereas in unordered lists, the list items are marked
using bullets.

We can style the lists using CSS. CSS list properties allow us to:

○ Set the distance between the text and the marker in the list.

○ Specify an image for the marker instead of using the number or bullet point.

○ Control the marker appearance and shape.

○ Place the marker outside or inside the box that contains the list items.

○ Set the background colors to list items and lists.

The CSS properties to style the lists are given as follows:

○ list-style-type: This property is responsible for controlling the appearance and

shape of the marker.

○ list-style-image: It sets an image for the marker instead of the number or a bullet
point.
 ○ list-style-position: It specifies the position of the marker.

○ list-style: It is the shorthand property of the above properties.

○ marker-offset: It is used to specify the distance between the text and the marker.
It is unsupported in IE6 or Netscape 7.

○ If we set its value to none, it will remove the markers/bullets.

CSS :nth-child(n) selector

This selector is used for matching the elements based on their position regardless of
the type of its parent. The n can either be a keyword, formula, or a number. It is used to
match the elements based on their position within a group of siblings. It matches each
element, which is the nth-child.

Syntax

Following are the syntax of this selector:

1. :nth-child(n) {
2. //CSS Property
3. }

The "n" in the parentheses is the argument that represents the pattern for matching
elements. It can be a functional notation, even or odd.

Odd values represent the elements whose position is odd in series like 1, 3, 5, etc.
Similarly, the even values represent the elements whose position is even in series like 2,
4, 6, etc.
Functional notation (An+B): Functional notation represents those elements whose
siblings position match the An+B pattern, where A is the integer step size, n is any
positive integer starting from 0, and B is the integer offset.

p:nth-child(even) {

background: yellow;

color: black;

font-size:30px;

p:nth-child(odd) {

background: blue;

color: white;

font-size:20px;

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.

.stick{
 position: sticky;

top:50px;

padding: 10px;

font-size:20px;

font-weight:bold;

background-color: lightblue;

border: 1px solid blue;

CSS 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.

Syntax

1. background-clip: border-box| padding-box| content-box| inherit;

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.

div {

background-color: yellow;

background-clip: border-box;

text-align: center;

border:5px dotted blue; }

 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.

Styling of the checkbox will be clear by using some illustrations. Let's see some of the
illustrations for the same.

Example1

In this example, we are using the '~' which is the sibling combinator. It selects all
elements that are preceded by the previous selector. We have also used the pseud

.container:hover input ~ .mark {

background-color: gray;

o-class :hover to style the checkbox when the user moves the cursor over it.

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.

Syntax

1. letter-spacing: normal | length | initial | inherit;

Possible values

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).

CSS 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.

Let's discuss the horizontal navigational bar and vertical navigational bar in detail.
Horizontal Navigation Bar

The horizontal navigation bar is the horizontal list of links, which is generally on the top
of the page.

Let's see how to create a horizontal navigation bar by using an example.

Example

In this example, we are adding the overflow: hidden property that prevents the li
elements from going outside of the list, display: block property displays the links as the
block elements and makes the entire link area clickable.

We are also adding the float: left property, which uses float for getting the block
elements to slide them next to each other.

If we want the full-width background color then we have to add the background-color
property to <ul> rather than the <a> element.

Fixed Navigation bars

When we scrolls the page, fixed navigation bars stay at the bottom or top of the page. See an example of
the same.

Border dividers

We can add the border between the links in the navigation bar by using the border-right property. The
following example explains it more clearly.

Sticky Navbar

The position: sticky; property 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. Depending upon the
scroll position, a sticky element toggles in between fixed and relative property.
Dropdown Navbar

Following example explain how to create a dropdown menu inside a navigation bar.

Vertical Navigation bar

In this example, we are going to see how to build a vertical navigation bar.

Full-height fixed Vertical Navbar

We can also create the fixed full-height side navigation bar by using the properties
height: 100%; and postion: fixed;

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.

Fade overlay effect

In this overlay effect, when we move the cursor on the image, then the overlay will
appear on the top of the image. Let's see how it works.
Image overlay slide
We can create a sliding overlay effect by four different types that are top, bottom, left,
and right. We are going to discuss it one by one using an example of each.

CSS :root selector

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.

Syntax

:root {

__blue:#1e90ff;

–white:#ffffff;

declaration :h2 { border-bottom: 2px solid var(--blue); }

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.

Before going in deep about specificity, let's discuss some points about it:
 ○ 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 rules are discussed below, along with an example.

The specificity of ID selectors is higher than attribute selectors

CSS text-indent
This CSS property sets the indentation of the first line in a block of text. It specifies the
amount of horizontal space that puts before the lines of text.

It allows the negative values, and if any negative value is defined, then the indentation of
the first line will be towards the left.
Syntax

1. text-indent: length | inherit | initial;

This property has the value length, but here, we will discuss its experimental values.

Values

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.

initial: It sets the property to its default value.

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>).

Example

In this example, we are using the text-indent property with the length values in px, em,
and cm. We are also applying the text-align: justify; property in order to see the better
results.

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.

.jtp {

color: white;

font-size: 50px;

-webkit-text-stroke-width: 2px;

-webkit-text-stroke-color: red;

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.

Syntax

1. zoom: normal | number | percentage | reset ;

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.

We can understand this property by using some illustrations, which are given below.

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.

Syntax
 1. order: integer | initial | inherit;

Values

The order property uses the integer values for defining the order of the items.

integer: It is used to specify the order of the flexible item. Its default value is 0.

initial: It sets the property value to its default value.

inherit: As its name implies, the element uses the computed value of its parent element.

Let's understand the order property using some illustrations.

1. <div class = "container">

2. <div style = "order: 3"> 1 </div>
3. <div style = "order: 0"> 2 </div>
4. <div style = "order: 0"> 3 </div>
5. <div style = "order: 1"> 4 </div>
6. <div style = "order: -1"> 5 </div>
7. <div style = "order: 2"> 6 </div>
8. <div style = "order: 1"> 7 </div>
9. <div style = "order: -2"> 8 </div>
10. </div>

CSS Descendant 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.
Syntax

selector1 selector2 {

/* property declarations */

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.

Syntax

1. calc( Expression );

Values

This CSS function takes a single parameter expression, and the result of this
mathematical expression will be used as a value. It can be any simple expression using
the four arithmetic operators (+, -, *, /). The expression is mandatory to define.

Important points

○ 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.

Example1- simple example

In this example, we are using the calc() function to define the width and height of the
div element. There is the subtraction in the expression of calc() function with same
units.

The result of the expression will be treated as the value of the property, so, the value of
width will be 75% and the value of height will be 275px.

.jtp {

width: calc(150% - 75%);

height: calc(350px - 75px);

background-color: lightblue;

padding-top: 50px;

CSS Clip
This CSS property specifies the visible area of an element. It applies to absolutely
positioned elements (position: absolute;). It is generally used when the image is larger
than its containing element.

It allows us to define a rectangle, which is specified as four coordinates for clipping an

absolutely positioned element.

Syntax

1. clip: auto | shape | initial | inherit;

 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.

Syntax
1. clip-path: <clip-source> | [ <basic-shape> || <geometry-box> || none

The CSS clip-path property has four values:

○ clip-source

○ basic-shape

○ geometry-box

○ none

Let's discuss the above property values.

clip-source: It is a url that reference to an SVG <clippath> element.

basic-shape: It clips the element to a basic shape. It has four basic shapes: circle,
ellipse, polygon and inset.

It is a shape in which the value of <geometry-box> defines position and size. If there is
no geometry-box is defined, then the border-box will be used as a reference box.
geometry-box: The <geometry-box> defines the reference box for the basic shape. If it
is defined with the combination of the <basic-shape>, then it will act as the reference
box for the clipping done by the <basic-shape>.

It can have the below values:

margin-box: It can be used as the reference box. It can be defined as the shape
specified by the outside margin edge and includes the corner radius of the shape.

border-box: It can be used as the reference box. It is a value that is defined by the
outside border edge.

padding-box: It can be used as the reference box.. It specifies the shape which is
enclosed by the outside padding edge.

content-box: It can be used as the reference box.

fill-box: The object bounding box can be used as the reference box.

stroke-box: The stroke bounding box can be used as the reference box.

view-box: It uses the closest SVG viewport as the reference box.

Defining basic shapes with clip-path

As discussed above, there are four basic shapes. Let's discuss them with an example of
each.

polygon

It is one of the shapes of the available basic shapes. It allows us to define any amount
of points. The given points are in the pair of X and Y coordinates of any unit (such as
percent based or pixel-based).
We can understand this basic shape by using the below example. In the following
example, we have defined two polygon shapes: diamond shape polygon and star shape
polygon.

Example: .example {

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

CSS 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.

Syntax

1. background-blend-mode: normal | multiply | screen | color-dodge | difference |

darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion
| hue | color-burn | color;

This property has numerous property values. Let's discuss the above blend modes with
an example of each.

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.
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.

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.

To create the custom radio buttons, we require to write an HTML markup, and to style,
we have to write the CSS.

Styling of the radio button will be clear by using some illustrations. Let's see some of the
illustrations for the same.
Example

In this example, we are using the '~' which is the sibling combinator. It selects all
elements that are preceded by the previous selector. We have also used the
pseudo-class :hover to style the radio button when the user moves the cursor over it.

1. <input type="radio" value="Male" name='gender' id='male' />

CSS Superscript and Subscript

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.

545.2K

52

Java Collection MCQ Set 1

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.

Now, let's see how to achieve the superscript and subscript using the vertical-align
property.

Syntax

1. vertical-align: baseline | super | sub ;

Property values

baseline: It is the default value that aligns the text to the baseline of the parent element.

super: It is the superscript that raises the text.

sub: It is the subscript that lowers the text.

When the values super and sub of this property are applied, then the text becomes
superscript or subscript.

CSS Text Effects

We can apply different effects on the text used within an HTML document. Some
properties can be used for adding the effects on text.

OOPs Concepts in Java

Using CSS, we can style the web documents and affects the text. The properties of the
text effect help us to make the text attractive and clear. There are some text effect
properties in CSS that are listed below:

○ word-break

○ text-overflow

○ word-wrap

○ writing-mode

Let's discuss the above CSS properties along with illustrations.

word-break
It specifies how words should break at the end of the line. It defines the line break rules.
Syntax

1. word-break: normal |keep-all | break-all | inherit ;

The default value of this property is normal. So, this value is automatically used when
we don't specify any value.

Values

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.

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.

Syntax

1. word-wrap: normal| break-word| inherit ;

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).

This property does not work on its own. We have to use white-space: nowrap; and
overflow: hidden; with this property.

Syntax
 1. text-overflow: clip | ellipsis;

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.

OOPs Concepts in Java

Syntax

1. text-align: justify | center | right | left | initial | inherit;

Possible values

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.

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.

OOPs Concepts in Java

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.

1. element {
2. --main-color: brown;
3. }

A variable in CSS is defined by using the two dashes (--) at the beginning, followed by
the name, which is case-sensitive.

In the above syntax, the element indicates the selector that specifies the scope of the
custom property. If we define the custom properties on the :root pseudo-class, then it
will be globally applied to our HTML document. The names of the custom properties are
case-sensitive, i.e., --main-color and --Main-color will be treated as the separate
custom properties.

The var() function

The var() function in CSS is used to insert the custom property value. The name of the
variable can be passed as the argument to the var() function.

Syntax

1. var( --custom-name, value )

The var() function only allows two arguments that are defined as follows:

--custom-name: This parameter accepts the name of the custom property. It must
begin with the two dashes (--). It is the required parameter.

value: It is an optional parameter and accepts the fallback value. It is used as the
substitution when the custom property is invalid.
Fallback values are not used to fix the compatibility of the browser. The fallback value
will not be useful when any browser does not support the custom properties. The
fallback value works as the substitution for the browser that supports the CSS custom
properties for choosing a different value if the variable has an invalid value or if the
variable is not defined.

There are some of the valid and invalid ways to define the fallback value that are given
as follows:

element {

color: var(--main-color, orange); /* orange if --main-color is not defined */

element {

background-color: var(--main-color, var(--main-background, blue)); /* blue if --main-color

and --main-background are not defined */

element {

background-color: var(--main-color, --main-background, gray); /* Invalid*/

}
CSS page-break-before property
As the name implies, this CSS property is used to add the page break before the
element, when printing the document. It inserts a page break before the specified
element during printing the document. We cannot use this CSS property on absolutely
positioned elements or an empty <div> element that does not generate a box.

OOPs Concepts in Java

This CSS property represents whether or not the page break is allowed before the
element's box. Including page-break-before, the CSS properties page-break-after and
page-break-inside help us to define the behavior of the document when printed.

Syntax

1. page-break-before: auto | always | left | right | avoid | initial | inherit;

Possible values

The brief description of the values of this CSS property is tabulated as follows.

Values Description

auto It is the default value that inserts a page break before the element, if

necessary.

always This value always forces a page break before the specified element.
 avoid It is used to avoid a page break before the element whenever possible.

left This value forces either one or two page breaks before the element so that

the next page will be depicted as the left-hand page.

right The right value forces either one or two page breaks before the element so

that the next page will be depicted as the right-hand page.

initial It sets the property to its default value.

inherit If this value is specified, the corresponding element uses the computed

value of its parent element page-break-before property.

Example - Using the auto value

The value auto is the default value that inserts a page break automatically when
required. In this example, we are using the two <div> elements and a button. The button
is responsible to print the page. After clicking on the button, we will see the effect of the
value.

div{ font-size: 20px; page-break-before: auto; }

CSS page-break-inside property

As the name implies, this CSS property is used to specify the page break inside the
element, when printing the document. This CSS property cannot be used on absolutely
positioned elements or an empty <div> element that does not generate a box. It inserts
or avoids the page break inside the specified element during printing the document.

OOPs Concepts in Java

If we want to avoid the page break inside the images, list of items, code snippets, tables,
then we can use the page-break-inside property.

This CSS property represents whether or not the page break is allowed inside the
element's box. Including page-break-inside, the CSS properties page-break-before and
page-break-after help us to define the behavior of the document when printed.

Syntax

1. page-break-inside: auto | avoid | initial | inherit;

Possible values

The brief explanation of the values of this CSS property is tabulated as follows.

Values Description

auto It is the default value that inserts a page break inside the

element, if necessary.

avoid It is used to avoid a page break inside the element whenever

possible.
 initial It sets the property to its default value.

inherit If this value is specified, the corresponding element uses the

computed value of its parent element page-break-inside

property.

Let's understand the above values using an example of each.

Example - Using the auto value

The value auto is the default value that inserts a page break automatically when
required. This value neither prevents nor forces the page break inside the element's box.

In this example, we are using the two <div> elements and a button. The button is
responsible to print the page. After clicking on the button, we will see the effect of the
value.

CSS word-spacing
This CSS property is used to control the space between the words. Using this property,
we can increase or decrease the space between the words.

OOPs Concepts in Java

It modifies the space placed between the words. It is similar to the letter-spacing
property, but instead of specifying the space between the individual characters, this CSS
property defines the space between the words in the piece of text.

A large negative or positive value of word-spacing will make the word unreadable. If we
apply a very large positive value, then it will cause the appearance of words like a series
of unconnected and individual words. A very large negative value will overlap the word
to each other, which makes the word unrecognizable.

Syntax

1. word-spacing: normal | length | initial | inherit;

Property Values

normal: It is the default value that defines the normal space (0.25em) between the
words. It is used to specify the space which is defined by the browser.

length: It specifies an extra space between the words in terms of length (in pt, px, em,
cm, etc.). It allows negative values.

initial: It is used to set the property to its default value.

inherit: It inherits the value from its parent element.

CSS object-fit property

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.

OOPs Concepts in Java

It is generally applied to images or videos. This property specifies how an element

reacts to the width and height of its container.

Syntax

1. object-fit: fill | contain | cover | none | scale-down | initial | inherit;

Values

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.

Now, let's understand the above property values by using an example of each.

CSS object-position property

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.
OOPs Concepts in Java

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.

Syntax

1. object-position: <position> | inherit | initial;

Values

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.

inherit: It inherits the property from its parent element.

Now, lets' see some examples that will illustrate the object-position property.

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.

OOPs Concepts in Java

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.

Syntax

1. columns: auto | column-width column-count| initial | inherit;

Values

The property values are tabulated as follows with their description.

Value Description

auto It is the default value which sets the values of column-count and

column-width to the default browser values.

column-w It is used to set the minimum width for columns. However, the actual

idth width of the column may be narrower or wider based on the available

space.

column-c It specifies the maximum number of columns.

ount
 Initial It is used to set the property to its default value.

Inherit It inherits the property from its parent element.

If any of the value is omitted, then by default, the browser assumes the corresponding
value to auto.

Example

In this example, we are defining two <div> elements, including text. For the first div
element, the minimum width is 100px, and the maximum no. of columns can be four.
Whereas for the second div element, the minimum width is 100px, and the maximum
no. of columns can be six.

CSS pointer-events property

This CSS property specifies whether or not an element shows some action when the
pointer event is triggered upon it. The pointer-events are triggered by touch, stylus,
mouse click, and many more.

OOPs Concepts in Java

The pointer-events property controls how the HTML elements respond to events such
as the CSS active/hover states, mouse/touch events, JavaScript click/tap events, and
also controls whether or not the cursor is visible.

The none value of this property is used for deactivating the click target and allows the
elements to target whatever is underneath that element.

Syntax
 1. pointer-events: none | auto |initial | inherit;

Although this property includes eleven possible values, but the values given in the above
syntax are the valid values for the HTML elements, other values are reserved for use
with SVG.

Property Values

none: This value indicates that an element doesn't react to pointer events. It avoids all
state, click, and the cursor options on the specified HTML element.

auto: It is the default value. It indicates that an element must react to pointer events
such as the click and :hover.

Let's understand these values by using some examples.

Example - Using none value

In this example, we are using the none value which does not target the pointer-events.

CSS hyphens property

This CSS property is used to control the hyphenation of the text in the block-level
elements. It defines how the word is hyphenated if it is too long or when the text wraps
across multiple lines.

OOPs Concepts in Java

This property allows us to split the word into two lines to improve the text layout.

Syntax

1. hyphens: none | manual | auto | initial | inherit;

The values of this CSS property are defined as follows.

Property Values

none: This value does not hyphenate the words. It never hyphenates the words at line
breaks or even if the word is too long.

manual: It is the default value that hyphenates the word only when the characters in the
word suggest hyphenation opportunities. The two Unicode characters are defined
below, which can be used manually to specify the possible line breakpoints in the text.

U+2010 (HYPHEN) - It is the 'hard' hyphen character that specifies the visible line-break
opportunity. The hyphen is rendered, even if the line is not broken at that point.

U+00AD (SHY) - It is an invisible 'soft' hyphen. It is not visibly rendered; instead, it spots
the place where the word should be required to break. In html, for a soft hyphen, we can
use &shy;.

auto: In this value, the algorithm decides where the words are hyphenated.

initial: It sets the property to its default value.

inherit: It inherits the value from its parent element.

Let's understand this CSS property by using an example.

CSS font-variant property
CSS font-variant property specifies how to set a font variant of an element. Its values
may be normal and small-caps. By using the small-caps value, the lowercase letters
converted into uppercase, but in a smaller size compared to the original uppercase
letters. This property specifies that the text should be appeared in the small-caps font
or not.

OOPs Concepts in Java

The output generated by the font-variant property can be affected by the value of the
text-transform property. If the value of font-variant is small-caps and the value of
text-transform is set to lowercase, then the characters will appear in the lowercase. If
the value of font-variant is small-caps and the value of text-transform is set to
uppercase, then the characters will appear in the uppercase.

The small-caps value of this CSS property will not work if the letters in the source code
are written in the uppercase. For example, suppose we have a paragraph in which letters
are written in uppercase, and we are applying the font-variant property with the value
small-caps to the corresponding paragraph, the font will be displayed as the regular
uppercase instead of small-caps.

Syntax

1. font-variant: normal | small-caps | initial | inherit;

Property values

The values of this CSS property are defined as follows:

normal: It is the default value, which specifies the normal font-face.

small-caps: It is used to specify the small-caps font face, in which the lowercase letters
are displayed as uppercase letters but in a smaller size.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, we are applying the font-variant: small-caps; on the paragraph

elements. In the first paragraph, the text is already in uppercase letters, so the
small-capsvalue will not override it. But the text in the second paragraph is affected by
the small-caps value because it is not in uppercase.

CSS left property

This CSS property specifies the left offset for the horizontal positioned elements and
does not affect the non-positioned elements. It is one of the four offset properties that
are right, top, and bottom.

OOPs Concepts in Java

When both left and right properties are defined, the right value has a preference if the
container is right-to-left, and the left value has preference if the container is left-to-right.

The effect of this property depends on how the corresponding element is positioned,
i.e., the value of the position property. The left property does not affect when the
position property is set to the value static.

The effects of this property on positioned elements other than the value static are listed
as follows:
 ○ When the element is absolutely or fixed positioned (i.e., position: absolute; and
position: fixed;), the left property specifies the distance between the element's
left edge and the left edge of its containing block (ancestor to which the element
is relatively positioned).

○ If the element is relatively positioned (i.e., position: relative;), the left property
sets the element's left edge to the left/right from its normal position.

○ If the position is set to sticky, e., position: sticky; then the positioning context is
the viewport. When the element is inside the viewport, the left property behaves
like its position is relative. When the element is outside, the left property behaves
like its position is fixed.

Syntax
1. left: auto | length | percentage | initial | inherit;

Property Values

The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the left edge position.

length: This value defines the position of left property in px, cm, pt, etc. It allows
negative values.

percentage: This value defines the position of left property in percentage (%). It is
calculated to the width of the element's containing block. It also allows negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, there are four absolutely positioned (i.e., position: absolute;) div
elements. We are applying the left property to them. The div elements with left: initial;
and left: auto; will overlap because of having similar dimensions and default values.

In the output, we can see the div element with the yellow border is with the left: auto;
and the div element with the light blue border is with the left: initial;.
 CSS right property
This CSS property specifies the right offset for the horizontal positioned elements and
does not affect the non-positioned elements. It is one of the four offset properties that
are left, top, and bottom.

OOPs Concepts in Java

When both left and right properties are defined, the right value has a preference if the
container is right-to-left, and the left value has preference if the container is left-to-right.

The effect of this property depends on how the corresponding element is positioned,
i.e., the value of the position property. The right property does not affect when the
position property is set to the value static.

The effects of this property on positioned elements other than the value static are listed
as follows:

○ When the element is absolutely or fixed positioned (i.e., position: absolute; and
position: fixed;), the right property specifies the distance between the element's
right edge and the right edge of its containing block (ancestor to which the
element is relatively positioned).

○ If the element is relatively positioned (i.e., position: relative;), the right property
sets the element's right edge to the left/right from its normal position.

○ If the position is set to sticky, e., position: sticky; then, the positioning context is
the viewport. When the element is inside the viewport, the right property behaves
like its position is relative. When the element is outside, then the right property
behaves like its position is fixed.

Syntax
 1. left: auto | length | percentage | initial | inherit;

Property Values

The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the right edge position.

length: This value defines the position of the right property in px, cm, pt, etc. It allows
negative values.

percentage: This value defines the position of the right property in percentage (%). It is
calculated to the width of the element's containing block. It also allows negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, there are four absolutely positioned (i.e., position: absolute;) div
elements. We are applying the right property to them. The div elements with right:
initial; and right: auto; will overlap because of having default values and similar
dimensions.

CSS bottom property

The bottom property in CSS is used to specify the bottom position for the vertical
positioned elements. It does not affect the non-positioned elements. It is one of the four
offset properties that are left, right, and top.

OOPs Concepts in Java

The effect of this property depends on the position of the corresponding element, i.e.,
the value of the position property. The bottom property does not affect when the
position property is set to the value static.

Syntax
1. bottom: auto | length | percentage | initial | inherit;

Property Values

The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the bottom edge
position.

length: This value defines the position of bottom property in px, cm, pt, etc. It allows
negative values.

percentage: This value defines the position of bottom property in percentage (%). It is
calculated to the height of the element's containing block. It also allows negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

The effects of this property on positioned elements other than the value static are listed
as follows:

○ When the element is fixed or absolutely positioned (i.e., position: fixed; and
position: absolute;), the bottom property specifies the distance between the
element's bottom edge and the bottom edge of its containing block (ancestor to
which the element is relatively positioned).
 ○ If the element is relatively positioned (i.e., position: relative;), the bottom property
moves the element's top edge to above/below from its normal position.

○ If the position is set to sticky, i.e., position: sticky; then, the positioning context is
the viewport. When the element is inside the viewport, the bottom property
behaves like its position is relative. When the element is outside, the bottom
property behaves like its position is fixed.

Now, let's understand this property by using some examples.

Example

In this example, there are four absolutely positioned div elements. We are applying the
bottom property to them. The div elements with bottom: initial; and bottom: auto; will
overlap because of having similar dimensions and default values.

Here, the length of the bottom property is defined in px and em.

 CSS top property
This top property in CSS is used to specify the top position for the vertical positioned
elements. It does not affect the non-positioned elements. It is one of the four offset
properties that are left, right, and bottom.

OOPs Concepts in Java

The effect of this property depends on how the corresponding element is positioned i.e.,
the value of the position property. The top property has no effect when the position
property is set to the value static.

The effects of this property on positioned elements other than the value static are listed
as follows:

○ When the element is absolutely or fixed positioned (i.e., position: absolute; and
position: fixed;), the top property specifies the distance between the element's
top edge and the top edge of its containing block (ancestor to which the element
is relatively positioned).

○ If the element is relatively positioned (i.e., position: relative;), the top property
moves the element's top edge to above/below from its normal position.

○ If the position is set to sticky (i.e., position: sticky;) then, the positioning context
is the viewport. When the element is inside the viewport, the top property
behaves like its position is relative. When the element is outside, then the top
property behaves like its position is fixed.

Syntax
1. top: auto | length | percentage | initial | inherit;

Property Values
The values of this property are defined as follows:

auto: This is the default value. It allows the browser to calculate the top edge position.

length: This value defines the position of top property in px, cm, pt, etc. It allows
negative values.

percentage: This value defines the position of top property in percentage (%). It is
calculated with respect to the height of the element's containing block. It also allows
negative values.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's understand this property by using some examples.

Example - Using negative values

In this example, there are four relatively positioned div elements. We are applying the
top property to them with negative values. Here, the negative length values of the top
property are defined in px and em.

CSS word-break property

This CSS property specifies how words should break at the end of the line. It defines the
line break rules. Using this property, the lines that don't fit in the content box will break at
a certain point.

OOPs Concepts in Java

Syntax
1. word-break: normal |keep-all | break-all | inherit ;
The default value of this property is normal. So, it is automatically used when we don't
specify any value.

Values

keep-all: It breaks the word in the default style. It shouldn't be used for
Japanese/Chinese/Korean (CJK) text.

break-all: It inserts the word-break between the characters in order to prevent the word
overflow. When this value is applied, the browser will break the lines at any point. It can
break the word from the middle if it is too long to fit and comes at the end of the line. It
does not apply hyphens.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, there are three containers. We are applying the normal value to the first
container's content, break-all value on the second container's content, and keep-all
value on the third container's content.
CSS max-height property
It sets the maximum height of the element's content box. It means that the height of the
content box can be smaller than the max-height value, but cannot be greater. It sets the
upper bound on the element's height.

OOPs Concepts in Java

When the content is larger than the maximum height, it will overflow. If the content is
smaller than the max-height, this property does not affect. This property ensures that
the value of height property cannot be greater than the value of the max-height
property. It does not allow negative values.

Sometimes it is useful to limit the element's height to a certain range.

Syntax
1. max-height: none | length | initial | inherit;

The values of this CSS property are defined as follows.

none: It is the default value that does not limit the size of the content box.
length: This value defines the max-height in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the
maximum-height of these paragraphs using the length value of the max-height property.
The maximum height of the first paragraph is 60px, the second paragraph is 6em, the
third paragraph is 130pt, and the fourth paragraph is 5cm.

The content of the first paragraph is larger than the value of max-height property, so in
the output, we can see that the content of the first paragraph overflows the content box.
CSS max-width property
Sometimes it is useful to limit the element's width to a certain range. There are two
properties max-width and min-width used to set the maximum and minimum width of
the element.

OOPs Concepts in Java

The max-width property in CSS is used to set the maximum width of the element's
content box. It means that the width of the content box can be smaller than the
max-width value, but cannot be greater. It sets the upper bound on the element's width.

When the content is larger than the maximum width, then it will automatically change
the height of the element. If the content is smaller than the max-width, this property has
no effect. This property ensures that the value of width property cannot be greater than
the value of max-width property. It does not allow negative values.

Syntax
1. max-width: none | length | initial | inherit;

The values of this CSS property are defined as follows.

none: It is the default value that does not limit the width of the content box.

length: This value defines the length of max-width in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of this CSS property.

Example
In this example, there are four paragraph elements with the content. We are defining the
maximum-width of these paragraphs using the length value of max-width property. The
maximum width of the first paragraph is 175px, the second paragraph is 20em, the third
paragraph is 350pt, and the fourth paragraph is 10cm.

The content of the first paragraph is larger than the value of max-width property, so in
the output, we can see that the height of the first paragraph changed automatically.
CSS min-height property
It set the minimum-height of the element's content box. It means that the height of the
content box can be greater than the min-height value, but cannot be shorter. It sets the
lower bound on the element's height.

OOPs Concepts in Java

It will be applied when the content is smaller than the minimum height; otherwise, if the
content is larger, this property has no effect. This property ensures that the value of
height property cannot be less than the value of the min-height property. It does not
allow negative values.

Syntax
1. min-height: none | length | initial | inherit;

The values of this CSS property are defined as follows:

none: It is the default value that does not limit the size of the content box.

length: This value defines the min-height in px, cm, pt, etc. Its default value is 0.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of using this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the
minimum-height of these paragraphs using the length value of min-height property. The
minimum height of the first paragraph is 50px, the second paragraph is 6em, the third
paragraph is 130pt, and the fourth paragraph is 5cm.

CSS min-width property

It is used to set the minimum width of the element's content box. It means that the
width of the content box can be greater than the min-width value, but cannot be shorter.
It sets the lower bound on the element's width.It will be applied when the content is
smaller than the minimum width; otherwise, if the content is larger, this property has no
effect. This property ensures that the value of CSS width property cannot be less than
the value of min-width property. It does not allow negative values.
Syntax

1. min-width: none | length | initial | inherit;

The values of this CSS property are defined as follows:

none: It is the default value that does not limit the width of the content box.

length: This value defines the length of min-width in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of using this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the
minimum-width of these paragraphs using the length value of min-width property. The
minimum width of the first paragraph is 425px, the second paragraph is 22em, the third
paragraph is 220pt, and the minimum width of the fourth paragraph is set to initial.
 CSS border-image property
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.

OOPs Concepts in Java

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. If any of the values are not
specified, then they set to their default values. The default value of this property is:
 1. border-image: none 100% 1 0 stretch

Syntax
1. border-image: source slice width outset repeat | initial | inherit;

The values of this property are tabulated as follows.

Values Description

border-image-source: It specifies the source of the border-image. It

sets the path of the image, or we can say that

it specifies the location of the image to be

used as the border.

border-image-slice: It is used to divide or slice the image, which is

specified by the border-image-source

property. The values of this property specify

how to slice the image for creating the pieces

of the border. This property divides the image

into nine sections that are:

○ Four corners

○ Four sides, and

○ a center region

It can accept four unitless positive values. Its

default value is 100%.

border-image-width: It sets the width of the border-image. It can

accept a unitless positive value, a percentage

value, or the keyword auto. Its default value is

1. We can specify up to four values for

providing the width of individual sides.

border-image-outset: It sets the amount of space by which the

border image is set out from its border box.

border-image-repeat: It controls the repetition of the image to fill the

area of the border. We can specify up to two

values for this property. If we specify one

value, then it is applied on both vertical and

horizontal sides. But if we specify two values,

then the first value is applied on horizontal

sides, and the second value is applied on

vertical sides.

The values of this property are listed below.

○ stretch

○ repeat

○ round

○ space

The default value of this property is stretch.

Initial It sets the property to its default value

(border-image: none 100% 1 0 stretch ).

inherit It inherits the property from its parent element.

Now, let's see some of the examples to understand how to set the border-image using
the border-image property.

Example

In this example, we are replacing the border of the paragraph elements with the image.
In the first paragraph, we are specifying the single value (i.e., round) of the
border-image-repeat property, whereas in the second paragraph, we are specifying two
values (round, stretch) of it, the first value for the horizontal sides and second value for
the vertical sides.

CSS cubic-bezier() function

It is an inbuilt function in CSS that defines a Cubic Bezier curve. The Bezier curve is the
mathematically defined curve used in 2D graphical applications such as (inkspace,
adobe illustrator, etc.). This CSS function is the transition timing function, which is used
for the smooth and custom transitions.
OOPs Concepts in Java

It is defined by the four points (that are P0, P1, P2, and P3). The points P0 and P3 (called
as anchors) are the starting and the ending points, and the points P1 and P2 (called as
handles) are the middle points.

For CSS Bezier curves, the points P0 and P3 are always in the same spot. P0 is at (0,0)
that represents the initial state and initial time, and P3 is at (1,1), which represents the
final state and the final time. This means that the parameters passed to the
cubic-bezier() function can only be between 0 and 1.

Syntax
1. cubic-bezier( x1, y1, x2, y2 )

This CSS function accepts four mandatory numeric values. The value of x1 and x2 must
be lies between 0 and 1, or the value will be invalid. If we pass the parameters that are
not in this interval, the function will set to its default i.e., the linear transition that has the
value cubic-bezier(0, 0, 1, 1).

We can understand this CSS function by using the following illustration.

Example

This function can be used with animation-timing-function and

transition-timing-function property.

Here, we are using the transition-timing-function property.

 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.

OOPs Concepts in Java

Syntax
1. quotes: none | string | initial;

Values

none: It is the default value that specifies that the open-quote and close-quote values
of the content property do not generate any quotation marks.

string: This value specifies the type of quotation mark to be used in sentence. The first
pair represents the outer-level quotation; the second pair indicates the first nested level,
the third pair indicates the third level, and so on.

initial: It sets the property to its default value.

There are some of the quotation mark characters tabulated as follows.

Description Entity number

double quote \0022

single quote \0027

double quote (double \201E

low-9)

double, left angle quote \00AB

double, right angle \00BB

quote

single, left angle quote \2039

single, right angle quote \203A

left quote (single high-6) \2018

 right quote (single \2019

high-9)

left quote (double \201C

high-6)

right quote (double \201D

high-9)

We can understand the quotes property more clearly by using some examples.

Example - Using none value

In this example, we are using the none value of the quotation property and the
open-quote and close-quote values of the content property. The none value prevents
the values of the content property to generate the quotation marks.

CSS transform-origin property

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.

OOPs Concepts in Java

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.

○ If we specify only one value, the value must be a length or percentage, or one of
the keyword values left, center, right, top, and bottom.

○ If we specify two values, the first value must be a length or percentage or the
keyword values left, right, and center. The second value must be a length or
percentage or one of the keyword values center, top, and bottom.

○ When we specify three values, then the first two values are same as the two-value
syntax, but the third value represents the z-offset, so it must be a length.

The default value of the transform-origin property is 50% 50%, which represents the
center of the element.

Syntax
1. transform-origin: x-axis y-axis z-axis | initial | inherit;

The values of this property are tabulated as follows.

Values Description

x-axis It represents the horizontal position. This value

specifies the position of the view at x-axis. Its

possible values are length, percentage, left,

right, and center.

 y-axis It represents the vertical position. This value

specifies the position of the view at y-axis. Its

possible values are length, percentage, top,

bottom, and center.

z-axis This value is used with the 3D transformations.

This value specifies the position of the view at

z-axis. It can be defined using the length

values. It does not allow the percentage

values.

initial It sets the property to its default value.

inherit It inherits the property from its parent element.

Let's understand this property by using some illustrations.

Example

In this example, we are applying the transform-origin property with the length and
percentage values. There is a rotation of 45deg in both of the elements. Here, there is
the 2D transformation of elements.
 CSS Animation
CSS Animation property is used to create animation on the webpage. It can be used as a
replacement of animation created by Flash and JavaScript.

OOPs Concepts in Java

CSS3 @keyframes Rule

The animation is created in the @keyframe rule. It is used to control the intermediate
steps in a CSS animation sequence.

What animation does

An animation makes an element change gradually from one style to another. You can
add as many as properties you want to add. You can also specify the changes in
percentage.0% specify the start of the animation and 100% specify its completion.
 How CSS animation works

When the animation is created in the @keyframe rule, it must be bound with selector;
otherwise the animation will have no effect.

The animation could be bound to the selector by specifying at least these two
properties:

○ The name of the animation

○ The duration of the animation

CSS animation properties

Property Description

@keyframes It is used to specify the animation.

animation This is a shorthand property, used for

setting all the properties, except the

animation-play-state and the

animation-fill- mode property.

animation-delay It specifies when the animation will start.

animation-direction It specifies if or not the animation should

play in reserve on alternate cycle.

animation-duration It specifies the time duration taken by the

animation to complete one cycle.

animation-fill-mode it specifies the static style of the element.

(when the animation is not playing)

animation-iteration-count It specifies the number of times the

animation should be played.

animation-play-state It specifies if the animation is running or

paused.

animation-name It specifies the name of @keyframes

animation.
 animation-timing-function It specifies the speed curve of the

animation.

-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */

animation: myfirst 5s;

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

from {background: red;}

to {background: green;}

/* Standard syntax */

@keyframes myfirst {

from {background: red;}

to {background: green;}

@-webkit-keyframes myfirst {

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:300px; top:0px;}

50% {background:blue; left:200px; top:300px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}
/* Standard syntax */

@keyframes myfirst {

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:300px; top:0px;}

50% {background:blue; left:300px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

CSS @keyframes rule

The CSS @keyframe specifies the animation rule that defines the CSS properties for the
elements at each state with a timeline.

OOPs Concepts in Java

We can create complex animation properties by using the @keyframe. An animation is

created with the changeable CSS styles that can be repeated indefinitely or a finite
number of times. A simple animation can just have two keyframes, while the complex
animation has several keyframes.

Syntax

1. @keyframes animation-name {keyframes-selector {css-styles;}}

To use keyframes, we need to create a @keyframes rule along with the animation-name
property for matching an animation with its keyframe declaration.

It accepts three values. Let's discuss each of them in detail.

Property values

animation-name: It is the required value that defines the name of the animation.

keyframes-selector: It specifies the percentage along with the animation when the
keyframe occurs. Its value lies between 0% to 100%, from (same as 0%), to (same as
100%). Keyframe percentages can be written in any order because they will be handled
in the order they occur.

css-styles: It defines one or more than one CSS style properties.

If the keyframe rule does not define the start and end states of animation, then the
browsers will use the existing styles of the element. The properties get ignored that
cannot be animated in keyframe rules.

Keyframes timing function

For controlling the animation rate, we can use the following values.

linear: It means that the transition rate will be constant from start to end.

ease: It means that the animation starts slowly, and then after a time period, the speed
increases, and before end speed will again slow down.

ease-in: It is similar to ease, but the animation ends quickly.

ease-out: It is also similar to ease, but the animation starts fast.

Let us try to understand CSS @keyframe rule with some illustrations.

 Points to remember

Some of the important points about this rule are given as follows:

○ We can use from keyword instead of using 0%.

○ We can use to keyword instead of using 100%.

○ Even if we are using from and to keywords, any values between them will still be
declared in %.

○ For the valid animation, the starting and ending time must be declared.

CSS 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.

OOPs Concepts in Java

The names of the pseudo-class are not case-sensitive.

Syntax

A pseudo-class starts with a colon (:). Let's see its syntax.

1. selector: pseudo-class {
2. property: value;
3. }
Although there are various CSS pseudo-classes, here we are going to discuss some of
the most commonly used pseudo-classes. The widely used CSS classes are tabulated
as follows:

pseudo-clas Description
s

:active IIt is used to add style to an active element.

:hover IIt adds special effects to an element when the user moves the

mouse pointer over the element.

:link IIt adds style to the unvisited link.

:visited IIt adds style to a visited link.

:lang IIt is used to define a language to use in a specified element.

:focus IIt selects the element which is focused by the user currently.
 :first-child It adds special effects to an element, which is the first child of

another element.

Let's discuss the above pseudo-classes, along with an example.

:hover pseudo-class

This pseudo-class adds a special style to an element when the user moves the cursor
over it. If you want to make it effective, it must be applied after the ":link" and ":visited"
pseudo-classes.

Those declarations get ignored that involve the !important

:active pseudo-class

It applies when the elements are clicked or activated. It selects the activated element.

:visited pseudo-class

It selects the visited links and adds special styles to them. Its possible values can be
any color name in a valid format.

a:visited{

color: red;

CSS 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.

OOPs Concepts in Java

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.

Syntax

Pseudo-element has a simple syntax which is given as follows:

1. selector::pseudo-element {
2. property: value;
3. }

We have used the double colon notation (::pseudo-element) in the syntax. In CSS3, the
double colon replaced the single colon notation for pseudo-elements. It was an attempt
from W3C to differentiate between the pseudo-elements and pseudo-classes. So, it is
recommended to use double colon notation (::pseudo-element) instead of using
single-colon notation (:).

In CSS1 and CSS2, there is the use of a single colon (:) syntax for both pseudo-elements
and pseudo-classes. The single colon syntax is valid for pseudo-elements in CSS1 and
CSS2 for backward compatibility.

Although there are several CSS pseudo-elements, we are discussing some of the most
commonly used. The widely used CSS pseudo-elements are tabulated as follows:
 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 (:before) It is used to add something before the element's

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.

Let's discuss the above pseudo-elements, along with an example.

 The ::first-letter pseudo-element

As its name implies, it affects the first letter of the text. It can be applied only to
block-level elements. Instead of supporting all CSS properties, it supports some of the
CSS properties that are given below.

○ Color properties (such as color)

○ Font properties (such as font-style, font-family, font-size, font-color, and many

more).

○ Margin properties (such as margin-top, margin-right, margin-bottom, and

margin-left).

○ Border properties (like border-top, border-right, border-bottom, border-left,

border-color, border-width, and many more).

○ Padding properties (such as padding-top, padding-right, padding-bottom, and

padding-left).

○ Background properties (such as background-color, background-repeat,

background-image, and background-position).

○ Text related properties (such as text-shadow, text-transform, text-decoration,

etc.).

○ Other properties are vertical-align (only when the float is 'none') word-spacing,
line-height, line-spacing, etc.
CSS radial-gradient() function
The radial-gradient() is an in-built CSS function which generates the smooth transitions
between two or more than two colors. It sets the radial gradient as the background
image. It can be a circular or elliptical shape.

OOPs Concepts in Java

It saves the bandwidth usages as well as helps to reduce the download time. In
radial-gradient, the color emerges from a single point then spread outwards. A
radial-gradient is defined by its center point and ending shape and two or more than two
color stops.

Syntax
 1. background-image: radial-gradient(shape size at position, start-color, ...,
last-color);

Let's discuss its arguments.

position: It defines the gradient position. Its default value is center. It can be specified in
units (such as px, em, etc.) or keywords (like bottom, left, etc.).

shape: It defines the shape of the gradient, which can either be circular or elliptical. If its
value is not specified, then it sets to its default value, i.e., ellipse.

size: It defines the gradient size. Its possible values are:

○ farthest-corner

○ farthest-side

○ closest-corner

○ closest-side

Its default value is farthest-corner.

start-color, …., last-color : It holds the value of color followed by an optional stop
position.

Let's try to understand the radial-gradient() function by using some i

CSS translate() function

The translate() function is an in-built function of CSS to repositions the element either in
the vertical or in the horizontal direction. It moves the element from its current direction
based on the given parameters.

OOPs Concepts in Java

Syntax

1. transform: translate(tx)
2. transform: translate(tx,ty)

The parameter ty is optional. If it is not specified, its value is assumed to be zero. Now,
we are going to discuss each parameter in detail.

Parameters

tx: This parameter defines the translation length along the x-axis. It represents the
abscissa (horizontal, x-coordinate) of the translating vector. If we write translate(4),
then it will be equivalent to translate(4,0).

ty: It defines the translation length corresponding to the y-axis. Its default value is 0,
which is used when the value of this parameter is not defined.

Let's understand this function using some illustrations.

Example1

In this example, we are going to define the value of the parameter tx only.

.trans {

transform: translate(200px); /*It is equal to translate(200px,0)*/

CSS Gradient
CSS gradient is used to display smooth transition within two or more specified colors.

OOPs Concepts in Java

Why CSS Gradient

These are the following reasons to use CSS gradient.

○ You don't have to use images to display transition effects.

○ The download time and bandwidth usage can also be reduced.

○ It provides better look to the element when zoomed, because the gradient is
generated by the browser.

There are two types of gradient in CSS3.

1. Linear gradients

2. Radial gradients

1) CSS Linear Gradient

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3
linear gradient, you must have to define two or more color stops. The color stops are the
colors which are used to create a smooth transition. Starting point and direction can
also be added along with the gradient effect.

1. background: linear-gradient (direction, color-stop1, color-stop2.....);

(i) CSS Linear Gradient: (Top to Bottom)

Top to Bottom Linear Gradient is the default linear gradient. Let's take an example of
linear gradient that starts from top. It starts red and transitions to green.
CSS z-index
The z-index in CSS allows us to define a visual hierarchy on the 3-dimensional plane, i.e.,
the z-axis. It is used to specify the stacking order of the positioned elements (elements
whose position value is either fixed, absolute, relative, or sticky). The stacking order
means that the element's position along the z-axis, which is perpendicular to the screen.

OOPs Concepts in Java

It defines the element's order if they overlap each other.

Syntax

1. z-index: number|auto|inherit|initial;

Possible values

number: It means that the element's stack level is set to the given value. It allows
negative values.

auto: It means that the order of the stack is equivalent to the parent, i.e., default.

Let's understand it by using an illustration.

img{

position:relative;

z-index:22;

}
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.

OOPs Concepts in Java

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.
CSS Loader
A loader is said to be any animation that alerts the visitor about the page is loading, and
you have to wait for a few seconds. It is helpful when a page took some seconds to load
the webpage content. Without using the loader on the webpage, the visitor might think
that the site is unresponsive.

OOPs Concepts in Java

Using the CSS loader makes the visitor distracted or waited for some time until the page
gets fully loaded.

We can understand the concept of CSS loader by using the following illustrations.

div{

display: block;

position: absolute;

width: 10px;

height: 10px;

left: calc(50% - 1em);

border-radius: 1em;

transform-origin: 1em 2em;

animation: rotate;

animation-iteration-count: infinite;

animation-duration: 1.6s;

@keyframes rotate {

0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }

.d1 {

animation-delay: 0.1s;

background-color: blue;

.d2 {

animation-delay: 0.2s;

background-color: red;

.d3 {

animation-delay: 0.3s;

background-color: yellow;

.d4 {

animation-delay: 0.4s;

background-color: green;

.d5 {

animation-delay: 0.5s;

background-color: magenta;

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.

OOPs Concepts in Java

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.

○ Relative length.

Absolute lengths
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.

Absolute units are useful when the responsiveness is not considered in a project. They
are less favorable for the responsive sites because they do not scale when the screen
changes.

Generally, absolute lengths are considered to be the same size always. The absolute
length units are tabulated as follows:

Unit Name Explanation

cm Centimeter It is used to define the measurement in centimeters.

s
 mm Millimeters It is used to define the measurement in millimeters.

in Inches It is used to define the measurement in inches.

1in = 96px = 2.54cm

pt Points It is used to define the measurement in points.

1pt = 1/72 of 1 inch.

pc Picas It is used to define the measurement in picas.

1pc = 12pt so, there 6 picas is equivalent to 1 inch.

px Pixels It is used to define the measurement in pixels.

1px = 1/96th of inch

Example

In this example, we are using the font-size property for the paragraphs for defining the
values using the above absolute length units.
Relative lengths

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.

The relative length units are tabulated as follows:

Unit Name

em It is relative to the font-size of the element.

ex It is relative to the x-height of the font of the element. It is rarely used. The

x-height is determined by the height of the lowercase letter 'x'.

ch It is similar to the unit ex, but instead of using the height of the letter x, it

measures the width of the integer "0" (zero).

rem It is the font-size of the root element

vh It is relative to the height of the viewport.

1vh = 1% or 1/100 of the height of the viewport.

vw It is relative to the width of the viewport.

1vw = 1% or 1/100 of the width of viewport

vmin It is relative to the smaller dimension of the viewport.

1vmin = 1% or 1/100 of the viewport's smaller dimension.

vmax It is relative to the larger dimension of the viewport.

1vmax = 1% or 1/100 of the viewport's larger dimension.

% It is used to define the measurement as a percentage that is relative to another

value.
CSS units: Time
Some animation properties require values to express in time.

Unit Explanation

s It is the duration of time in seconds.

ms It is the duration of time in milliseconds.

1ms = 1/100 of a second

CSS Combinators
CSS Combinators clarifies the relationship between two selectors, whereas the
selectors in CSS are used to select the content for styling.

OOPs Concepts in Java

There can be more than one simple selector in a CSS selector, and between these
selectors, we can include a combinator. Combinators combine the selectors to provide
them a useful relationship and the position of content in the document.

There are four types of combinators in CSS that are listed as follows:

○ General sibling selector (~)

○ Adjacent sibling selector (+)

○ Child selector (>)

○ Descendant selector (space)

General Sibling Selector (~)
It uses the tlide (~) 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.

Syntax

1. element ~ element {
2. /*style properties*/
3. }

Suppose we have to select all <p> elements that are the siblings of <div> element, then
we can write it as:

1. div ~ p {
2. /*style properties*/
3. }

The figure given below helps us to understand the General sibling selector (~).
In this figure, the blocks with the green color are the selected blocks affected after using
the general sibling selector.

Example

In this example we are selecting the <p> elements that come after the <h1>. There is a
<div> element which will not get selected and the paragraph element inside the div will
also not get selected. But those <p> elements that come after the <div> will be affected.

This example will illustrate the use of a General sibling selector (~).
CSS masking
The mask property in CSS is used to hide an element using the clipping or masking the
image at specific points. Masking defines how to use an image or the graphical element
as a luminance or alpha mask. It is a graphical operation that can fully or partially hide
the portions of an element or object.

OOPs Concepts in Java

Using masking, it is possible to show or hide the parts of an image with different opacity
levels. In CSS, the masking is achieved by using the mask-image property, and we have
to provide an image as the mask.

Let's understand it using some illustrations.

Example

In this example, we are placing a mask on the image element. Here, there are two
specific images, and we are applying masking on them, the final image built by putting
the entire mask images together, stretching them, etc.

CSS Transition
The CSS transitions are effects that are added to change the element gradually from one style to another,
without using flash or JavaScript.

OOPs Concepts in Java

You should specify two things to create CSS transition.

○ The CSS property on which you want to add an effect.

○ The time duration of the effect.

Let's take an example which defines transition effect on width property and duration of 3 seconds.
CSS 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:

OOPs Concepts in Java

○ Top arrow

○ Bottom arrow

○ Left arrow

○ Right arrow

CSS Top Arrow

The top arrow is used to add an arrow like structure on the top of the tooltip when you
move your mouse cursor over the element. It will display the tooltip on the bottom of the
element.

CSS Flexbox
CSS3 Flexible boxes also known as CSS Flexbox, is a new layout mode in CSS3.

OOPs Concepts in Java

The CSS3 flexbox is used to make the elements behave predictably when they are used
with different screen sizes and different display devices. It provides a more efficient way
to layout, align and distribute space among items in the container.

It is mainly used to make CSS3 capable to change its item?s width and height to best fit
for all available spaces. It is preferred over block model.

The CSS3 flexbox contains flex containers and flex items.

Flex container:The flex container specifies the properties of the parent. It is declared by
setting the display property of an element to either flex or inline-flex.

Flex items:The flex items specify properties of the children. There may be one or more
flex items inside a flex container.

Note:Flexbox specifies how flex items are set inside a flex container. It sets the flex
items inside a flex container along a flex line. By default, there is only one flex line per
flex container. Everything outside a flex container and inside a flex item is considered as
usual.

Let's take an example to show three flex items within a flex container. By default, they
are set along the horizontal flex line, from left to right:

CSS3 Flexbox Properties

Following is a list of CSS3 Flexbox properties:

property description

display it is used to specify the type of box used for an html

element.
flex-direction it is used to specify the direction of the flexible items inside

a flex container.

justify-content it is used to align the flex items horizontally when the items

do not use all available space on the main-axis.

align-items it is used to align the flex items vertically when the items do

not use all available space on the cross-axis.

flex-wrap it specifies whether the flex items should wrap or not, if

there is not enough room for them on one flex line.

align-content it is used to modify the behavior of the flex-wrap property. it

is similar to align-items, but instead of aligning flex items, it

aligns flex lines.

flex-flow it specifies a shorthand property for flex-direction and

flex-wrap.

order it specifies the order of a flexible item relative to the rest of

the flex items inside the same container.

align-self it is used on flex items. it overrides the container's

align-items property.

flex it specifies the length of a flex item, relative to the rest of

the flex items inside the same container.

Supporting Browsers

Propert Safari
y Chrome IE Firefox Opera

basic 29.0 11. 22.0 12.1 6.1 -webkit-

support 0 -webkit-
21.0 18.0

(single-lin -webkit- -moz-

e flexbox)

multi-line 29.021.0 11. 28.0 17.0 6.1 -webkit-

flexbox -webkit 0
15.0

-webkit-

12.1
Flex Direction Property
The flex-direction property is used to set the direction of the flexible items inside the flex
container. its default value is row (left-to-right, top-to-bottom).

OOPs Concepts in Java

The other possible values are:

○ row-reverse

○ column

○ column-reverse

Using row-reserve value

Let's take an example to demonstrate the usage of row-reverse value.

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row-reverse;

flex-direction: row-reverse;

width: 400px;

height: 200px;

background-color: lightpink;

.flex-item {

background-color: brown;

width: 100px;
 height: 100px;

margin: 10px;

Flexbox Justify-Content
The CSS3 justify-content property is used to define the alignment along the main axis. It
is a sub-property of CSS3 Flexbox layout module.

OOPs Concepts in Java

It sets the Flexbox container's item horizontally when the items don?t use all the
available space on the main axis.

Its possible values are:

○ flex-start:It is the default value. It sets the items at the beginning of the container

○ flex-end:It sets the items at the end of the container.

○ Center:It sets the items at the center of the container.

○ space-between:It sets the items with space between the lines.

○ space-around:It sets the items with space before, between, and after the lines.

Let's take some example.

Flexbox align-items
The CSS3 flexbox align-items property is used to set the flexible container's items
vertically align when the items do not use all available space on the cross-axis.

OOPs Concepts in Java

Its possible values are:

stretch:It is the default value. It specifies that Items are stretched to fit the container.

flex-start:It sets the items at the top of the container.

flex-end:It sets the items at the bottom of the container.

center:It sets the items at the center of the container (vertically).

baseline:It sets the items at the baseline of the container.

Let's take some example to demonstrate the usage of above values.

Flexbox flex-wrap
The CSS3 Flexbox flex-wrap property specifies if the flex-items should wrap or not, in the
case of not enough space for them on one flex line.

OOPs Concepts in Java

Its possible values are:

○ nowrap: It is the default value. The flexible items will not wrap.

○ wrap: It specifies that the flexible items will wrap if necessary.

○ wrap-reverse: It specifies that the flexible items will wrap, if necessary, in reverse
order.

Let's take some example to demonstrate the usage of the above vales.

Flexbox align-content property

The CSS3 Flexbox align-content property is used to modify the behavior of the flex-wrap
property. It is just like align-items, but it aligns flex lines instead of flex items.

OOPs Concepts in Java

Its possible values are:

○ stretch:It is the default value. It specifies lines stretch to take up the remaining
space.

○ flex-start:It specifies that lines are packed toward the start of the flex container.
 ○ flex-end:It specifies that lines are packed toward the end of the flex container.

○ center:It specifies that lines are packed toward the center of the flex container.

○ space-between:It specifies that lines are evenly distributed in the flex container.

○ space-around:It specifies that lines are evenly distributed in the flex container,
with half-size spaces on either end.

What is Media Query?

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).

OOPs Concepts in Java

○ 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.

Recommended Media features for Media queries

Following is a list of media features recommended for media queries by W3C.

Feature Value Min/Ma Description

x
color integer yes It specifies the number of bits per color

component.

color-index integer yes It specifies the number of entries in the

color lookup table.

device-aspec integer/integer yes It specifies the aspect ratio of the

t-ratio device.

device-height length yes It specifies the height of the output

device.

device-width length yes It specifies the width of the output

device.

grid integer no It is true for a grid-based device.

height length yes It specifies the height of the rendering

surface.

monochrome integer yes It specifies the number of bits per pixel

in a monochrome frame buffer.

resolution resolution yes It specifies the resolution of the display

("dpi" or screen.

"dpcm")

scan "progressive" no It specifies scanning process of "tv"

or "interlaced" media types.

width length yes It specifies the width of the rendering

surface.
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

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.

@media only screen and (min-width: 600px) {

/* For tablets: */

.col-m-1 {width: 8.33%;}

.col-m-2 {width: 16.66%;}

.col-m-3 {width: 25%;}

.col-m-4 {width: 33.33%;}

.col-m-5 {width: 41.66%;}

.col-m-6 {width: 50%;}

.col-m-7 {width: 58.33%;}

.col-m-8 {width: 66.66%;}

 .col-m-9 {width: 75%;}

.col-m-10 {width: 83.33%;}

.col-m-11 {width: 91.66%;}

.col-m-12 {width: 100%;}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

CSS Transforms
CSS3 supports transform property. This transform property facilitates you to translate,
rotate, scale, and skews elements.

OOPs Concepts in Java

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.

CSS 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.

Supporting browsers

Property IE Safari
Chrome Firefox Opera
 transform 36.04.0 10.09. 16.03.5 23.0 9.03.2 -webkit-

-webkit- 0 -ms- -moz-

15.0

-webkit-

12.1

10.5 -o-

transform- 36.0 10.0 16.03.5 9.03.2 23.0

origin -moz- -webkit-

4.0 9.0 15.0 -webkit-

(two-value -webkit- -ms-

12.110.5 -o-
syntax)

The translate() method

The CSS translate() method is used to move an element from its current position
according to the given parameters i.e. X-axis and Y-axis.

Let's take an example to translate a

element 50 pixels right, and 100 pixels down from its current position.

The rotate() method

The CSS rotate() method is used to rotate an element clockwise or anti-clockwise
according to the given degree.

Let's take an example to rotate a element by 300.

The scale() method
The CSS scale() method is used to increase or decrease the size of an element
according to the given width and height.

Let's take an example to increase the size of an

element by increasing its width and height two times.

strong>See this example:

The skewX() method

The CSS skewX() method is used to skew an element along the X axis according to the
given angle. Let?s take an example to skew an

element 30 degrees along the X-axis.

The skewY() method

The CSS skewY() method is used to skew an element along the Y axis according to the
given angle. Let's take an example to skew an

element 30 degrees along the Y-axis.

The skew() method

The CSS skew() method is used to skew an element along with X-axis and Y-axis
according to the given angle.

Let's take a <div> element and skew it 30 degree along the X-axis and 20 degree along
the Y-axis.

The matrix() method

The CSS matrix() method combines all the six 2D transform methods altogether. It
allows you to rotate, scale, translate, and skew elements.
Syntax:

The parameters of matrix method:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS 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:

OOPs Concepts in Java

Function Description

matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) It specifies a

3D

transformation

, using a 4x4

matrix of 16

values.

translate3D(x,y,z) It specifies a

3D translation.

translateX(x) It specifies 3D

translation,

using only the

 value for the

X-axis.

translateY(y) It specifies 3D

translation,

using only the

value for the

Y-axis.

translateZ(z) It specifies 3D

translation,

using only the

value for the

Z-axis.

scale3D(x,y,z) It specifies 3D

scale

transformation

scaleX(x) It specifies 3D

scale

transformation

by giving a
 value for the

X-axis.

scaley(y) It specifies 3D

scale

transformation

by giving a

value for the

Y-axis.

scaleZ(z) It specifies 3D

scale

transformation

by giving a

value for the

Z-axis.

rotate3D(X,Y,Z,angle) It specifies 3D

rotation along

with X-axis,

Y-axis and

Z-axis.
rotateX(angle) It specifies 3D

rotation along

with X-axis.

rotateY(angle) It specifies 3D

rotation along

with Y-axis.

rotateZ(angle) It specifies 3D

rotation along

with Z-axis.

perspective(n) It specifies a

perspective

view for a 3D

transformed

element.
Supporting Browsers

Property Firefox Safari

Chrome IE Opera

transform 36.012.0 10. 16.0 23.015. 9.04.0 -webkit-

-webkit- 0 0
10.0 -moz-
-webkit-

transform-o 36.012.0 10. 16.010.0 23.015. 9.04.0 -webkit-

rigin -webkit- 0 -moz- 0

-webkit-
(three-value

syntax)

transform-s 36.012.0 11. 16.010.0 23.015. 9.04.0 -webkit-

tyle -webkit- 0 -moz- 0

-webkit-

perspective 36.012.0 10. 16.010.0 23.015. 9.04.0 -webkit-

-webkit- 0 -moz- 0

-webkit-
 perspective- 36.012.0 10. 16.010.0 23.015. 9.04.0 -webkit-

origin -webkit- 0 -moz- 0

-webkit-

backface-vi 36.0 10. 16.010.0 23.015. 9.04.0 -webkit-

sibility 0 -moz- 0
12.0
-webkit-
-webkit-

The 3D rotateX() method (X-axis rotation)

The CSS 3D rotateX() method is used to rotate an element around its X-axis according
to the given degree.

CSS Grid
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.

00:02/05:45

10 Sec

1.1M

130
OOPs Concepts in Java

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.

The CSS grid property is supported in browsers such as Google Chrome, Internet
Explorer, Firefox, Safari, and Opera.

Grid Container
We can define the grid container by setting the display property to grid or inline-grid on
an element.

Grid container contains grid items that are placed inside rows and columns.

Let's see a simple example of a grid in CSS.

○ grid-template-columns: It is used to specify the size of the columns.

○ grid-template-rows: It is used to specify the row size.

○ grid-template-areas: It is used to specify the grid layout by using the named

items.

○ grid-auto-rows: It is used to specify the automatic size of the rows.

○ grid-auto-columns: It is used to specify the automatic size of the columns.

○ grid-auto-flow: It is used to specify how to place auto-placed items and the

automatic row size.

In the following example, we are including some of the above shorthand properties.
Now, let's see the example of using some properties:
The justify-content property
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.

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.

Exception Handling in Java - Javatpoint

There are 3 ways to design layout of a web page:

1. HTML Div with CSS: fast and widely used now.

2. HTML Table: slow and less preferred.

 3. HTML Frameset: deprecated now.

A CSS layout can have header, footer, left pane, right pane and body part. Let's see a
simple example of CSS layout.

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:

Exception Handling in Java - Javatpoint

○ border

○ border-collapse

○ padding

○ width

○ height

○ text-align

○ color

○ background-color

CSS Table Border

We can set border for the table, th and td tags using the CSS border property.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

Test it Now
Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

CSS Table Border Collapse

By the help of border-collapse property, we can collapse all borders in one border only.

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;

</style>
CSS Box Model
The components that can be depicted on the web page consist of one or more than one
rectangular box.

Exception Handling in Java - Javatpoint

A CSS box model is a compartment that includes numerous assets, such as edge,
border, padding and material. It is used to develop the design and structure of a web
page. It can be used as a set of tools to personalize the layout of different components.
According to the CSS box model, the web browser supplies each element as a square
prism.

The following diagram illustrates how the CSS properties of width, height, padding,
border and margin dictate that how much space an attribute will occupy on a web page.

The CSS box model contains the different properties in CSS. These are listed below.

○ Border
 ○ Margin

○ Padding

○ Content

Now, we are going to determine the properties one by one in detail.

Border Field

It is a region between the padding-box and the margin. Its proportions are determined
by the width and height of the boundary.

Margin Field

This segment consists of the area between the boundary and the edge of the border.

The proportion of the margin region is equal to the margin-box width and height. It is
better to separate the product from its neighbor nodes.

Padding Field

This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.

Content Field

Material such as text, photographs, or other digital media is included in this area.

It is constrained by the information edge, and its proportions are dictated by the width
and height of the content enclosure.

Elements of the width and height

Typically, when you assign the width and height of an attribute using the CSS width and
height assets, it means you just positioned the height and width of the subject areas of
that component. The additional height and width of the unit box is based on a range of
influences.

The specific area that an element box may occupy on a web page is measured as
follows-
 Size of Properties of CSS
the box

Height height + padding-top + padding-bottom + border-top + border-bottom +

margin-top + margin-bottom

Width width + padding-left + padding-right + border-left + border-right +

margin-left + margin-right

Example 1

Here, to explain the CSS box model, we have an instance.