MMC205 - Web Application Development Pa g e |1

Department of MCA

Module – 2: CSS3 and Responsive Web Design

Chapter – 1: CSS3 Basics
The syllabus topics are
2.1.1 Introduction to CSS3
2.1.2 Selectors
2.1.3 Properties and values
2.1.4 Box model Layout and Positioning
2.1.5 Flexbox and Grid layouts.

2.1.1 Introduction to CSS3

CSS3 (Cascading Style Sheets level 3) is the latest standard for CSS, a
language used to style and format web pages. It's an evolution of earlier CSS
versions, introducing new features and modules to enhance web design
capabilities. CSS3 is designed to be backwards-compatible with older CSS
versions.

Here's a more detailed look:

• Purpose:

CSS3 allows web developers to control the presentation of web pages,

including colors, fonts, spacing, and layout. It separates content (HTML) from
presentation (CSS), making it easier to maintain and update websites.

• Key Features:

CSS3 introduces many new features, including:

• Modules: CSS3 is divided into modules, allowing for incremental

evelopment and adoption of new features.

Dept. of MCA
MMC205 - Web Application Development Pa g e |2

• Backgrounds and Borders: More control over background

images, gradients, and borders.

• Text Effects: Advanced text effects like shadows, underlines, and

transformations.

• Animations and Transitions: Ability to animate elements with

transitions and keyframes.

• Selectors: New and more powerful selectors to target specific

elements in the HTML.

• Font Faces: Embedded fonts for greater control over

typography.

• Responsiveness: Support for responsive web design, allowing

websites to adapt to different screen sizes.

• Flexbox and Grid Layout: Modern layout systems for creating

flexible and responsive layouts.

• Advantages:

• Improved Presentation: CSS3 allows for more visually

appealing and dynamic web pages.

• Flexibility: New features provide greater control over page layout

and design.

• Efficiency: CSS3 can be used to style multiple web pages

simultaneously, saving time and effort.

• Responsiveness

Difference between CSS and CSS3

CSS (Cascading Style Sheets) is a stylesheet language used to style web

pages, while CSS3 is its advanced version with new features and modules.
CSS3 introduces enhanced styling capabilities like animations, transitions,

Dept. of MCA
MMC205 - Web Application Development Pa g e |3

media queries, and rounded corners, providing more flexibility and

functionality for web design.

Understanding CSS and CSS3

1. CSS:

CSS stands for Cascading Style Sheets. It is primarily used to provide styling
to web pages, including color, layout, background, font, and border properties.
The main objective of CSS is to improve content accessibility, provide
enhanced flexibility and control, and specify presentation characteristics.

2. CSS3:

CSS3 stands for Cascading Style Sheets Level 3. It is an advanced version of

CSS, used for structuring, styling, and formatting web pages. CSS3 introduces
several new features and is supported by all modern web browsers. One of
the most significant advancements in CSS3 is the splitting of CSS standards
into separate modules, making it simpler to learn and use.

Difference Between CSS and CSS3

CSS CSS3

Capable of making web pages more

Capable of positioning texts and attractive and takes less time to
objects. create. It is backward compatible with
CSS.

Does not support responsive

Supports responsive design.
design.

Cannot be split into modules. Can be broken down into modules.

Cannot build 3D animation and Supports animation and 3D

transformation. transformations.

Slower compared to CSS3. Faster than CSS.

Dept. of MCA
MMC205 - Web Application Development Pa g e |4

CSS CSS3

Uses a set of standard colors and Has a good collection of HSL, RGBA,
basic color schemes. HSLA, and gradient colors.

Supports only single text blocks. Supports multi-column text blocks.

Does not support media queries. Supports media queries.

Not supported by all types of

Supported by all modern browsers.
modern browsers.

Requires manual development of Provides advanced codes for setting

rounded gradients and corners. rounded gradients and corners.

No special effects like shadowing

Supports text shadows, visual effects,
text or text animation; requires
and a wide range of font styles and
jQuery and JavaScript for
colors.
animations.

Can add background colors to list Lists have a special display property
items and lists, and set images for and list items have counter reset
list items. properties.

Developed in 1996. Released in 2005.

Consumes less memory compared to

Memory intensive.
CSS.

New Features of CSS3

1. Combinator: CSS3 introduces a new general sibling combinator, which

matches sibling elements using the tilde (~) combinator.

2. CSS Selectors: CSS3 selectors are more advanced than the simple
selectors offered by CSS, providing a sequence of easy-to-use and
simple selectors.

Dept. of MCA
MMC205 - Web Application Development Pa g e |5

3. Pseudo-elements: CSS3 adds many new pseudo-elements for easier

and more detailed styling. The new convention of double colons (::) is
also introduced.

4. Border Style: CSS3 includes new border styling features like border-
radius, border-image-slice, border-image-source, and values for "width
stretch".

5. Background Style Properties: CSS3 introduces new background style

properties such as background-clip, background-size, background-
style, and background-origin.

2.1.2 Selectors

CSS selectors are used to target HTML elements on your pages, allowing you
to apply styles based on their ID, class, type attributes, and more. There are
mainly 5 types of selectors.
• Basic CSS Selectors: These are used to target elements by tag, .class,
or #id for fundamental styling needs.
• Combinators: Ideal for styling elements based on their DOM
relationships (e.g., parent-child or sibling relationships).
• Group Selectors: Use to apply the same styles to multiple, unrelated
elements simultaneously.
• Attribute Selectors: Perfect for styling elements based on specific
attributes or values, such as form inputs or links with certain prefixes or
states.
• Pseudo-Classes: Best for styling elements dynamically or interactively,
like :hover for user interaction or :nth-child() for structural styling.

Dept. of MCA
MMC205 - Web Application Development Pa g e |6

Types of CSS Selectors

Basic Selectors
Basic selectors in CSS are simple tools used to target specific HTML elements
for styling. These include selecting by element name (e.g., h1), class (.class
Name), ID (#idName), or universally (* for all elements).
1. Universal Selector (*): Selects all elements on the page and applies the
same style universally. For example, setting the font color for every element.
*{
color: red;
}
2. Element Selector: Targets all elements of a specific type, such as
paragraphs or headers. For example, setting a common font size for all
paragraphs
<style>
p{
font-size: 16px;
}
</style>
3. Class Selector (.): Applies styles to elements with a specific class
attribute. For instance, making all buttons have a blue background.
<style>
.button {
background-color: blue;
color: white;
}
</style>
4. ID Selector (#): Styles a single element identified by its unique id. For
example, changing the background color of a header
<style>
#header {
background-color: gray;
}
</style>

Dept. of MCA
MMC205 - Web Application Development Pa g e |7

Combinator Selectors
Combinators in CSS are used to define relationships between selectors,
allowing you to style elements based on their hierarchy or positioning in the
document. Common combinators include descendant ( ), child (>), adjacent
sibling (+), and general sibling (~).
1. Descendant Selectors: Targets an element inside another, such as
paragraphs inside div .For example, styling paragraphs inside a div.
<style>
div p {
color: red;
}
</style>
2. Child Selector (>): They only affects the direct child elements of a parent.
For example, styling direct children paragraphs of a div.
<style>
div>p {
margin-left: 20px;
}
</style>
3. Adjacent Sibling Selector (+): Styles an element immediately following
another .For example, making the first paragraph bold after an h1.
<style>
h1+p {
font-weight: bold;
}
</style>
4. General Sibling Selector (~): Styles all siblings that follow a specific
element. For example, italicizing all paragraphs following an h1.
<style>
h1~p {
font-style: italic;
}
</style>

Dept. of MCA
MMC205 - Web Application Development Pa g e |8

Attribute Selectors
Attribute selectors in CSS target elements based on the presence or value of
their attributes. Examples include [attr] (selects elements with the attribute),
[attr="value"] (matches specific values), and [attr^="val"] (matches values
starting with "val").
1. Presence Selector: It selects elements that contain a specific attribute.
For example, styling all inputs with a type attribute.
<style>
input[type] {
border: 2px solid black;
}
</style>
2. Attribute Value Selector: It targets elements with a particular attribute
value. For example, styling text inputs.
<style>
input[type="text"] {
background-color: yellow;
}
</style>
3. Substring Matching(^=): It matches elements where the attribute
contains a substring. For example, styling links with https in their href.
<style>
a[href^="https"] {
color: green;
}
</style>
4. Wildcard Selector (*=): Matches elements where the attribute value
contains a specific string. For example, underlining links with example in the
URL.
<style>
a[href*="example"] {
text-decoration: underline;
}
</style>

Dept. of MCA
MMC205 - Web Application Development Pa g e |9

Pseudo-Classes
Pseudo-classes in CSS define the special states of elements for styling.
Examples include :hover (applies when an element is hovered), :first-child
(targets the first child of a parent), and :nth-child(2) (targets the second child).
1. :hover: Styles elements when the user hovers over them. For example,
changing the color of a link when hovered.
<style>
a:hover {
color: red;
}
</style>
2. :focus: Styles the elements when the user focus on any particular element.
<style>
input:focus {
outline: 3px solid red;
}
</style>
3. :first-child: Styles the element which is the first child of it's parent.
<style>
p:first-child {
color: brown;
}
</style>
4. :last-child: Style's the element which is the last child of it's parent.
<style>
p:last-child {
color:green;
}
</style>
5. :not: Helps to remove a particular element from the styling index or styling
context.
<style>

Dept. of MCA
MMC205 - Web Application Development P a g e | 10

p:not(.one) {
color: blue;
}
</style>
6. Pseudo-Element's
The Pseudo Element help's to access and control a specific part of an element
for inserting content before an element or inserting content after an element.
Targeting any specific part of a word or a sentence. It is usually used to beautify
the internal content of an element.
1. ::before : It helps to insert some content before an element.
<style>
h1::before {
content: "★ "
}
</style>
2. ::after: It help's to insert some content after an element.
<style>
h1:active::before {
content: " ";
color: orangered;
}
</style>
3. ::first-line: Styles the first line of text within a block element. Line breaks
mark the beginning of a new line.
<style>
p::first-line {
color: red;
}
</style>
4. ::first-letter: It Styles the first-letter of a word or a sentence.
<style>
p::first-letter {

Dept. of MCA
MMC205 - Web Application Development P a g e | 11

color: red;
font-size: 23px;
}
</style>
5. ::placeholder: Styles the placeholder of a specific input field.
<style>
input::placeholder {
font-size: 20x;
font-family: sans-serif;
font-weight: 900;
}
</style>

2.1.3 Properties and Values

1) CSS Properties Complete Reference

CSS properties are the foundation of web design, used to style and control the
behaviour of HTML elements. They define how elements look and interact on a
webpage.
• Used to control layout, colors, fonts, spacing, and animations on web
pages.
• It is essential for making web pages responsive and accessible across
devices.
• Help maintain consistency and efficiency in web design and
development.
Example: In this example, we will see the use of many properties usage, all
the keywords mentioned inside of { and } braces are properties.
<style>
#myDIV {
width: 400px;
height: 299px;

Dept. of MCA
MMC205 - Web Application Development P a g e | 12

background-color: green;
background-repeat: no-repeat;
background-image:
url("[Link]
content/uploads/[Link]");
background-blend-mode: normal;
background-size: contain;
}
</style>

CSS Properties
The list of complete CSS properties is given below.

Properties Descriptions

@charset Rule Specifies the character encoding used in the style sheet.

@keyframes Rule CSS @keyframes specify the animation rule.

Set of styles for different media/devices using the Media

@media Rule
Queries.

It is used to change the behavior of the flex-wrap

align-content
property.

Set the alignment of items inside the flexible container

align-items
or in the given window.

align-self Align the selected items in the flexible container.

Set all the elements' values to their initial or inherited

all
values.

animation-delay Specifies the delay for the start of an animation.

animation-
It defines the direction of the animation.
direction

Dept. of MCA
MMC205 - Web Application Development P a g e | 13

Properties Descriptions

animation- It defines how long an animation should take to

duration complete one cycle.

animation-fill- It defines how styles are applied before and after

mode animation.

animation- This specifies the number of times the animation will be

iteration-count repeated.

This specifies the name of the @keyframes describing

animation-name
the animation.

animation-play-
It specifies whether the animation is running or paused.
state

animation-timing- It specifies how animation makes transitions through

function keyframes.

Decides whether the back face of an element might be

backface-visibility
visible or not to the user.

background- Sets whether a background image scrolls with the rest

attachment of the page or it will be fixed.

background- Defines the blending mode of each background layer of

blend-mode the webpage.

This property defines how far the background color or

background-clip
image should extend.

background-color Set the background color of an element.

background- Set background images for an element, You can set one
image or more images as well.

background-origin Adjusting the background image of the webpage.

Dept. of MCA
MMC205 - Web Application Development P a g e | 14

Properties Descriptions

background-
Sets the initial position for the background image.
position

background- It is used to repeat the background image horizontally

repeat and vertically.

background-size It set the size of the background image.

border This is used to style the border of an element.

border-bottom Set all bottom border properties in one line.

border-bottom-
Set the color of the bottom border of an element.
color

border-bottom-
Define the radius of the bottom left corner of the border.
left-radius

border-bottom- Define the radius of the right bottom corner of the

right-radius border of a given element.

border-bottom-
Set the style of the bottom border of an element.
style

border-bottom-
Set a specific width to the bottom border of an element.
width

Set the borders of the cell present inside the table and
border-collapse
tells..

border-color Set a color to the border of an element.

It creates a border using an image instead of a normal

border-image
border.

border-image-
It is a shorthand property used to specify the distance.
outset

Dept. of MCA
MMC205 - Web Application Development P a g e | 15

Properties Descriptions

border-image-
It is used to scaling and tiling the border images.
repeat

border-image- It divides or slices an image specified by the border-

slice image-source property.

border-image- It specifies the image source which is to be set as the

source border of an element.

border-image- Set the width of the border image. It can be set by

width providing multiple values.

border-left Set the width, style, and color of the left border.

border-left-color Set the color of the left-border in an Element.

border-left-style Set the style of the left border of an element.

border-left-width Sets the width of the left-border of an Element.

It is used to round the corners of the outer border edges

border-radius
of an element.

border-right-color Set the color of the right border in an Element.

border-right Set the width, style, and color of the right border.

border-right-style Set the style of the right border of an element..

border-right-
Set the width of right-border of an element.
width

border-top-color Set the color of the top border in an Element.

border-top Set the width, style, and color of the top border.

Dept. of MCA
MMC205 - Web Application Development P a g e | 16

Properties Descriptions

border-top-left- It specifies the radius of the top left border corner of an

radius element.

border-top-right- It specifies the radius of the top right border corner of

radius an element.

border-top-style It specifies the style of the top border.

border-top-width Set a specific width to the top border of an element.

Sets the border line style for all four sides of an

border-style
element’s border.

Set the distance between the borders of neighboring

border-spacing
cells in the table.

border-width Set the border line width of all four sides of an element.

It allows the vertical position of an element to be

bottom
altered.

box-shadow Set a shadow-like effect to the frames of an element.

box-decoration- Control the box decoration after the fragmentation of

break the paragraph.

Defines how the user should calculate the total width

box-sizing
and height of an element.

It specifies the position where the table caption is

caption-side
placed. It is used in HTML Tables.

Set the color of the cursor in inputs, text area, or other

caret-color
editable areas.

Specify which side of floating elements are not allowed

clear
to float.

Dept. of MCA
MMC205 - Web Application Development P a g e | 17

Properties Descriptions

Specify a rectangle to clip an absolutely positioned

clip
element.

Divide a portion of content inside any HTML element into

column-count
a given number of columns.

Specify whether the columns will be filled in a balanced

column-fill
manner or not.

column-gap Specify the amount of gap between the columns.

Set the number of columns and the width of the

columns
columns.

column-rule-color Set the color of the rule between the column.

Define the width, style, and color of the rules between

column-rule
the columns.

Set the style of the column rule between the columns

column-rule-style
on a multi-column layout.

column-rule-width Set the width of the column rule.

Sets the number of columns an element can span

column-span
across.

column-width It is used to define the width of the columns.

content Generate the content dynamically (during run time).

Specify the mouse cursor to be displayed while pointing

cursor
to an element.

counter- It is used to increment/decrement the value of a

increment counter.

Dept. of MCA
MMC205 - Web Application Development P a g e | 18

Properties Descriptions

counter-reset Create or reset the CSS counter for elements.

Define the direction of text/writing within any block

direction
element

Define the components(div, hyperlink, heading, etc) are

display
going to be placed on the web page

It specifies whether to display the borders or not in the

empty-cells
empty cells in a table.

filter Set the visual effect of an element.

It is the combination of flex-grow, flex-shrink, and flex-

flex
basis properties.

flex-basis Set the initial size of the flexible item.

flex-direction Set the direction of the flexible items of a div.

It is used to make the flexible item reversible and

flex-flow
wrapped if required.

Specifies how much the item will grow compared to

flex-grow
other items inside that container.

Specifies how much the item will shrink compared to

flex-shrink
other items inside that container.

It specifies whether flex items are forced into a single

flex-wrap
line or wrapped onto multiple lines.

font-family Set the font of an element.

Control the usage of the Kerning Information that has

font-kerning
been stored in the Font

Dept. of MCA
MMC205 - Web Application Development P a g e | 19

Properties Descriptions

Adjusts the font size based on the height of the

font-size-adjust
lowercase.

font-size Set the font size of the text in an HTML document.

font-stretch Set the text wider or narrower.

Style the given particular text in a normal, italic, or

font-style
oblique face from its font family.

font-variant Convert all lowercase letters into uppercase letters.

Set the weight or thickness of the font being used with

font-weight
the HTML Text.

Offers a grid-based layout system, with rows and

grid
columns

grid-area Set a grid item size and location in a grid layout.

grid-auto- Specify the size for the columns of implicitly generated

columns grid containers.

It specifies exactly how auto-placed items get flowed

grid-auto-flow
into the grid.

Specify the size for the rows of implicitly generated grid

grid-auto-rows
containers.

Specify a grid item's size and location within a grid

grid-column
column.

Explains the number of columns an item will span, or on

grid-column-end
which column line the item will end.

grid-column-gap Set the gap size between the columns in a grid layout.

Dept. of MCA
MMC205 - Web Application Development P a g e | 20

Properties Descriptions

grid-column-start Set on which column the line item will start.

Sets the gap size between the rows and columns in a

grid-gap
grid layout.

grid-row Specify the size and location in a grid layout.

grid-row-end it defines the grid items' end position.

grid-row-gap Set the gap size between the grid elements.

grid-row-start Defines the grid items' start position.

grid-template It defines grid columns, rows, and areas.

grid-template-
It specifies the area within the grid layout.
areas

grid-template- Set the number of columns and size of the columns of

columns the grid.

grid-template-
Set the number of rows and height of the rows in a grid.
rows

hanging- Pprovides web designers some upper hand over

punctuation typography on the webpage.

height Set the height of an element.

It defines how the words should be hyphenated to

hyphens
create soft wrap opportunities within words.

Define whether an element must create new stacking

isolation
content.

Alignes the flexible containers item when there is

justify-content
available space.

Dept. of MCA
MMC205 - Web Application Development P a g e | 21

Properties Descriptions

It specifies the horizontal position of a positioned

left
element

letter-spacing Set the spacing behavior between text characters .

Set the amount of space used for lines, such as in the

line-height
text.

list-style It is used to set the list style.

list-style-image Set images that will be used as the list item marker.

Specifies the position of the marker box with respect to

list-style-position
the principal block box.

It specifies the appearance(such as a disc, character, or

list-style-type
custom counter style) of the list item marker.

Specify the margin to be used on the bottom of an

margin-bottom
element.

Set the width of the margin on the left of the desired

margin-left
element.

margin-right Set the right margin of an element.

margin-top Set the top margin of an element.

max-height Set the maximum height of an element.

max-width Define the maximum width of an element.

min-height Set the minimum height of an element.

min-width Define the minimum width of an element.

mix-blend-mode Define the minimum width of an element.

Dept. of MCA
MMC205 - Web Application Development P a g e | 22

Properties Descriptions

mask-image To set the mask of an image for a particular element.

Specify the blending of an element’s background with

object-fit
the element’s parent.

Specifies how an image or video element is positioned

object-position
with x/y coordinates inside its content box.

Set the order of each flexible item in relation to other

order
items inside the flexible container.

outline-color Sets the outline color of an element

Sets the amount of space between an outline and the

outline-offset
edge or border of an element.

outline-style Set the appearance of the outline of an element.

It specifies the width of this outline for a specific

outline-width
element.

overflow-x It specifies whether to add a scroll bar horizontally.

overflow-y. It specifies whether to add a scroll bar vertically.

padding-bottom Set the padding on the bottom of an element.

padding-left Set the padding on the left side of an element.

padding-right Set the padding on the right-side of an element.

padding-top Set the padding on the top of an element.

page-break-after Add a page-break after the stated element.

page-break-
Add a page-break-before the specified element.
before

Dept. of MCA
MMC205 - Web Application Development P a g e | 23

Properties Descriptions

Add page breaks inside the element to which it is applied

page-break-inside
while printing.

perspective Give perspective to 3D objects.

Define the position at which the user is looking 3D

perspective-origin
object i.e. the vanishing point of the 3D object.

Specify whether an element show pointer events and

pointer-events
whether or not show on the pointer.

Set the quotation mark for quotations used in the

quotes
sentence.

resize Resize the element according to user requirements.

Affects the horizontal position of the element as but has

right
no effect on non-positioned elements.

Set smooth animation of scroll position instead of a

scroll-behavior
scroll jump

Set or return the value of an inline style declaration of

cssText
an element.

Find the number of style declarations used for the

length
particular element.

Return the CSS Rule Object that represents a CSS rule-

parentRule
set that contains a selector and declaration block.

table-layout It is used to display the layout of the table.

tab-size It specifies the width of a tab character.

text-align Set the horizontal alignment of text in an [Link].

Dept. of MCA
MMC205 - Web Application Development P a g e | 24

Properties Descriptions

Set the last line of the paragraph just before the line
text-align-last
break.

text-decoration It is used to "decorate” the content of the text.

text-decoration- Set the color of decorations(overlines, underlines, and

color line-throughs) over the text.

text-decoration-
Sets various kinds of text-decoration.
line

text-decoration-
Set the text decoration of an element.
style

text-indent Set the indentation of the first line in each block of text.

Set the text-align to justify, which spreads the words

text-justify
into a complete and fixed-width line.

Specify that some text has overflown and is hidden from

text-overflow
view.

text-transform Control the capitalization of the text.

text-shadow Add shadows to the text.

Set the top position of an element. The top property

top
varies with the position of the element.

Change the coordinate space of the visual formatting

transform
model.

CSS transition
It is used to make some transition effects.
Property

transition-delay Define the time to start the transition.

Dept. of MCA
MMC205 - Web Application Development P a g e | 25

Properties Descriptions

transition- Set the time duration (in seconds or milliseconds) to

duration complete the transition effect.

transition- Display the change in the property of an element over a

property specified duration.

Determine how the bidirectional text is handled in a

unicode-bidi
document.

It specifies whether the text can be selected by the user

user-select
or not.

Set the vertical alignment of the table box or inline

vertical-align
element.

visibility Specify whether an element is visible or not.

white-space Control the text wrapping and white-spacing./td>

Specify how to break the word when the word reached

word-break
at end of the line.

word-spacing Increase or decreases the white space between words.

word-wrap It breaks long words and wraps them into the next line.

Specify the browser how an element is expected to

will-change
change.

Specify whether the lines of text are laid out horizontally

writing-mode
or vertically.

Define the order of elements if they overlap with each

z-index
other.

Best Practices for CSS Properties

Dept. of MCA
MMC205 - Web Application Development P a g e | 26

• Always use descriptive names for classes and IDs to maintain

readability.
• Group similar properties together to enhance code organization.
• Use shorthand properties where possible to reduce redundancy.

2) Property Value Forms

Property Value Forms CSS includes 60 different properties in seven categories:

fonts, lists, alignment of text, margins, colors, backgrounds, and borders. As
you probably would guess, not all of these properties are discussed here. The
complete details of all properties and property values can be found at the W3C
Web site.

Property values can appear in a variety of forms. Keyword property values are
used when there are only a few possible values and they are predefined—for
example, large, medium, and small. Keyword values are not case sensitive, so
Small, SmAlL, and SMALL are all the same as small.

Number values are used when no meaningful units can be attached to a

numeric property value. A number value can be either an integer or a sequence
of digits with a decimal point and can be preceded by a sign (+ or -).

Length values are specified as number values that are followed immediately by
a two-character abbreviation of a unit name. There can be no space between
the number and the unit name. The possible unit names are px, for pixels; in,
for inches; cm, for centimeters; mm, for millimeters; pt, for points (a point is
1/72 inch); and pc, for picas, which are 12 points. Note that on a display, in,
cm, mm, pt, and pc are approximate measures. Their actual values depend on
the screen resolution. There are also two relative length values: em, which is
the value of the current font size in pixels, and ex, which is the height of the
letter x.

Percentage values are used to provide a measure that is relative to the

previously used measure for a property value. Percentage values are numbers

Dept. of MCA
MMC205 - Web Application Development P a g e | 27

that are followed immediately by a percent sign (%). For example, if the font
size were set to 75%, it would make the new current size for the font 75
percent of its previous value. Font size would stay at the new value until
changed again. Percentage values can be signed. If preceded by a plus sign,
the percentage is added to the previous value; if negative, the percentage is
subtracted.

URL property values use a form that is slightly different from references to
URLs in links. The actual URL, which can be either absolute or relative, is placed
in parentheses and preceded by url, as in the following property:
url([Link])
There can be no space between url and the left parenthesis.

Color property values can be specified as color names, as six-digit hexadecimal

numbers, or in RGB form. RGB form is just the word rgb followed by a
parenthesized list of three numbers that specify the levels of red, green, and
blue, respectively. The RGB values can be given either as decimal numbers
between 0 and 255 or as percentages. Hexadecimal numbers must be preceded
with pound signs (#), as in #43AF00. For example, powder blue could be
specified with

fuchsia

or

rgb(255, 0, 255)

or

#FF00FF

CSS also includes properties for counters and strings, but they are not covered
here. Some property values are inherited by elements nested in the element
for which the values are specified. For example, the property background-color
is not inherited, but font-size is. Using a style sheet to set a value for an
inheritable property for the tag effectively sets it as a default property value
for the whole document, as in

Dept. of MCA
MMC205 - Web Application Development P a g e | 28

body {font-size: 16pt}

Unless overridden by a style sheet that applies to paragraph elements, every

paragraph element in the body of this document would inherit the font size of
16 points.

2.1.4 Box model Layout and Positioning

CSS Box Model

The CSS Box Model defines how elements are sized, positioned, and rendered
on a webpage. When a browser loads an HTML document, it creates a DOM
tree and assigns a box to each element. This box calculates the element's
dimensions and position relative to its parent or the root <html> element,
ensuring accurate layout and spacing.
Box Model Component Layout
• Content: The area where text or other content is displayed.
• Padding: Space between the content and the element's border.
• Border: A frame that wraps around the padding and content.
• Margin: Space between the element's border and neighbouring
elements.

Key components of the box model

1. Content Area

Dept. of MCA
MMC205 - Web Application Development P a g e | 29

• The content area is the central part of the CSS box model, containing
the main content (e.g., text, images, videos, or elements like <p> or
<span>).
• It can be styled with CSS properties like height and width.
The content edge refers to the four edges of the content area
• Left content edge
• Right content edge
• Top content edge
• Bottom content edge
2. Padding Area
• The padding area is the space between the content and the border of an
element.
• It includes the areas highlighted in light green and skin color in the
example.
• The distance between the content edge and the border is the padding.
• The border marks the end of the padding area.
• The padding area contributes to the element's total dimensions.
• Padding can be adjusted using CSS properties.
• It works similarly with box-sizing: content-box and box-sizing: border-
box, but with slight calculation differences.

3. Border Area
• The area that marks the end of an element is called as the border it is
the outer fencing for the element.
• The default border properties are provided in CSS to control the
thickness of this outer fencing.
• The border area also add 's up to the complete height and width of the
element.
• The more the border width the more will be the height or width of the
element.

Dept. of MCA
MMC205 - Web Application Development P a g e | 30

• In the above image the area marked with skin color is called the border
area.
4. Margin Area
• The area outside the border of an element is called the margin area.
• Basically this area depends on the parent of the element.
• The distance between the border of the parent element and the border
of the child element is called as the margin.
• CSS has provides certain margin properties to get control over this
scenario.

Box Sizing Property in CSS

There are two type's of box-sizing properties in CSS
1. Content-Box(default property)
When the user set's the value of the box-sizing property for an element
as content-box or even if user do not set's it ,it remains by default as content-
box and in the actual height and width of the element the dimensions of the
content area as well as the padding area is added to constitute the final
dimensions of the element.
<style>
div {
height: 200px;
width: 200px;
box-sizing: content-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
This code will create a box model with a border line width of 0.4px always and
border-area of 1.6px and padding area as 20px width on both sides of the
content area.

Dept. of MCA
MMC205 - Web Application Development P a g e | 31

Content Area (Width) :The width of the content area is fixed at 200px.
Padding
• Padding adds extra space inside the element, around the content.
• Padding Left: 20px
• Padding Right: 20px
• Total padding width: 20px + 20px = 40px
Border
• The border, being solid, has a width, but it is calculated differently from
the padding.
• Line Width of Border: 0.4px (the width of the line itself)
• Area of Border: 1.6px (the actual space the border occupies visually)
• Border width for both sides: 1.6px (left) + 1.6px (right) = 3.2px

Total Width
• Total width of the element can be calculated by adding the padding and
border areas to the content area width.
• Formula for Total Width = (Padding-Left + Padding-Right + Border-Area-
Left + Border-Area-Right) + Content Area Width
• Total Width = (20px + 20px + 1.6px + 1.6px) + 200px = 243.2px
• The total width of the element becomes 243.2px.
The reason the total width is increased unexpectedly is because box-sizing:
content-box applies the width to the content area only .The padding and border

Dept. of MCA
MMC205 - Web Application Development P a g e | 32

are added outside the content area, leading to an increase in the overall width
and height of the element.
2. Border-Box
When the box-sizing property is set as border-box the actual dimensions of the
element's remains same as that of the actual dimensions set by the user. The
difference it makes is just that the size of the content area get's altered in a
manner so that it could accommodate the padding area and the border area so
the resultant could be equal to the actual dimensions entered by the user.
<style>
div {
height: 200px;
width: 200px;
box-sizing:border-box;
padding-left: 20px;
padding-right: 20px;
border-left: 2px solid red;
border-right: 2px solid red;
}
</style>
This code will create a box model by altering the dimensions specifically the
width of the content area to accomodate the padding and the border area with
the border line-width.

Dept. of MCA
MMC205 - Web Application Development P a g e | 33

• Width of Border and Padding Border width : 0.4px (line width) and
1.6px + 1.6px = 3.2px (total border area).
• Padding width : 20px + 20px = 40px.
• User-Entered Width : The width entered by the user is 200px, which
applies to the content area only when box-sizing: content-box is used.
• Box-Sizing Behavior :The box-sizing: content-box property adds the
padding and border outside the content area, causing the total width to
increase.
• Adjusting Content Area Width : To ensure the total width remains
200px, the extra width from padding and borders (40px + 3.2px =
43.2px) is subtracted from the total width.
• New content area width : 200px - 43.2px = 156.8px.
• Final Width Calculation : The final total width is: 156.8px (content
area) + 40px (padding) + 3.2px (border) = 200px, ensuring the user’s
entered width remains unchanged.

Use Case's of CSS Box Model

1. Default box-sizing: content-box
Default behavior where padding and borders are added outside the content
area, leading to an increased overall width/height.
<style>
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
background-color: lightgreen;
}
</style>
The total width of the element will be 200px + 20px (left) + 20px (right) +
5px (left border) + 5px (right border) = 250px.
2. Using box-sizing: border-box for Consistent Sizing

Dept. of MCA
MMC205 - Web Application Development P a g e | 34

Ensure the padding and border are included within the specified width/height
to maintain a fixed size for layout consistency.
<style>
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightcoral;
}
</style>
The total width remains 200px, with padding and border included in the 200px
size.
3. Setting box-sizing for All Elements
Apply box-sizing: border-box to all elements globally to simplify layout
calculations and prevent unexpected element size changes.
<style>
*{
box-sizing: border-box;
}
div {
width: 100%;
padding: 20px;
border: 2px solid blue;
background-color: lightyellow;
}
</style>
All elements are sized consistently, with padding and borders included inside
the width/height.
4. Fixed Layout with box-sizing: border-box
Creating a fixed-size element with padding and border without altering the
layout dimensions.

Dept. of MCA
MMC205 - Web Application Development P a g e | 35

<style>
div {
width: 300px;
height: 150px;
padding: 10px;
border: 10px solid green;
box-sizing: border-box;
background-color: lightblue;
}
</style>
5. Creating a Responsive Box with box-sizing
Ensuring that padding and borders do not cause layout issues in a responsive
design.
<style>
*{
box-sizing: border-box;
}
.container {
max-width: 100%;
padding: 20px;
border: 5px solid purple;
background-color: lightgreen;
}
</style>
The element resizes according to the screen width, with padding and borders
included in the total size, avoiding overflow.

CSS Margins

CSS margins are used to create space around an element, separating it from
neighboring elements and the edges of the webpage. They control the layout

Dept. of MCA
MMC205 - Web Application Development P a g e | 36

by adjusting the distance between elements, providing better organization and

readability.
Syntax:
body {
margin: value;
}

<style>
.box {
margin: 20px;
}
</style>
• margin: 20px; applies a 20px margin to all four sides of the element.

CSS Margin

Types of Margin Values

• Pixels (px): The most common unit, specifies a fixed number of pixels.
• Percentage (%): The margin is calculated as a percentage of the
containing element's width (for horizontal margins) or height (for
vertical margins).
• Other units: Less common units like em, rem, vh, and vw can also be
used for relative sizing.

Dept. of MCA
MMC205 - Web Application Development P a g e | 37

• Auto: The browser calculates a suitable margin size, often used for
centering elements.
Note: We can also use negative values for margins.
Margin Properties Values

Margin
Property Description Example

margin-top Sets the top margin of an element. margin-top: 20px;

margin-right Sets the right margin of an element. margin-right: 15px;

margin- Specifies the margin at the bottom of margin-bottom:

bottom an element. 30px;

Determines the width of the margin on

margin-left: margin-left: 10px;
the left side.

Shorthand to set margins on all four

margin margin: 10px 20px;
sides.

Here are the examples of the margin property with different values:
Example of margin property with 4 values
margin: 40px 100px 120px 80px;
• top margin = 40px
• right margin = 100px
• bottom margin = 120px
• left margin = 80px
<style>
p{
margin: 40px 100px 120px 80px;
}
</style>
Example of margin property with 3 values
margin: 40px 100px 120px;

Dept. of MCA
MMC205 - Web Application Development P a g e | 38

• top = 40px
• right and left = 100px
• bottom = 120px

<style>
p{
margin: 40px 100px 120px;
}
</style>
Example of margin property with 2 values
margin: 40px 100px;
• top and bottom = 40px;
• left and right = 100px;

<style>
p{
margin: 40px 100px;
}
</style>
Example of margin property with 1 value
margin: 40px;
• top, right, bottom and left = 40px
<style>
p{
margin: 40px;
}
</style>

Example of margin: auto property

margin: auto;
<style>
div {

Dept. of MCA
MMC205 - Web Application Development P a g e | 39

margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
}
</style>
• margin: auto;: Automatically adjusts the left and right margins to
center the element horizontally.
• The element must have a defined width for margin: auto; to work
effectively.
Example of margin: inherit; Property
<style>
.parent {
margin: 20px;
}
.child {
margin: inherit;
border: 1px solid black;
}
</style>
• margin: inherit;: The child element inherits the margin value of its
parent.
• In this example, the child element's margin is set to 20px, matching the
parent's margin.

CSS Borders

Borders in CSS are used to create a visible outline around an element. They
can be customized in terms of
• Width: The thickness of the border.
• Style: The appearance of the border (solid, dashed, dotted, etc.).
• Color: The color of the border.

Dept. of MCA
MMC205 - Web Application Development P a g e | 40

You can try different types of borders here-

Syntax:
element {
border: 1px solid black;
}
Here, the border is defined as 1 pixel wide, solid in style, and black in color.
<style>
.simple-border {
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
This code creates a div element with a simple black border around it, 2px wide.
The content inside the div will have 20px of padding, which provides space
between the border and the text. The text is centered using text-align: center.
CSS Border Properties
CSS provides several properties to control and customize borders:

Property Description

border-style Determines the type of border (e.g., solid, dashed, dotted).

border-width Sets the width of the border (in pixels, points, or other units).

border-color Specifies the border color.

border-
Creates rounded corners for elements.
radius

Ways to Style Border in CSS

The CSS border property enables the styling of an element's border by setting
its width, style, and color, allowing for customizable visual boundaries in web
design.
1. Border Style
• CSS border-top style Property
• border-right-style Property

Dept. of MCA
MMC205 - Web Application Development P a g e | 41

• border-bottom-style Property
• border-left-style Property
2. Border Width
• border-top-width Property
• border-right-width Property
• border-bottom-width Property
• border-left-width Property
3. Border Color
• border-top-color Property
• border-right-color Property
• border-bottom-color Property
• border-left-color Property

4. Border individual sides

CSS allows you to style each side of a border individually, giving flexibility in
design.
5. Border Radius Property
The border-radius property allows you to round the corners of an element,
creating smoother edges.

Common Border Styles

The border-style property specifies the type of border. None of the other border
properties will work without setting the border style.

Border Style Description

Dotted Creates a series of dots.

Dashed Forms a dashed line.

Solid Produces a continuous line.

Double Renders two parallel lines.

Dept. of MCA
MMC205 - Web Application Development P a g e | 42

Border Style Description

Groove Creates 3D grooved effect.

Ridge Creates 3D ridged effect.

Inset Adds 3D inset border.

Outset Adds 3D outset border.

None Removes the border.

Hidden Hides the border.

<style>
[Link] {
border-style: dotted;
}
[Link] {
border-style: dashed;
}
[Link] {
border-style: solid;
}
[Link] {
border-style: double;
}
</style>
In this example:
• border-style is used to set the type of border around an element.
• dotted: Creates a border with dots.
• dashed: Creates a border with dashed lines.
• solid: Creates a solid, continuous border.
• double: Creates a border with two solid lines.

Dept. of MCA
MMC205 - Web Application Development P a g e | 43

CSS Border Width

CSS border-width is used to define the thickness of the border around an
element. It can be specified in various units like px, pt, cm, or by using
predefined values like thin, medium, and thick.
<style>
p{
border-style: solid;
border-width: 8px;
}
</style>

In this example:
• border-width property is used to set the thickness of the border.
• You can use numeric values (e.g., 1px, 5pt, 2cm) or keywords (thin,
medium, thick) to set the border width.
• The border-style and border-color properties must be used in
conjunction with border-width to see the effect.

CSS Border Color

CSS border-color is used to define the color of the border. You can set the
color using color names, hexadecimal values, or RGB values. If no color is
specified, the border will inherit the color of the element itself.
<style>
p{
border-style: solid;
border-color: red
}
</style>
In this example:
• border-color property is used to set the color of the element's border.

Dept. of MCA
MMC205 - Web Application Development P a g e | 44

• the border color is set to red using the color name red. You can also use
hex codes like #ff0000 or RGB values like rgb(255, 0, 0).
• The border-style property must be defined (e.g., solid, dashed, etc.) for
the border color to be visible.

Border radius property

The CSS border-radius property in CSS is used to round the corners of an
element's border, giving it a more visually pleasing and smoother appearance.
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
In this example:
• border-radius is used to apply rounded corners to the element. In this
case, a value of 20px is applied to create a soft, rounded edge.
• The element has a solid border, a green background, and centered text,
with the rounded corners enhancing its visual appeal.
• You can adjust the border-radius value to control the curvature of the
corners, making them more or less rounded.

Practical Use Cases of CSS Borders

CSS borders are commonly used in the following scenarios:
• Styling Buttons : Borders enhance button designs, making them more
visually appealing and clickable.
• Creating Dividers : Borders can act as separators between content
sections, providing clear visual breaks.
• Customizing Images : Apply borders around images to frame them,
making thumbnails stand out.
• Designing Navigation Menus : Borders can define the boundaries of
navigation links or items

Dept. of MCA
MMC205 - Web Application Development P a g e | 45

2.1.5 Flexbox and Grid Layouts

1) CSS Flexbox and Its Properties
CSS Flexbox, or Flexible Box Layout, is the layout model designed to create
flexible and responsive layout structures without using float or positioning. By
applying display: flex to a parent container, it becomes a flex container, and its
children become flex items. This allows control over the items' growth,
shrinkage, and space distribution.
Note: Not all browsers support the flexbox properties, so make sure that the
browser you are using supports this property.
Basics of Flexbox
Apply a display type of flexbox to the parent container, this would make all the
child elements in it to adjust into the flex type and these would be called the
" flex items ". This means they have become more flexible i.e. we can control
how much they can shrink and how much they can grow and also the spacing
between these elements.
• Display: flex: Applies flexbox to the parent container, making child
elements flex items.
• Flex Items: Flexible elements that can grow, shrink, and adjust
spacing.

• The flex container can change the width, height and order of the child
elements.

Dept. of MCA
MMC205 - Web Application Development P a g e | 46

• Items can grow or shrink to fill the available space or to prevent

overflow.
• Available space is distributed among other items.

Axes of Flexbox:
1. Main Axis: Direction of flex items (left-to-right, right-to-left, top-to-
bottom, bottom-to-top).
A) left to right
flex-direction: row
B) right to left
flex-direction: row-reverse
C) top to bottom
flex-direction: column
D) bottom to top
flex-direction: column-reverse
2. Cross Axis: Perpendicular to the main axis.
Flexbox Properties:
1. Parent Properties:
• display: Defines a flex container.
• flex-direction: Defines the main axis direction.
• flex-wrap: Allows items to wrap onto multiple lines.
• flex-flow: Shorthand for flex-direction and flex-wrap .

Dept. of MCA
MMC205 - Web Application Development P a g e | 47

• justify-content: Aligns items along the main axis.

• align-content: Aligns items along the cross axis.
• align-items: Aligns multiple lines of items on the cross axis.
2. Children/Flex-items Properties:
• order: Changes the order of items without altering the source order.
• flex-grow: Allows an item to grow to fill available space.
• flex-shrink: Allows an item to shrink if there's insufficient space.
• flex-basis: Defines the initial size of an item.
• flex: Shorthand for flex-grow , flex-shrink , and flex-basis .
• align-self: Aligns a single item within the flex container.
Example:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">

<style>
body {
display:flex;
align-items: center;
justify-content: center;
color: green;
font-size: 50;
}
h2 {
margin: 10px;
}
</style>
</head>

Dept. of MCA
MMC205 - Web Application Development P a g e | 48

<body>
<h2>CSS Flexbox</h2>
<h2>and Its Properties</h2>
</body>
</html>

Conclusion
CSS Flexbox provides a systematic way to design flexible and responsive layout
structures, enhancing web design by allowing easy arrangement, alignment,
and distribution of space among items in a container. Understanding and using
Flexbox properties can significantly improve the efficiency and flexibility of your
web designs.

2) CSS Grid Layout Module

CSS Grid Layout is used to design responsive web layouts with rows and
columns. It allows you to place items exactly where you want, making it
easier to create flexible and modern web pages.

Unlike older methods like floats, CSS Grid gives more control over alignment
and adapts well to different screen sizes.

Currently Active Property

grid-template-columns: auto;

Syntax

.class {
display:grid;
}

Note: You can also use display: inline-grid; to make an element an inline
grid.

Dept. of MCA
MMC205 - Web Application Development P a g e | 49

<html>

<head>

<style>

.grid-container {

display: grid;

grid-template-columns: auto auto;

gap: 10px;

</style>

</head>

<body>

<div class="grid-container">

<div class="grid-item">Item 1</div>

<div class="grid-item">Item 2</div>

<div class="grid-item">Item 3</div>

<div class="grid-item">Item 4</div>

</div>

</body>

</html>

• The .grid-container uses display: grid; to define a grid layout with

two columns (grid-template-columns: auto auto;) and a 10px gap
between items.

CSS Grid Layout Properties

Below is a list of key CSS Grid properties with descriptions:

Property Description

Defines the amount of space between columns in a multi-

column-gap column layout, often used with column-count in CSS Grid.

Dept. of MCA
MMC205 - Web Application Development P a g e | 50

Property Description

Specifies the spacing (also called gutter) between rows and

gap columns in CSS Grid and Flexbox layouts.

A grid-based layout system in CSS that provides rows and

columns, simplifying the design without using floats or
grid positioning.

IDefines the size and location of a grid item within a CSS

grid-area grid layout by specifying the start and end lines.

grid-auto- Sets the size of columns that are automatically generated

columns in a CSS Grid layout when more content is added.

It specifies exactly how auto-placed items get flow into the

grid-auto-flow grid.

grid-auto- It is used to specify the size for the rows of implicitly

rows generated grid containers.

It describes the number of properties that allow to design

of grid structures and control the placement of grid items
grid-column using CSS.

grid-column- It explains the number of columns an item will span, or on

end which column-line the item will end.

grid-column- It is used to set the size of the gap between the columns in
gap a grid layout.

grid-column-
It defines for which column line item will start.
start

It is used to sets the size of the gap between the rows and
grid-gap columns in a grid layout.

grid-row It is used to specify the size and location in a grid layout.

Dept. of MCA
MMC205 - Web Application Development P a g e | 51

Property Description

It is used to define the grid item's end position within a grid

grid-row-end row by specifying the inline edge of its grid area.

It is used to define the size of the gap between the grid

grid-row-gap elements.

It is used to define the grid items' start position within the

grid-row-start grid row by specifying the inline start edge of its grid area.

It is a shorthand property for defining grid columns, rows,

grid-template and areas.

grid-template-
It is used to specify the area within the grid layout.
areas

grid-template- It is used to set the number of columns and size of the

columns columns of the grid.

grid-template- It is used to set the number of rows and height of the rows
rows in a grid.

More Examples of CSS Grid Layout Module

Three-Column Layout
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;

Dept. of MCA
MMC205 - Web Application Development P a g e | 52

text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
<div class="grid-item">Column 3</div>
</div>
</body>
</html>

In this example:
• The .grid-container is set to display as a grid with three equal-width
columns (1fr each) and a 10px gap between them.
• Each .grid-item represents a column with basic styling for clarity.
Responsive Two-Row Layout
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: auto auto;
gap: 15px;
}

.grid-item {
background-color: #e0e0e0;
padding: 15px;
text-align: center;
}

Dept. of MCA
MMC205 - Web Application Development P a g e | 53

</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1</div>
<div class="grid-item">Row 2</div>
</div>
</body>
</html>
In this example:
• The .grid-container is defined as a grid with two rows (auto height) and
a 15px gap between them.
• Each .grid-item represents a row with minimal styling for demonstration.

Four-Item Grid with Unequal Column Widths

<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}

.grid-item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

Dept. of MCA
MMC205 - Web Application Development P a g e | 54

<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
In this example:
• The .grid-container is defined as a grid with two columns, where the first
column takes up one fraction (1fr) of the available space, and the second
column takes up two fractions (2fr), creating unequal column widths.
• Each .grid-item represents a grid cell with minimal styling for
demonstration purposes.
Best Practices for CSS Grid Layout
• Use Flexible Units: Utilize flexible units like fr and minmax() to create
responsive layouts that adapt to various screen sizes.
• Define Explicit Grid Areas: Clearly specify grid areas using grid-
template-areas for better readability and maintainability of your code.
• Combine with Other Layout Methods: Integrate CSS Grid with
Flexbox to leverage the strengths of both and achieve complex,
responsive design

Dept. of MCA
MMC205 - Web Application Development P a g e | 55

Department of MCA

Module – 2: CSS3 and Responsive Web Design

Chapter – 2: Responsive Web Design:
The syllabus topics are
2.2.1. Media queries
2.2.2. Responsive design principles
2.2.3. Fluid grids and flexible images
2.2.4. Mobile-first design approach

2.2.1. Media queries

What is Responsive Web Design?

Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

Designing For the Best Experience for All Users

Web pages can be viewed using many different devices: desktops, tablets,
and phones. Your web page should look good, and be easy to use, regardless
of the device.
Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device:

Dept. of MCA
MMC205 - Web Application Development P a g e | 56

Desktop

Tablet

Phone
It is called responsive web design when you use CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.

What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

Dept. of MCA
MMC205 - Web Application Development P a g e | 57

Example

If the browser window is 600px or smaller, the background color will be

lightblue:

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

body {
background-color: lightblue;
}
}

Example Program:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}

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

body {
background-color: lightblue;
}
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600
pixels or less, the background-color is "lightblue", otherwise it is
"lightgreen".</p>

</body>
</html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 58

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it was
responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a breakpoint where certain parts
of the design will behave differently on each side of the breakpoint.

Desktop

Phone

Example
Here we use a media query to add a breakpoint at 600px:
@media only screen and (max-width: 600px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}

Dept. of MCA
MMC205 - Web Application Development P a g e | 59

Example Program:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
box-sizing: border-box;
}

body {
font-family: "Lucida Sans", sans-serif;
}

.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'footer footer footer footer footer footer';
gap: 10px;
background-color: white;
padding: 10px;
}

.grid-container > div {

padding: 10px;
font-size: 16px;
}

.item1 {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}

.item1 > h1 {
font-size: 40px;

Dept. of MCA
MMC205 - Web Application Development P a g e | 60

.item2 {
grid-area: menu;
}

.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.item2 li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
}

.item2 li:hover {
background-color: #0099cc;
}

.item3 {
grid-area: main;
}

.item3 > h1 {
font-size: 30px;
margin-bottom: 7px;
}

.item3 > p {
margin-bottom: 7px;
}

.item4 {
grid-area: right;
border: 2px solid #0099cc;
background-color: white;
padding: 15px;

Dept. of MCA
MMC205 - Web Application Development P a g e | 61

color: #000000;
}

.item4 > h2 {
font-size: 20px;
padding-bottom: 10px;
}

.item4 li {
padding: 5px;
margin-bottom: 5px;
}

.item5 {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
}

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

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}
</style>
</head>
<body>

<div class="grid-container">

<div class="item1"><h1>Chania</h1></div>

<div class="item2">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>

Dept. of MCA
MMC205 - Web Application Development P a g e | 62

</ul>
</div>

<div class="item3">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete.</p>
<p>The city can be divided in two parts, the old town and the modern
city. The old town is situated next to the old harbour and is the matrix
around which the whole urban area was developed.</p>
<p>Chania lies along the north west coast of the island Crete.</p>
</div>

<div class="item4">
<h2>Facts:</h2>
<ul>
<li>Chania is a city on the island of Crete</li>
<li>Crete is a Greek island in the Mediterranean Sea</li>
</ul>
</div>

<div class="item5"><p>Resize the browser window to see how the

content respond to the resizing.</p></div>

</div>

</body>
</html>

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Dept. of MCA
MMC205 - Web Application Development P a g e | 63

Desktop

Tablet

Phone

Example
Here we use media queries to add breakpoints when screen is max 600px,
when screen is min 600px, and when screen is min 768px :
@media only screen and (max-width: 600px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}

Dept. of MCA
MMC205 - Web Application Development P a g e | 64

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

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}
.item4 {grid-area: 3 / span 6;}
.item5 {grid-area: 4 / span 6;}
}

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

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}
.item4 {grid-area: 2 / span 1;}
.item5 {grid-area: 3 / span 6;}
}

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it
is hard to create an exact breakpoint for each device. To keep things simple
you could target five groups:
Example
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

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

/* Large devices (laptops/desktops, 992px and up) */

Dept. of MCA
MMC205 - Web Application Development P a g e | 65

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Example Program
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example {
padding: 20px;
color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
.example {background: blue;}
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}

Dept. of MCA
MMC205 - Web Application Development P a g e | 66

</style>
</head>
<body>

<h2>Typical Media Query Breakpoints</h2>

<p class="example">Resize the browser window to see how the background
color of this paragraph changes on different screen sizes.</p>

</body>
</html>

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.
You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:
Example
The web page will have a lightblue background if the orientation is in
landscape mode:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen
sizes:
I will be hidden on small screens.
Example
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
[Link] {
display: none;

Dept. of MCA
MMC205 - Web Application Development P a g e | 67

}
}

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on
different screen sizes:
Variable Font Size.
Example
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
[Link] {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
[Link] {
font-size: 30px;
}
}

2.2.2. Responsive design principles

Key Principles of Responsive Web Design
Responsive web design is all about creating websites that look good and
work well on any device. Here are the key principles to follow:
1. Viewable on Multiple Devices
• Your website should be designed to work on a variety of devices,
including mobiles, tablets, and PCs. This ensures that users can access
your site no matter what device they are using.

Dept. of MCA
MMC205 - Web Application Development P a g e | 68

2. Easy to Understand
• Make sure your website is simple and easy to use. Arrange features
and elements clearly so that users don’t get confused or lost. A clean,
neat layout helps users find what they need quickly and easily.
3. Consistency
• Maintain a consistent look and feel across all device sizes. This means
keeping the design elements, like fonts and colors, the same whether
the site is viewed on a phone, tablet, or computer. Consistency makes
your website look professional and cohesive.
4. User Engagement
• Engage users by allowing them to control and interact with your
website. For example, on a mobile device, use swipe gestures for
menus that are typically on the left side of the screen on a PC. This
interactivity builds user trust and makes the website more enjoyable to
use.
Best Practices for Responsive Web Design
Some of the best practices for a responsive web design that you can follow
are:
• Mobile-First Approach: Design for the smallest screen size possible
first and then optimise the design for larger screens. T ensuring that
website is accessible for mobile users, who make up a significant
amount of web traffic.
• Accessible Content: Make your website accessible to all users,
including those with disabilities. This includes proper use of HTML
semantic elements, ensuring keyboard navigability, and providing
alternative text for images.
• Responsive Media: Media elements should be able to resize
themselves to fit within the confines of the user's device.
• Landscape Orientation: Make sure to optimise your landscape
orientation to improve usability.

Dept. of MCA
MMC205 - Web Application Development P a g e | 69

• Stay Updated and Adapt: Stay informed about the latest

developments in responsive design, and browser capabilities to
continually refine and improve your website.
Uses of Responsive Web Design
Some of the uses of a Responsive Web Design are:
• Enhanced User Experience (UX): Ensures website is easily readable
and navigable on any device. No need to pinch or zoom to read
content.
• Lower Maintenance: Previously, businesses had to maintain two
versions of their website: one for desktop and one for mobile.
Responsive web design eliminates the need for a separate mobile site,
reducing the time and cost associated with website maintenance.
• Faster Loading Time: Responsive websites tend to load faster,
especially on mobile and other devices.
• Reduced Bounce Rate: A responsive mobile site provides a much
better user experience for the visitor making them stick around for a
longer duration of time and explore different areas of your site.
• SEO Advantages: A responsive website is preferred from Google and
other search engine.

2.2.3. Fluid grids and flexible images

1) Responsive Web Design: Fluid Grids
A fluid grid is a core concept of responsive web design (RWD) that
allows layouts to adapt to different screen sizes by using relative units (like
percentages) instead of fixed units (like pixels). This approach ensures that
elements on a webpage scale proportionally when the screen size changes,
providing a better user experience across devices.
What is a Fluid Grid?
A fluid grid system divides the layout into a series of columns, and content
elements are sized in proportion to those columns using percentages, not
fixed widths.

Dept. of MCA
MMC205 - Web Application Development P a g e | 70

For example:
css
.container {
width: 100%;
}

.column {
width: 33.33%; /* 1/3 of the container */
}
This means the column will always take up 1/3 of the available width,
whether it's on a desktop, tablet, or mobile screen.
Key Features
• Flexible Layout: Adapts automatically to screen size.
• Proportional Scaling: Elements scale relative to the screen or
container.
• Mobile-Friendly: Works well for various devices without separate
designs.

How It Works
Instead of:
css
.column {
width: 300px;
}
Use:
css
.column {
width: 25%; /* Adapts to 25% of the parent container */
}
This enables a layout that changes dynamically with the viewport.

Dept. of MCA
MMC205 - Web Application Development P a g e | 71

Example Program: Fluid Grid Layout

HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluid Grid Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

</body>
</html>

CSS ([Link])
/* Base styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

/* Container with 100% width */

.container {
width: 100%;

Dept. of MCA
MMC205 - Web Application Development P a g e | 72

display: flex;
flex-wrap: wrap;
padding: 10px;
box-sizing: border-box;
}

/* Fluid grid columns (3 equal boxes) */

.box {
flex: 1 1 33.33%; /* Each box takes up 1/3 of the container */
padding: 20px;
box-sizing: border-box;
background-color: #4CAF50;
color: white;
text-align: center;
margin: 5px;
}

/* Responsive adjustment for smaller screens */

@media (max-width: 768px) {
.box {
flex: 1 1 100%; /* Each box takes full width on small screens */
}
}
Advantages
• Improved user experience on all devices.
• Reduced maintenance (one design fits all screens).
• Better performance with fewer resources than creating multiple
fixed layouts.
Common Tools & Frameworks
• CSS Flexbox and CSS Grid (modern alternatives that support fluid
layouts)

Dept. of MCA
MMC205 - Web Application Development P a g e | 73

• Bootstrap (uses a fluid grid system by default)

• Media Queries (often used alongside fluid grids for finer control)

Summary
A fluid grid is a flexible layout technique that uses relative sizing to ensure
web content adapts to different screen sizes. It’s a foundation of responsive
design, helping create websites that work seamlessly across desktops, tablets,
and smartphones.

2) Responsive Web Design: Flexible Images

In Responsive Web Design (RWD), flexible images are images that
resize automatically to fit their containing element. This ensures they display
properly across various devices and screen sizes—whether on a desktop,
tablet, or mobile phone.
Why Use Flexible Images?
Without flexibility, an image might:
• Overflow its container on small screens
• Appear too small or pixelated on high-res displays
• Break the layout on various devices
How to Make Images Flexible
Use CSS to control the image's size with relative units.
Basic CSS Rule:
css
img {
max-width: 100%;
height: auto;
}
Explanation:
• max-width: 100% → Ensures the image never exceeds the width of its
container.
• height: auto → Maintains the image’s aspect ratio.

Dept. of MCA
MMC205 - Web Application Development P a g e | 74

Example Program: Flexible Image in a Responsive Layout

HTML ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Images Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<div class="container">
<h2>Responsive Image Example</h2>
<img src="[Link] alt="Sample Image">
<p>This image resizes based on the width of the container.</p>
</div>

</body>
</html>
CSS ([Link])
body {
margin: 0;
font-family: Arial, sans-serif;
}

.container {
width: 90%;
max-width: 800px;
margin: auto;

Dept. of MCA
MMC205 - Web Application Development P a g e | 75

padding: 20px;
}

/* Make images flexible */

img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 15px;
}

Result:
• On large screens: Image displays at full container width (up to
800px).
• On smaller screens: Image scales down proportionally to fit the
screen.

Tips for Better Responsive Images

• Use srcset and sizes attributes for multiple image resolutions.
• Optimize images for performance and load time.
• Combine flexible images with fluid grids and media queries for
complete responsiveness.

Dept. of MCA
MMC205 - Web Application Development P a g e | 76

2.2.4. Mobile-first design approach

Mobile First Design?
Mobile-first design is a way of creating websites that focuses on making them
work well on smartphones and tablets before designing for computers. This
approach is important because most people now use their mobile devices to
browse the internet. By starting with mobile-friendly design, you ensure your
website provides a great user experience on smaller screens, which can lead
to more visitors and better engagement. In this article, we will explain what
mobile-first design is, why it's important, and how you can use it to make
responsive and effective websites.

Mobile-First Design
What is Mobile-First Design?
Mobile-first design is an approach where you design your website for mobile
devices first and then for desktops. This method is crucial because most
people today use their smartphones and tablets to go online rather than
laptops or computers. Mobile-first designs ensure that your website not only
looks good but also works seamlessly across different devices, providing the
best user experience. This approach helps increase website traffic and
ensures that your site adjusts to different screen sizes effectively.
To create a successful mobile-first website, consider the following tips:

Dept. of MCA
MMC205 - Web Application Development P a g e | 77

• Use large fonts and buttons to make navigation easier on small

screens.
• Keep the text short and to the point to improve readability.
• Use high-quality images to make the content visually appealing.
By focusing on these elements, you can create a mobile-first design that
enhances user experience, attracts more visitors, and ensures your website
performs well on all devices.
Why Mobile-First Design?
The Mobile-First concept is crucial because it prioritizes the user
experience on mobile devices, which are now the most popular way to access
the Internet. Designing for mobile-first ensures that your products are
optimized for the majority of users, as most internet traffic today comes
from smartphones and tablets.
Mobile devices have small screens and touch interfaces, which can
significantly impact the user's experience. By focusing on mobile design first,
you ensure that your website or app is intuitive and user-friendly. This
approach guarantees that users can easily navigate and interact with your site,
no matter the device they are using. In turn, this leads to better user
engagement, increased website traffic, and a more successful overall
design.
Mobile-First Design Process
The Mobile-First design process involves several key steps to ensure your
website is optimized for mobile devices first. Here’s a simplified and effective
approach:
1. Wireframing:
Start by creating wireframes for your layout. Focus on the content and arrange
the screen size to suit your needs. This helps in visualizing the structure and
flow of your mobile design.
2. Content Inventory:
Compile all the elements you plan to include in a spreadsheet or similar
document. This ensures you have a clear overview of all the content.
3. Visual Hierarchy:

Dept. of MCA
MMC205 - Web Application Development P a g e | 78

Prioritize content items in your inventory to display the most important

elements effectively. This helps in guiding users’ attention to key information.
4. Design for Small Screens First:
Begin by designing a mobile wireframe. Use this as a model and then expand
to larger breakpoints. You can enlarge the screen until there is ample negative
space, ensuring a clean and spacious layout.
5. Expand Touch Targets:
Fingers are wider than mouse cursors, so make sure your interactive elements
are large enough to tap easily. This improves usability on touch screens.
6. Avoid Relying on Hovers:
Hovers add interactivity, but they don't work on mobile devices. Design
interactions that don’t rely on hover effects to ensure functionality on all
devices.
7. Use Smaller Graphics:
Large graphics like landscape images and complex visuals don’t perform well
on smaller screens. Opt for smaller, simpler graphics that display well even on
mobile devices.
Usage Practices of Mobile-First Design
Mobile-First Design involves key practices to ensure a smooth and enjoyable
user experience on mobile devices:
1. Prioritize Page Content: With limited space on smaller screens, make
sure the most important elements are visible first. This helps users
quickly find what they are looking for.
2. Integrated Navigation: Easy and clean navigation is crucial for mobile
users. Ensure menus and links are intuitive, making it simple for users
to find the information they need.
3. Avoid Disruptive Pop-ups: Pop-ups can be annoying and disrupt the
user experience. Focus on essential content and avoid unnecessary
distractions so users can easily find what they need.

Dept. of MCA
MMC205 - Web Application Development P a g e | 79

Benefits of Mobile-First Design

Mobile-First Design offers numerous benefits:
1. Responsive Design: Ensures your website adapts to any device,
from smartphones to desktops, reaching a wider audience.
2. Simplified Content: Streamlines and simplifies information, making it
easily accessible on smaller screens.
3. Growing Mobile Usage: Meets the increasing demand for mobile-
friendly websites as more people use
their smartphones and tablets to browse the internet.
4. Improved SEO: Enhances your website’s SEO ranking, making it more
likely to appear in search results and attract more visitors.
5. Optimized Performance: Uses smaller, optimized images and efficient
code that load quickly on mobile devices, providing a better user
experience.
Conclusion
As today most of the Internet traffic comes from mobile devices, Mobile-First
concept is a crucial aspect of the design which prioritizes user experience on
mobile devices. Mobile first design ensures that your Website is responsive,
enabling you to reach the customers of any platform. When products are
designed thinking of mobile devices, they are guaranteed to be intuitive and
user-friendly.

Dept. of MCA
MMC205 - Web Application Development P a g e | 80

Department of MCA

Module – 2: CSS3 and Responsive Web Design

Chapter – 3: CSS Frameworks:
The syllabus topics are
2.3.1. Introduction to Bootstrap
2.3.2. Bootstrap components and utilities
2.3.3. Customizing Bootstrap with Sass

2.3.1. Introduction to Bootstrap

Bootstrap is a popular front-end framework for building responsive and
mobile-first websites. It provides pre-designed CSS, JavaScript components,
and utility classes to quickly create modern and consistent user interfaces.
• It Includes pre-built responsive grid systems for mobile-first design.
• Offers a wide range of UI components like buttons, modals, and navbars.
• Provides built-in support for responsive typography, spacing, and
utilities.
• Extensively customizable via Sass variables and Bootstrap's
configuration.
To start with Bootstrap, you need to install it on your project or use the CDN
link. Follow these articles to install depending on your system:
• How to install Bootstrap 5?
• How to Add Bootstrap in a Project?

Dept. of MCA
MMC205 - Web Application Development P a g e | 81

Let us now take a look at our first code example.

<html>

<head>
<link
href="[Link]
css"
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALE
wIH"
crossorigin="anonymous">
<script
src="[Link]
[Link]"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz
"
crossorigin="anonymous"></script>
</head>

<body>
<div class="container text-center">
<h1 class="text-success">
Welcome to GeeksforGeeks
</h1>
<p class="text-dark">A Simple Example of Bootstrap</p>
</div>
</body>

</html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 82

Output

First Bootstrap Example

In this example:
• Bootstrap CSS and JavaScript files are included via CDNs with integrity
attributes for security.
• The container class ensures the content is responsive and aligned.
• The text-center class centers the text within the div.
• The text-success class adds a green color to the heading, using
Bootstrap's built-in color utilities.
Why Learn Bootstrap?
• Accelerates the development of modern web pages.
• Ensures consistent design across devices and browsers.
• Reduces the need for writing custom CSS.
• Ideal for both beginners and professionals in web development.

2.3.2. Bootstrap components and utilities

Bootstrap Components
Bootstrap offers a rich set of pre-designed components to streamline UI
development. These include buttons, cards, modals, navbars, and more.
• Accordion
• Alerts
• Badges
• Breadcrumb
• Buttons
• Button Group
• Card
• Carousel

Dept. of MCA
MMC205 - Web Application Development P a g e | 83

• Close Button
• Collapse
• Dropdowns
• List Group
• Modal
• Navbar
• Offcanvas
• Popovers
• Pagination
• Progress
• Scrollspy
• Spinners
• Toasts
• Tooltips
Bootstrap 5 Accordion
Bootstrap 5 Accordion organizes content into collapsible panels, enabling
space-efficient presentation of information. It allows users to toggle between
panel visibility, enhancing user experience, and content organization within
web applications.
Bootstrap 5 Accordion

Term Description

Adding the .accordion-flush class removes default background

Flush color, borders, and some rounded corners from accordions,
rendering them edge-to-edge with their parent container.

Always Omitting the data-bs-parent attribute makes accordion items

Open stay open when another item is opened.

Changing default accordion values using Bootstrap 5 SASS

SASS
variables.

Dept. of MCA
MMC205 - Web Application Development P a g e | 84

Syntax:
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="header1">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#panel1Collapse">
First Panel
</button>
</h2>
<div id="panel1Collapse"
class="accordion-collapse collapse show"
aria-labelledby="panel1Heading">
<div class="accordion-body">
This is the content for first Panel.
</div>
</div>
</div>
<!-- Add your more panels here -->
</div>

Examples of Bootstrap 5 Accordion

Example 1: Below example demonstrates the usage of the flush accordion.
The flush accordion removes the default border and background styles,
creating a sleek and borderless appearance.

<!DOCTYPE html>
<html>

<head>
<title>Accordion Example</title>
<link rel="stylesheet"
href=
"[Link]
/>
</head>

<body>
<h2 class="text-center">

Dept. of MCA
MMC205 - Web Application Development P a g e | 85

Bootstrap 5 Accordion
</h2>

<div class="container mt-5">

<div class="accordion accordion-flush mt-4"
id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
C++
</button>
</h2>

<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
C++ is a high level
programming language
used for developing
applications, games,
etc.
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
Java

Dept. of MCA
MMC205 - Web Application Development P a g e | 86

</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Java is a programming
language that is used
in modern development
worldwide.
</div>
</div>
</div>
</div>
</div>
<script src=
"[Link]
js">
</script>
</body>

</html>

Bootstrap 5 Alerts

Bootstrap 5 Alerts are customizable components used to convey important

information to users. They come in various styles such as success, warning,
danger, and info, providing visual feedback to users based on different actions
or states within a web application.
Currently Active Property:
Class: alert alert-primary

Syntax:
<div class="alert alert-type"> Contents of the alert... <div>
Types: There are eight types of alerts available in Bootstrap 5. The classes of
these alerts are given below:
• alert-primary

Dept. of MCA
MMC205 - Web Application Development P a g e | 87

• alert-secondary
• alert-success
• alert-danger
• alert-warning
• alert-info
• alert-light
• alert-dark
Example 1: This example we demonstrates Bootstrap 5 alerts with different
colors: primary, secondary, success, and danger, each displaying
"GeeksforGeeks" as content.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"[Link]
alpha1/css/[Link]">
</head>
<body>
<div style="text-align: center;
width:600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px; margin: 20px;">
<div class="alert alert-primary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-secondary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-success" role="alert">
GeeksforGeeks

Dept. of MCA
MMC205 - Web Application Development P a g e | 88

</div>
<div class="alert alert-danger" role="alert">
GeeksforGeeks
</div>
</div>
</body>
</html>
Output:

Bootstrap 5 Buttons
Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework,
offering consistent design and functionality. They streamline development by
providing ready-to-use button styles, sizes, and behaviors, ensuring a
cohesive and responsive user interface across web applications with minimal
CSS customization.
Currently Active Property:
Class="btn-primary"
Syntax:
<button class="badge bg-type"> Button Text <button>
Types: Following are the nine types of buttons available in Bootstrap 5:
• btn-primary
• btn-secondary

Dept. of MCA
MMC205 - Web Application Development P a g e | 89

• btn-success
• btn-danger
• btn-warning
• btn-info
• btn-light
• btn-dark
• btn-link
Examples of Bootstrap 5 Buttons
Example 1: This example uses shows the working of the first five types of
buttons in Bootstrap 5.
<!DOCTYPE html>
<html>

<head>
<title>
Bootstrap 5 Buttons
</title>

<!-- Load Bootstrap -->

<link rel="stylesheet" href=
"[Link]
alpha1/css/[Link]"
integrity=
"sha384-
r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ
4I"
crossorigin="anonymous">
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div style="width: 600px;height: 200px;
margin:20px;text-align: center;">
<button type="button" class="btn btn-info">
Info

Dept. of MCA
MMC205 - Web Application Development P a g e | 90

</button>
<button type="button" class="btn btn-light">
Light
</button>
<button type="button" class="btn btn-dark">
Dark
</button>
<button type="button" class="btn btn-link">
Link
</button>
</div>
</body>

</html>
Output:

Bootstrap Utilities
Bootstrap utilities are small, reusable classes that provide additional
functionality and control. They include classes for spacing, alignment, borders,
and background colors.
• Background
• Borders
• Colors
• Display
• Flex
• Float
• Interactions
• Overflow

Dept. of MCA
MMC205 - Web Application Development 2024-25 P a g e | 91

• Position
• Shadows
• Sizing
• Spacing
• Text
• Vertical align
• Visibility
Bootstrap 5 Background
Last Updated : 25 Jul, 2024
•

Bootstrap 5 Background is used with the help of the keyword bg. It offers
various colors like primary, success, info, warning, danger, secondary, dark,
and light.
• Background Color: The background color of the elements is set to
contextual class like .bg-primary, .bg-success, and so on.
• Background gradient: A linear gradient is applied to the backgrounds
by adding color value and the .bg-gradient class to it.
• Sass: This involves the Sass map and spacing utilities that are declared
in Utility API.
The below examples illustrate the Bootstrap 5 Background:
Example 1: The following code demonstrates different background Color
classes of Bootstrap 5.
<!DOCTYPE html>
<html lang="en">

<head>
<link href=
"[Link]
rel="stylesheet"
integrity=

Dept. of MCA
MMC205 - Web Application Development P a g e | 92

"sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmL
ASjC"
crossorigin="anonymous">
<script src=
"[Link]
js"
integrity=
"sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVX
M"
crossorigin="anonymous">
</script>
</head>

<body>
<h1 class="text-center text-success">
GeeksforGeeks
</h1>
<h2 class="text-center">
Bootstrap 5 Background
</h2>

<div class="p-3 mb-2 bg-primary text-white">

Hello World
</div>
<div class="p-3 mb-2 bg-secondary text-white">
Hello World
</div>
<div class="p-3 mb-2 bg-success text-white">
Hello World
</div>
<div class="p-3 mb-2 bg-danger text-white">
Hello World
</div>
<div class="p-3 mb-2 bg-warning text-dark">
Hello World
</div>
<div class="p-3 mb-2 bg-info text-dark">
Hello World
</div>

Dept. of MCA
MMC205 - Web Application Development P a g e | 93

<div class="p-3 mb-2 bg-light text-dark">

Hello World
</div>
<div class="p-3 mb-2 bg-dark text-white">
Hello World
</div>

</body>

</html>
Bootstrap 5 Borders
Bootstrap 5 Borders offer predefined border styles to elements. Classes like
.border, .border-0, .border-top, .border-bottom, .border-left, and .border-
right provide easy customization for borders, including color, width, and
radius, enhancing UI design.
Bootstrap 5 Borders:

Property Description

Classifies into additive and subtractive. Additive adds

Border
borders, subtractive removes.

Border
Utilizes theme colors to change border color.
Color

Border
Increases or decreases border width.
Width

Border
Utilizes rounded classes for rounded corners.
Radius

Supports language extensions like variables, utility API, and

Sass
mixins.

Examples of Bootstrap 5 Borders

Example 1: This code demonstrates the different border sizes as shown
below. The class "border border-4" means "border-4" size is applied to all
the sides and so on.
<!DOCTYPE html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 94

<html lang="en">
<head>
<title> Bootstrap 5 Borders </title>
<link href=
"[Link]
rel="stylesheet" integrity=
"sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmL
ASjC"
crossorigin="anonymous">
<script src=
"[Link]
js"
integrity=
"sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVX
M"
crossorigin="anonymous">
</script>
</head>

<body>
<h2 class="text-center">Bootstrap 5 Borders</h2>
<div class="text-center">
<span class="border border-4">1</span>
<span class="border-top border-5">2</span>
<span class="border-end border-4">3</span>
<span class="border-bottom border-5">4</span>
<span class="border-start border-3">5</span>
</div>
</body>
</html>
Output:

Bootstrap 5 Borders Example Output

Dept. of MCA
MMC205 - Web Application Development P a g e | 95

Bootstrap 5 Colors
Bootstrap 5 Colors utility is used to set the text colors, into green as a success,
and blue as a primary. There are lots of other informative colors that we need
like danger, warning, and so on. In this article, we will know about all the text
colors that can be used through Bootstrap 5.
Bootstrap 5 Colors Classes:

Class Description

text-primary Denotes important text.

text-success Indicates task success with green text.

text-info Represents informative text.

text-warning Denotes warning text in yellow.

text-danger Represents danger with red text.

text-secondary Represents secondary texts.

text-white Changes text color to white.

text-dark Black text color.

text-body Default body color, usually black.

text-light Light gray text color.

text-muted Denotes muted text, usually light gray.

Note: According to the docs, they have used only text-color classes, but we
can use background classes in a similar way, for that we just need to replace
the text with bg(text-primary to bg-primary.)

Syntax:
<p class="Colors Class">
Text Content
</p>

Dept. of MCA
MMC205 - Web Application Development P a g e | 96

Examples of Bootstrap 5 Colors

Example 1: In this example, we will use all the informative text color
classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"[Link]
alpha1/css/[Link]">
</head>

<body class="m-2">
<div>
<strong>Bootstrap 5 Colors</strong>
</div>
<br>
<div>
<!-- Bootstrap 5 Color Classes are used -->
<p class="text-primary">
Text Color Class: text-primary
</p>
<p class="text-secondary">
Text Color Class: text-secondary</p>
<p class="text-success">
Text Color Class: text-success</p>
<p class="text-danger">
Text Color Class: text-danger</p>
<p class="text-warning">
Text Color Class: text-warning</p>
<p class="text-info">
Text Color Class: text-info</p>
</div>
</body>
</html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 97

2.3.3. Customizing Bootstrap with Sass

How To Customize Bootstrap With Sass?
Bootstrap is one of the most popular CSS frameworks used to develop
responsive websites quickly. However, using the default Bootstrap design can
result in many websites looking the same. This is where Sass (Syntactically
Awesome Style Sheets) comes in handy. By customizing Bootstrap with Sass,
you can create a unique design while still using Bootstrap’s powerful grid
system, components, and utilities.
Why Customize Bootstrap with Sass?
Customizing Bootstrap with Sass allows you to:
• Modify variables: Change Bootstrap’s default variables like colors,
fonts, and sizes to match your brand.
• Use only what you need: Remove unused components to reduce the
size of your final CSS file.
• Easily create themes: Sass makes it easy to switch themes or create
multiple themes for different sections of your site.
Prerequisites
• Node NPM
• Sass
• CSS
Below are the approaches to customize Bootstrap using Sass:
Table of Content
• Changing Bootstrap Variables
• Overriding Bootstrap Components
• Adding Custom Styles
Steps to Set Up Bootstrap and Sass
Step 1: Install [Link] and npm
Ensure you have [Link] and npm installed on your system. You can download
them from the official [Link] website.
Step 2: Create a New Project Folder
Create a new folder for your project:

Dept. of MCA
MMC205 - Web Application Development P a g e | 98

mkdir bootstrap-sass-customization
cd bootstrap-sass-customization
Step 3: Initialize npm
Inside the folder, initialize a new npm project:
npm init -y
Step 4: Install Bootstrap and Sass
Now install Bootstrap and Sass via npm:
npm install bootstrap@5 sass
Step 5: Update your [Link] with scripts to compile Sass:
{
"scripts": {
"build-css": "sass scss/[Link] dist/[Link] --watch"
}
}
Folder Structure

Folder Structure

Updated Dependencies
"dependencies": {
"bootstrap": "^5.3.3",
"sass": "^1.79.3"
}

Run the command to watch for Sass changes:

npm run build-css

Dept. of MCA
MMC205 - Web Application Development P a g e | 99

1. Changing Bootstrap Variables

You can change predefined variables like colors, fonts, spacing, etc.,
in Bootstrap by overriding its default variables in your Sass file. One of the
simplest ways to customize Bootstrap with Sass is to change its default
variables.
Example: The SCSS code customizes the Bootstrap primary button's
background and border colors, with a hover effect, and applies these styles to
a button in the HTML file.
<!-- [Link] -->
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="dist/[Link]">
</head>

<body>
<button class="btn btn-primary m-5">Primary Button</button>
</body>

</html>

// scss/[Link]

@import "../node_modules/bootstrap/scss/bootstrap";

// Correct way
.btn-primary {
&{
background-color: #e74c3c;
border-color: #e74c3c;
}

&:hover {
background-color: #c0392b;
}
}

Dept. of MCA
MMC205 - Web Application Development P a g e | 100

Output

2. Overriding Bootstrap Components

Sometimes, you may want to customize specific components like buttons or
cards. You can override Bootstrap styles by targeting these components
directly in your custom Sass file. You can apply specific changes to Bootstrap
components by targeting their classes directly and adding your custom styles.
Example: The SCSS overrides Bootstrap's primary button styles, changing
the background, border, and hover colors with Sass-compliant syntax, and
applies these styles to a button in the HTML file.

<!-- [Link] -->

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="dist/[Link]">
</head>

<body>
<button class="btn btn-primary">Primary Button</button>
</body>

</html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 101

// scss/[Link]

@import "../node_modules/bootstrap/scss/bootstrap";

// Override button styles with Sass compliance

.btn-primary {

// Wrapping declarations in & {} block to avoid deprecation warning

&{
background-color: #e74c3c;
border-color: #3c7be7;
}

&:hover {
background-color: #35c02b;
}
}

3. Adding Custom Styles

In addition to modifying existing Bootstrap components, you can add entirely
new styles to your project using Sass. You can write custom styles using Sass
and include them alongside Bootstrap's existing styles for added functionality.
Example: The SCSS defines custom styles for a header with a green
background, white text, and hover effect, and applies these styles to a header
in the HTML file.
<!-- [Link] -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/[Link]">
</head>

<body>
<header class="custom-header">
Welcome to My Custom Bootstrap Page
</header>
</body>

</html>

Dept. of MCA
MMC205 - Web Application Development P a g e | 102

// scss/[Link]

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom styles for a header

.custom-header {
&{
background-color: #2ecc71;
// Wrapping in & {}
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
}

&:hover {
background-color: #27ae60;
// Darker green on hover
}
}

Output

How To Customize Bootstrap With Sass?

Dept. of MCA