Module 2-1
Uploaded by
mbs.vinodModule 2-1
Uploaded by
mbs.vinodWeb Application and Development MMC205
Module 2
CSS3 and Responsive Web Design: CSS3 Basics:
SS3isthelatestevolutionoftheCascadingStyleSheetslanguageandaimsatextendingCSS2.1.Itbringsa
C
lot of long-awaited novelties, like roundedcorners,shadows,gradients,transitionsoranimations,aswellas
new layouts like multi-columns, flexible box or grid layouts.
SS3 is used to apply : -
C
1. Dynamic effects
2. Transitions
3. Animations
4. Slick and flexible page
5. Gradient effects
Difference Between CSS2 And CSS3
CSS Selectors
SS (Cascading Style Sheets) selectorsarethefoundationofCSS.TheydefinewhichHTMLelementswill
C
bestyledbyasetofCSSrules.Selectorsallowdeveloperstotargetelementsonawebpageandapplystyles
precisely.
ATME College of Engineering Department of MCA 1
Web Application and Development MMC205
hinkofaselectorasawayofpointingatspecificelementsintheHTMLdocument.Forexample,youmight
T
want to change the text color of all paragraphs or set the background of an element with a certain class.
How CSS Works: Selector, Property, and Value
A CSS rule consists of:
c ss
selector {
property: value;
}
● Selector: Specifies which element(s) to style.
● Property: Defines what style aspect to change (e.g., color, font-size).
● Value: Specifies the new style for that property.
Example:
c ss
p {
color: blue;
}
● The selector p means all paragraph elements.
● The property is color.
● The value is blue.
● So, this rule colors all paragraph text blue.
3. Types of CSS Selectors
SSprovidesmanytypesofselectorstotargetelementswithvariouslevelsofprecision.Belowarethemain
C
types:
3.1 Universal Selector (*)
● The universal selector targets all elements on the page.
ATME College of Engineering Department of MCA 2
Web Application and Development MMC205
● Useful for applying global styles like margin or padding resets.
Example:
css
* {
margin: 0;
padding: 0;
}
This removes all default margins and paddings from every element, giving a clean slate.
3.2 Type Selector (Element Selector)
● Targets all elements of a specific tag name.
● Common tags include p, div, h1, a, ul, etc.
Example:
css
h1 {
font-size: 36px;
color: darkblue;
}
This styles all <h1> elements with a larger font and dark blue color.
3.3 Class Selector (.)
● Targets all elements that have a specific class attribute.
● Classes allow grouping elements for shared styling.
● Multiple elements can share the same class.
ATME College of Engineering Department of MCA 3
Web Application and Development MMC205
Syntax:
c ss
.className {
/* styles */
}
Example:
c ss
.highlight {
background-color: yellow;
font-weight: bold;
}
HTML:
html
<p class="highlight">This paragraph is highlighted.</p>
3.4 ID Selector (#)
● Targets a single element with a unique ID attribute.
● IDs should be unique within an HTML document.
● Has higher specificity than classes and types.
Syntax:
css
#elementID {
/* styles */
}
Example:
c ss
#main-header {
text-align: center;
ATME College of Engineering Department of MCA 4
Web Application and Development MMC205
f ont-size: 48px;
}
HTML:
h tml
<h1 id="main-header">Welcome to My Website</h1>
3.5 Attribute Selector ([attr])
● Targets elements based on the presence or value of attributes.
● Very useful for styling form elements or dynamic content.
Syntax:
● [attribute] — selects elements with the attribute present.
● [attribute="value"] — selects elements with attribute equal to value.
● [attribute^="value"] — attribute starts with value.
● [attribute$="value"] — attribute ends with value.
● [attribute*="value"] — attribute contains value.
Example:
c ss
input[type="text"] {
border: 2px solid green;
padding: 5px;
}
This styles all <input> fields where type="text".
3.6 Pseudo-class Selectors (:)
ATME College of Engineering Department of MCA 5
Web Application and Development MMC205
● Pseudo-classes select elements in a specific state or position.
● They allow styling based on interaction or structure.
Common pseudo-classes:
● :hover — when mouse is over element.
● :focus — when element is focused.
● :first-child — first child element of its parent.
● :last-child — last child element.
● :nth-child(n) — the nth child element.
Example:
c ss
a:hover {
color: red;
text-decoration: underline;
}
When the user hovers over a link, it becomes red and underlined.
3.7 Pseudo-element Selectors (::)
● Pseudo-elements target parts of an element.
● They let you insert or style parts like the first letter, before or after content, selection, etc.
Common pseudo-elements:
● ::before — inserts content before element content.
● ::after — inserts content after element content.
ATME College of Engineering Department of MCA 6
Web Application and Development MMC205
● ::first-letter — styles the first letter of text.
● ::first-line — styles the first line.
Example:
c ss
p::first-letter {
font-size: 200%;
color: orange;
}
This makes the first letter of every paragraph larger and orange.
3.8 Combinator Selectors
These selectors target elements based on their relationship in the HTML structure.
a ) D
escendant Selector (space)
● Selects elements that are inside another element, no matter how deep.
css
div p {
color: green;
}
Styles all paragraphs inside any <div>.
b ) C
hild Selector (>)
● Selects direct children only (one level down).
c ss
ul > li {
list-style-type: circle;
}
Styles only <li> elements that are direct children of <ul>.
c ) A
djacent Sibling Selector (+)
● Selects the element immediately after another element.
ATME College of Engineering Department of MCA 7
Web Application and Development MMC205
c ss
h2 + p {
margin-top: 0;
}
Styles a paragraph only if it directly follows an <h2>.
d ) G
eneral Sibling Selector (~)
● Selects all siblings after a specific element.
css
h3 ~ p {
color: gray;
}
Styles all paragraphs that come after any <h3> sibling.
4. Specificity and Priority of Selectors
hen multiple CSS rules apply to the same element, the browser decides which to use by calculating
W
specificity.
Specificity rules:
Selector Type Specificity Value
Inline style (e.g., style="") 1000
ID selectors (#id) 100
Class, attribute, pseudo-class 10
Type (element) selectors 1
Universal selector (*) 0
he rule with the highest specificity wins.
T
If specificity ties, the last declared rule is applied.
Example:
css
ATME College of Engineering Department of MCA 8
Web Application and Development MMC205
p {
color: blue; /* specificity = 1 */
}
.highlight {
color: red; /* specificity = 10 */
}
#intro {
color: green; /* specificity = 100 */
}
If a paragraph has class highlight and id intro, the text will be green because ID selector specificity is highest.
5. Grouping Selectors
You can group selectors that share the same styles using commas, reducing repetition.
Example:
css
h1, h2, h3 {
font-family: Arial, sans-serif;
color: navy;
}
● CSS selectors let you target HTML elements for styling.
● T here are many types: universal, type, class, ID, attribute, pseudo-class, pseudo-element, and
combinators.
● Specificity determines which CSS rule takes precedence.
● Mastering selectors is crucial for writing effective, maintainable CSS.
CSS3 Properties and Values
SS3 properties are the style attributes that determine how HTML elements appear on a webpage. They
C
describe what aspect of the element to style, such as color, size, spacing, font, and layout.
Examples of CSS properties include:
ATME College of Engineering Department of MCA 9
Web Application and Development MMC205
● color
● margin
● padding
● font-size
● background
● border
CSS3 Values
aluesarethespecificsettingsassignedtoCSSproperties.Theydefinehowthepropertyshouldbeappliedto
V
the element.
For example:
c ss
p {
color: blue;
margin: 10px;
}
Here, color and margin are properties, and blue and 10px are their respective values.
Types of CSS3 Properties
1. Longhand Properties
hese refer to individual properties controlling a specific part of an element.
T
For example, margins can be set individually on each side using:
○ margin-top
○ margin-right
○ margin-bottom
○ margin-left
ATME College of Engineering Department of MCA 10
Web Application and Development MMC205
2. Shorthand Properties
hese allow multiple related longhand properties to be set together in one declaration.
T
For example, margin can set all four margins at once:
c ss
margin: 10px 20px 15px 5px;
This means:
○ top margin = 10px
○ right margin = 20px
○ bottom margin = 15px
○ left margin = 5px
Types of CSS3 Property Values
● Length Values
Define sizes or distances. Can be absolute (px, cm) or relative (em, %, vw).
Example: margin: 20px;, font-size: 1.5em;
● Percentage Values (%)
Relative to the size of the parent element.
Example: width: 50%;
● Color Values
Canbenamedcolors(red),hexadecimal(#FF0000),RGB(rgb(255,0,0)),RGBA(withtransparency),
or HSL.
Example: color: #333333;
● Keyword Values
Predefined words specific to properties, like block, none, solid, italic.
Example: display: block;, border-style: dashed;
● URL Values
Link to external resources such as images or fonts.
Example: background-image: url('image.jpg');
● Functions and Calculations
CSS functions like calc(), var(), rgb().
ATME College of Engineering Department of MCA 11
Web Application and Development MMC205
Example: width: calc(100% - 50px);
● Global Values
Special keywords applicable to any property:
○ inherit — takes value from parent element
○ initial — resets to default value
○ unset — behaves as inherit or initial based on property
○ revert — reverts to user-agent or user stylesheet value
Example Combining Properties and Values
c ss
div {
margin: 10px 20px;
/* shorthand margin: top/bottom 10px, left/right 20px */
padding-left: 15px;
/* longhand padding on left */
color: rgb(0, 128, 255);
/* color using rgb value */
background-color: #f0f0f0;
/* hexadecimal color value */
border: 2px solid black;
/* shorthand border: width, style, color */
width: 75%;
/* percentage width relative to parent */
font-size: 1.2em;
/* relative font size */
display: flex;
/* keyword value */
}
ATME College of Engineering Department of MCA 12
Web Application and Development MMC205
Summary
● CSS3 properties specify the style features to be changed.
● CSS3 values assign the specific style settings to those properties.
● Properties can be longhand (detailed) or shorthand (combined).
● Values vary in type, including lengths, colors, keywords, percentages, URLs, and functions.
● Understanding both properties and values is essential to write effective and flexible CSS code.
Box model
he CSS3 Box Model is a fundamental concept in CSS that describes how elements on a webpage are
T
structured and how their sizes and spacing are calculated. Every HTML element is represented as a
rectangular box, and this box consists of several layers that define the element’s total space on the page.
Understanding the box model is crucial for designing and controlling layouts effectively.
Components of the Box Model
The CSS box model has four main parts from inside out:
1. Content Box
○ The innermost part containing the actual content, such as text, images, or other media.
○ The size of the content box is set by the CSS properties width and height.
2. Padding
ATME College of Engineering Department of MCA 13
Web Application and Development MMC205
○ The transparent space surrounding the content inside the element.
○ Padding pushes the content away from the element’s edges.
○ It increases the size of the element’s box but stays inside the border.
3. Border
○ The visible line surrounding the padding and content.
○ Borders can have width, style (solid, dotted, dashed), and color.
○ The border thickness adds to the total element size.
4. Margin
○ The outermost transparent space outside the border.
○ Margin creates distance between the element and other neighboring elements.
○ M arginsdonothaveabackgroundanddonotaffecttheelement’svisiblesize,onlythespace
around it.
Calculating the Total Size of an Element
The total size of an element depends on the sum of its content, padding, border, and margin.
● T otalWidth=contentwidth+leftpadding+rightpadding+leftborder+rightborder+leftmargin+
right margin
● T otal Height = content height + top padding + bottom padding + top border +bottomborder+top
margin + bottom margin
Example:
If a div has the following CSS:
css
div {
width: 200px;
padding: 10px;
ATME College of Engineering Department of MCA 14
Web Application and Development MMC205
b order: 5px solid black;
margin: 20px;
}
The total width occupied by the element will be:
● Content width = 200px
● Padding (left + right) = 10px + 10px = 20px
● Border (left + right) = 5px + 5px = 10px
● Margin (left + right) = 20px + 20px = 40px
Total width = 200 + 20 + 10 + 40 = 270px
The box-sizing Property
ydefault,CSSusesthecontent-boxmodel,whichmeansthewidthandheightapplyonlytothecontentarea.
B
Padding and borders are added outside this size, increasing the total size of the element.
However, CSS3 introduced the box-sizing property to change this behavior:
● c ontent-box(default):Widthandheightincludeonlythecontent.Paddingandborderincreasethetotal
size.
● b order-box:Widthandheightincludecontent+padding+border.Thetotalsizeremainsthevalueset
in CSS, making layout calculations easier.
Example:
css
div {
width: 300px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
ATME College of Engineering Department of MCA 15
Web Application and Development MMC205
Here, the total width of the element will be 300px, with padding and border included inside the 300px width.
Importance of the Box Model in CSS3
● Layout Control: Helps in managing the spacing and size of elements on the page precisely.
● R esponsive Design: Understanding box-sizing helpsincreatinglayoutsthatadapttodifferentscreen
sizes without unexpected overflow or spacing issues.
● Styling Accuracy: Avoids common bugs caused by padding and borders adding extra space.
● B rowserConsistency:CSS3box-sizingissupportedwidely,allowingconsistentstylingacrossmodern
browsers.
Summary
● The CSS3 box model treats each element as a box with content, padding, border, and margin.
● The total size of an element includes all these parts unless box-sizing: border-box is used.
● T hebox-sizingpropertysimplifieslayoutbyincludingpaddingandborderwithintheelement’swidth
and height.
● Mastering the box model is key to professional and precise web design.
CSS3 Layout and Positioning
I nCSS3,layoutandpositioningrefertohowHTMLelementsarearrangedandplacedonawebpage.Proper
control over layout and positioning allows developers to create visually appealing and user-friendly designs.
SS3providesmultiplewaystocontroltheflowandpositionofelements,includingtraditionalmethodsand
C
modern techniques like Flexbox and Grid.
Types of Positioning in CSS3
The position property specifies how an element is positioned in a document. It accepts several values:
1. Static (default)
○ Elements are positioned according to the normal document flow.
ATME College of Engineering Department of MCA 16
Web Application and Development MMC205
○ top, right, bottom, left properties have no effect.
2. Relative
○ Element is positioned relative to its normal position.
○ You can move it using top, right, bottom, and left without affecting other elements' positions.
○ Space is still reserved for the element in the normal flow.
3. Absolute
○ Element is positioned relative to the nearest positioned ancestor (relative, absolute, or fixed).
○ Removed from normal document flow; does not affect other elements.
○ You control its exact position using top, right, bottom, and left.
4. Fixed
○ Element is positioned relative to the viewport and stays fixed when the page is scrolled.
○ Removed from normal flow; top, right, bottom, and left specify its position.
5. Sticky (CSS3 feature)
○ Combines relative and fixed positioning.
○ Element behaves like relative until it reaches a defined scroll position, then it becomes fixed.
CSS3 Layout Techniques
1. Normal Flow
● The default layout where block elements stack vertically and inline elements flow horizontally.
2. Float and Clear
● f loat:Allowselementstobetakenoutofnormalflowandfloatedleftorright,enablingtextorinline
elements to wrap around them.
ATME College of Engineering Department of MCA 17
Web Application and Development MMC205
● clear: Prevents elements from wrapping around floated elements.
Float was widely used for layouts before modern techniques but can be tricky and requires clearing floats.
3. Flexbox (Flexible Box Layout)
● Designed for one-dimensional layouts (either row or column).
● Controls alignment, direction, order, and spacing easily.
● Key properties: display: flex;, justify-content, align-items, flex-wrap, flex-grow, order, etc.
Example:
c ss
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Flexbox adapts well to different screen sizes and is great for menus, toolbars, and small layouts.
4. CSS Grid Layout
● Designed for two-dimensional layouts (rows and columns).
● Allows explicit placement of elements in grid cells or areas.
● Key properties: display: grid;, grid-template-columns, grid-template-rows, grid-gap, grid-area, etc.
Example:
c ss
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
ATME College of Engineering Department of MCA 18
Web Application and Development MMC205
Grid is powerful for complex layouts like entire webpages and dashboard designs.
Positioning Properties Explained
● top, right, bottom, left — Define offsets for positioned elements.
● z-index — Controls stack order (which element appears on top).
● float — Floats elements left or right.
● clear — Stops elements from wrapping around floated elements.
CSS3 Flexbox and Grid Layouts
1. Flexbox (Flexible Box Layout)
lexboxisaCSS3layoutmoduledesignedforone-dimensionallayouts,meaningitarrangesitemsinarowor
F
acolumn.Ithelpsalignanddistributespaceamongitemsinacontainer,evenwhentheirsizesareunknownor
dynamic.
Key Concepts
● The flex container is the parent element with display: flex; or display: inline-flex;.
● The flex items are the direct children of the flex container.
Main Properties of Flex Container
Property Description
display: flex; Defines the container as a flex container.
flex-direction Sets the direction of flex items (row, column, row-reverse, column-reverse).
justify-content ligns items horizontally (main axis). Values: flex-start, center, flex-end,
A
space-between, space-around.
align-items ligns items vertically (cross axis). Values: stretch (default), flex-start,
A
center, flex-end, baseline.
flex-wrap Controls wrapping behavior: nowrap (default), wrap, wrap-reverse.
ATME College of Engineering Department of MCA 19
Web Application and Development MMC205
align-content lignsmultiplerowswhenwrappingoccurs(likejustify-contentbutforcross
A
axis).
Main Properties of Flex Items
Property Description
order Controls the order of items (default is 0).
flex-grow Defines how much a flex item will grow relative to others.
flex-shrink Defines how much a flex item will shrink relative to others.
flex-basis Sets the initial size of a flex item before growing or shrinking.
align-self Allows overriding the container’s align-items for individual items.
Example
c ss
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
flex-basis: 150px;
}
Use Cases of Flexbox
● Navigation menus
● Toolbars and buttons alignment
● Responsive layouts where items adjust dynamically
● Simple one-dimensional layouts
ATME College of Engineering Department of MCA 20
Web Application and Development MMC205
2. CSS Grid Layout
SSGridisatwo-dimensionallayoutsystemforbothrowsandcolumns.Itallowsprecisecontroloverlayout
C
by defining grid tracks (rows and columns) and placing items explicitly.
Key Concepts
● The grid container has display: grid; or display: inline-grid;.
● The grid items are the direct children of the grid container.
● The grid consists of rows and columns forming grid cells.
Main Properties of Grid Container
Property Description
display: grid; Defines the element as a grid container.
grid-template-columns Defines the columns and their widths (e.g., 100px 1fr 2fr).
grid-template-rows Defines the rows and their heights.
grid-gap / gap Defines the spacing (gutter) between rows and columns.
grid-auto-flow Controls how auto-placed items are inserted (row, column, dense).
justify-items Aligns items horizontally inside their grid cells.
align-items Aligns items vertically inside their grid cells.
justify-content Aligns the whole grid horizontally within the container.
align-content Aligns the whole grid vertically within the container.
Main Properties of Grid Items
Property Description
grid-column-start The line where the item starts on the column axis.
grid-column-end The line where the item ends on the column axis.
grid-row-start The line where the item starts on the row axis.
ATME College of Engineering Department of MCA 21
Web Application and Development MMC205
grid-row-end The line where the item ends on the row axis.
grid-area shorthand for setting grid row and column start/end
A
lines.
Example
css
.container {
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 100px auto;
grid-gap: 10px;
}
.item1 {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
Use Cases of CSS Grid
● Complex webpage layouts (headers, footers, sidebars, content areas)
● Dashboard designs
● Galleries and image grids
● Two-dimensional responsive layouts
CSS3 Responsive web design
esponsive web design makes your web page look good on all devices. Responsive web design uses only
R
HTML and CSS. Responsive web design is not a program .
ATME College of Engineering Department of MCA 22
Web Application and Development MMC205
Types of responsive
1 . Adaptive : 2 websites/Device Type/Changes Content
Adaptivewebsiteswilldeliverdifferentwebsitesdependingonthedevicetypethatvisitsthesite.Thismeans
the mobile site will be totally different than (and separate from) desktop. Ex- www.google.com ,
www.youtube.com
2 . Fluid Responsive : 1 website/Screen Size/Doesn’t Change Content
Fluidresponsivewebsiteswilldeliveronlyonewebsitedependingonthedevicetypethatvisitsthesite.This
means the mobile site will be totally implemented with desktop content. Ex- postimage.org
Responsive web design
media is a method or rule to apply conditions on different-different screen sizesandstartcontrollingthe
@
design and the layout of full website
Important Properties
ATME College of Engineering Department of MCA 23
Web Application and Development MMC205
ax-width : 600px
m
min-width : 600px
media only screen and(max-width:600px)
@
{
Selector{ properties : value; }
}
ith the proliferation of devices ranging from small smartphones to large desktop monitors, it became
W
essential for websites to adapt their layout and content fluidly to provide a consistent and user-friendly
experience.ResponsiveWebDesignistheapproachthatmakesthispossiblebyallowingwebpagestodetect
theuser’sscreensize,orientation,andresolution,andadjustthelayoutaccordinglywithoutneedingseparate
mobile or desktop versions.
1. Media Queries
edia QueriesarethebackboneofResponsiveWebDesign.TheyallowthebrowsertoapplydifferentCSS
M
styles depending on the device or viewport characteristics.
● M ediaqueriesenabledesignerstospecifystylerulesthatactivateonlyifcertainconditionsaboutthe
device are met, such as screen width, height, or orientation.
● This means the same HTML content can look completely different on a smartphone, tablet, or desktop.
● M ediaqueriesareessentialfortailoringuserinterfacestodiversedeviceswithoutduplicatingcodeor
maintaining multiple versions of a site.
● T hey support a wide range of device features, not just screen size — including resolution (pixel
density), aspect ratio, and even user preferences like color schemes (dark or light mode).
● A common use of media queries is to define breakpoints — specific widths at which the layout
changes dramatically to better suit the screen size.
● B reakpoints often correspond to common device widths (e.g., 320px for phones, 768px for tablets,
1024px+ for desktops).
● T hepowerofmediaqueriesliesintheirabilitytoadaptthesamecontentfluidlyinsteadofrelyingon
fixed layouts.
2. Responsive Design Principles
ATME College of Engineering Department of MCA 24
Web Application and Development MMC205
esponsive Design is guided by several key principles aimed at achieving flexibility and usability across
R
devices:
● Flexible Layouts:
Ratherthanfixedpixelwidths,layoutsshouldbebasedonrelativeunits(likepercentagesorviewport
units) so elementsresizeinproportiontothescreen.Thisallowscontentareas,navigation,andother
components to expand or contract fluidly.
● Flexible Media:
Images,videos,andothermediaelementsshouldscaletofitwithintheircontainingelementswithout
overflowingordistortion.Thispreservesvisualharmonyandensurescontentdoesnotbreakthelayout
on smaller screens.
● Progressive Enhancement:
Designshouldbeginwithasimple,functionalbaselinethatworksonalldevices(especiallylower-end
or older devices), then enhanced with additional styling or features for devices with greater
capabilities. This approach promotes accessibility and performance.
● Content Prioritization:
On smaller devices, limited screen space means only the most important content should be shown
prominently. Designers often reorganize or hide less critical content to reduce clutter and improve
readability.
● Touch-Friendly Interfaces:
Responsivedesignmustalsoconsiderdifferentinputmethods,suchastouchscreensversusmouseand
keyboard, ensuring buttons and links are appropriately sized and spaced.
● Consistent User Experience:
Users expect seamless transitions between devices. Responsive design ensures familiarity in
navigation and functionality across platforms, improving engagement and retention.
3. Fluid Grids
Fluid grids are a fundamental technique in responsive design:
● T raditional fixed grids use pixel-basedwidths,makingthemrigidandpronetobreakingondifferent
screen sizes.
● Fluid grids replace fixed widths with relative measurements like percentages.
● This allows columns and containers to expand and contract proportionally to the viewport width.
ATME College of Engineering Department of MCA 25
Web Application and Development MMC205
● F or example, instead of saying a sidebar is 300 pixels wide, you might say it occupies 25% of the
container’s width.
● Fluid grids help maintain the spatial relationships between page elements regardless of screen size.
● T hisproportionalresizingresultsinabalancedandharmoniouslayoutwhetherviewedonaphoneora
widescreen monitor.
● D esigningwithfluidgridsrequirescarefulconsiderationofminimumandmaximumwidthstoprevent
elements from becoming too small or excessively stretched.
● F luid grids work hand-in-hand with media queries, where breakpoints adjust the number or
arrangement of grid columns based on screen size.
4. Flexible Images
Flexible images are vital for preventing layout issues on varying screen sizes:
● I mages in traditional web design were often fixed in size, causing them to either overflow their
containers or be too small on larger screens.
● F lexible images use CSS properties that allow them to scale within the constraints of their parent
containers.
● Thegoalistomakesureimagesneverexceedthewidthoftheircontainerbutshrinkproportionallyto
maintain aspect ratio.
● This prevents horizontal scrolling caused by large images on small screens.
● I talsoimprovespageloadtimesonmobiledevicesbyenablingtechniquessuchasresponsiveimage
loading, where the browser selects an appropriately sized image based on screen size or resolution.
● F lexibleimagesmaintainvisualbalanceandensurecontentflowsnaturally,improvingaestheticsand
usability.
5. Mobile-First Design Approach
The mobile-first approach to responsive design reverses the traditional desktop-first mindset:
● I nstead ofdesigningawebsiteprimarilyforlargescreensandthenadaptingdown,designersstartby
creating a streamlined experience for the smallest screens first.
ATME College of Engineering Department of MCA 26
Web Application and Development MMC205
● T hisforcesthedesignertofocusoncorecontentandessentialfunctionality,ensuringthatmobileusers
have fast-loading, easy-to-navigate sites.
● A fterestablishingthemobilebaseline,stylesandfeaturesareprogressivelyaddedfortablets,laptops,
and desktops through media queries targeting larger screen widths.
● M obile-first design naturally aligns with performance optimization — mobile devices often have
slower connections and less processing power, so lightweight, efficient code is crucial.
● T his approach leads to simpler, more maintainable CSS, as the base styles serve mobile, with
enhancements layered on top for bigger devices.
● I t also aligns with search engine optimization (SEO) best practices, since mobile usability is a key
ranking factor.
● M obile-first design encourages thinking about user experience fromtheperspectiveoflimitedspace
and touch interaction, making websites more accessible and user-friendly.
CSS Frameworks
CSSFrameworkisapre-preparedlibrarythatprovidesafoundationofready-to-usestylesandcomponents
A
forbuildingwebsitesquicklyandconsistently.FrameworkshelpdevelopersavoidwritingrepetitiveCSScode
by offering:
● Standardized grid systems
● Predefined typography and color schemes
● Common UI components like buttons, forms, modals, navigation bars
● Utility classes for spacing, alignment, visibility, and more
sing a CSS framework speeds up development, ensures design consistency, and improves cross-browser
U
compatibility.
Bootstrap:
ootstrap is the most popular open-source CSS framework originally developed by Twitter. It provides a
B
comprehensive collection of tools to design responsive and mobile-first websites with ease.
Key Features of Bootstrap
ATME College of Engineering Department of MCA 27
Web Application and Development MMC205
● Responsive Grid System:
Bootstrap includes a 12-column flexible grid that adjusts basedonscreensize,enablingresponsive
layouts without writing complex CSS.
● Pre-styled Components:
Awidevarietyofready-to-useUIelementslikebuttons,cards,alerts,modals,navigationbars,forms,
carousels, and more.
● Utility Classes:
Quickclassesformargins,padding,textalignment,colors,displayproperties,andvisibilitythathelp
customize layouts without additional CSS.
● JavaScript Plugins:
Built-in JavaScript/jQuery plugins to add interactivity to components like modals, dropdowns,
tooltips, and carousels.
● Mobile-First Approach:
Designed to work seamlessly on all devices, ensuring a responsive experience.
Bootstrap Components
Bootstrap provides many pre-built UI components, including but not limited to:
● Buttons: Different styles, sizes, and states (primary, secondary, disabled, active).
● Forms: Styled input fields, selects, checkboxes, radio buttons, and validation feedback.
● Navigation Bars: Responsive navbars that collapse into a hamburger menu on small screens.
● Cards: Flexible content containers with headers, footers, images, and text.
● Modals: Popup dialog boxes for alerts, forms, or information.
● Alerts: Styled messages for success, warning, error, and info states.
● Dropdowns: Toggleable menus for navigation or actions.
● Tooltips and Popovers: Hover or focus triggered informational overlays.
These components help developers build complex interfaces without designing every element from scratch.
ATME College of Engineering Department of MCA 28
Web Application and Development MMC205
Bootstrap Utilities
Bootstrap’sutilityclassesallowquickcustomizationandlayoutadjustmentsbyaddingsmallclassesdirectly
in HTML, rather than writing CSS rules:
● Spacing Utilities:
Classes like m-3 or p-2 add margin or padding with predefined sizes.
● Display Utilities:
Control element display with classes such as d-none (hide), d-block, or responsive display like
d-md-flex.
● Text Utilities:
Align text, change colors, transform text with classes like text-center, text-muted, text-uppercase.
● Flexbox Utilities:
Quickly manage flex containers with classes for direction, justification, and alignment.
● Visibility Utilities:
Show or hide elements depending on screen size with classes like visible-sm, invisible-md.
These utilities reduce CSS writing, increase development speed, and improve maintainability.
Customizing Bootstrap with Sass
ootstrapisbuiltusingSass(SyntacticallyAwesomeStylesheets),apowerfulCSSpreprocessorthatextends
B
CSS with variables, nesting, functions, and more.
Why Customize Bootstrap with Sass?
● Modify Variables:
Change Bootstrap’s default colors, fonts, spacing, and breakpoints by overriding Sass variables
instead of writing new CSS.
● Selective Import:
Include onlythepartsofBootstrapyouneed(grid,forms,buttons,etc.),makingyourfinalCSSfile
smaller and faster to load.
● Add Custom Styles:
Use Sass features to write cleaner, more maintainable styles that integrate seamlessly with Bootstrap.
● Better Theming:
Create custom themes by adjusting colors, typography, and component styles in a centralized way
ATME College of Engineering Department of MCA 29
Web Application and Development MMC205
using Sass variables and mixins.
How Customization Works
1. Bootstrap exposes a large number of variables for colors, font sizes, border-radius, and more.
2. You create a custom Sass file where you override these variables with your design preferences.
3. You import Bootstrap’s Sass files after your overrides.
4. Finally, you compile the Sass into a CSS file that includes your customizations.
his method allows deep control over Bootstrap's appearance while still leveraging its powerful grid and
T
components.
Summary
Topic Description
CSS Framework Pre-built libraries for faster, consistent CSS design
Bootstrap Popular mobile-first CSS framework with grid, components, utilities
Bootstrap Components Pre-styled UI elements like buttons, forms, navbars
Bootstrap Utilities Small helper classes for spacing, text, display, flexbox
Customizing with Sass Modify Bootstrap styles via Sass variables and partials
ATME College of Engineering Department of MCA 30
You might also like
- 202005171817289608priyanka WT Cascading Stylesheet CSS Part 2No ratings yet202005171817289608priyanka WT Cascading Stylesheet CSS Part 213 pages
- LO-2 Use CSS Techniques To Create Web Page: 2.1. Styling Element of A Webpage by Using CSS TechniquesNo ratings yetLO-2 Use CSS Techniques To Create Web Page: 2.1. Styling Element of A Webpage by Using CSS Techniques10 pages
- Web Technology CSS Notes - 48837941 - 2025 - 08 - 01 - 18 - 43No ratings yetWeb Technology CSS Notes - 48837941 - 2025 - 08 - 01 - 18 - 4310 pages
- Modern and Advanced CSS Learn Quickly and Smartly - Each Page Is Beautifully Laid Out and Discussed in Detail With Live ExamplesNo ratings yetModern and Advanced CSS Learn Quickly and Smartly - Each Page Is Beautifully Laid Out and Discussed in Detail With Live Examples216 pages
- CSS Selector Cheat Sheet - Top Selectors For Front-End DevelopmentNo ratings yetCSS Selector Cheat Sheet - Top Selectors For Front-End Development15 pages
- 18/07/2025 Mukti Patel, Dept. of Computer Sc. & Engineering 1No ratings yet18/07/2025 Mukti Patel, Dept. of Computer Sc. & Engineering 154 pages
- CSS Selectors - The Full Reference Guide - DEV CommunityNo ratings yetCSS Selectors - The Full Reference Guide - DEV Community27 pages
- A Mostly Complete Guide To Webpack 5 (2020)No ratings yetA Mostly Complete Guide To Webpack 5 (2020)17 pages
- Starting To Write CSS in 2023 Will Be Different - by W3cplus - Medium-1No ratings yetStarting To Write CSS in 2023 Will Be Different - by W3cplus - Medium-1100 pages
- How To Set Up ESLint, Prettier, StyleLint, and Lint-Staged in Next - JsNo ratings yetHow To Set Up ESLint, Prettier, StyleLint, and Lint-Staged in Next - Js24 pages
- Lecture 0 - CS50's Web Programming With Python and JavaScriptNo ratings yetLecture 0 - CS50's Web Programming With Python and JavaScript27 pages
- Comprehensive Project Folder Structure GuideNo ratings yetComprehensive Project Folder Structure Guide2 pages
- Responsive Web Design by Example Beginner S Guide 2nd Edition Thoriq Firdaus DownloadNo ratings yetResponsive Web Design by Example Beginner S Guide 2nd Edition Thoriq Firdaus Download48 pages
- Building Offline Applications with Angular: Develop Reliable, Performant Web Applications for Desktop and Mobile Platforms 1st Edition Venkata Keerti Kotaru - Quickly download the ebook in PDF format for unlimited reading100% (2)Building Offline Applications with Angular: Develop Reliable, Performant Web Applications for Desktop and Mobile Platforms 1st Edition Venkata Keerti Kotaru - Quickly download the ebook in PDF format for unlimited reading77 pages
- ST-Web Development (May 5th-June 6th 2025) PDFNo ratings yetST-Web Development (May 5th-June 6th 2025) PDF37 pages
- Responsive Web Development Web and Mobile Development With Html5 Css3 and Performance Guide Sudheer Kumar Reddy Gowrigari Nakul Pandey PDF Download100% (1)Responsive Web Development Web and Mobile Development With Html5 Css3 and Performance Guide Sudheer Kumar Reddy Gowrigari Nakul Pandey PDF Download73 pages
- Module Title CSS Styling Layout and Responsive DesignNo ratings yetModule Title CSS Styling Layout and Responsive Design5 pages
- Movix Web App - Second Year PBL ProjectNo ratings yetMovix Web App - Second Year PBL Project52 pages
- 75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)No ratings yet75+ Mind-Blowing CSS Animation Examples (Free Code + Demos)36 pages
- Css Visual Dictionary Greg Sidelnikov Instant DownloadNo ratings yetCss Visual Dictionary Greg Sidelnikov Instant Download82 pages
- Bookstore E-Commerce Platform With MERN StackNo ratings yetBookstore E-Commerce Platform With MERN Stack66 pages
