0% found this document useful (0 votes)

9 views367 pages

Complete Web Development

The document provides an overview of HTML, its importance in web development, and its basic structure, including elements, tags, and attributes. It covers topics such as creating headings, lists, links, images, and forms, as well as the differences between inline and block elements. Additionally, it explains the use of various input types and attributes for better user interaction and accessibility.

Uploaded by

satyanarayanaperumallapalli9

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views367 pages

Complete Web Development

Uploaded by

satyanarayanaperumallapalli9

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

Complete

Web
Development
- SATISH KONDURU
• What is HTML?
• HTML stands for Hyper Text Markup
Language.
• It is the standard language for
creating webpages.
Introduction • Describes the structure of a
to HTML webpage using elements and
tags.
• History
• Invented by Tim Berners-Lee in
1991.
• Current version: HTML5.
Why Learn HTML?

Foundation of the • HTML is the backbone of every website.

Web

Easy to Learn • Beginner-friendly.

• Required for web development alongside CSS

Essential Skill and JavaScript.

Career • Frontend Developer, Web Designer, etc.

Opportunities
<!DOCTYPE html>
<html>
Basic <head>

Structure of <title>Page Title</title>

</head>
an HTML <body>
Document <h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Creating HTML
Comments
To create an HTML comment, use the
following syntax:
.
HTML headings are titles or subtitles that you
want to display on a webpage.
<!DOCTYPE html>
<html>

<body>

Creating <h1>This is the Main Heading</h1>

<h2>This is a Subheading</h2>
Headings <h3>This is a Smaller Subheading</h3>
<h4>This is a Sub-Subheading</h4>
<h5>This is a Minor Subheading</h5>
<h6>This is the Smallest Heading</h6>
</body>

</html>
HTML Lists

• HTML lists allow web developers to group a set of

<strong> (Strong Emphasis)

• Purpose: Indicates strong importance or urgency, typically displayed in bold.
• Semantic Meaning: Denotes content with strong importance.
<p>This is <strong>very important</strong> to understand.</p>
Elements

<b> (Bold)
• Purpose: Makes text bold purely for stylistic reasons, without semantic emphasis.
• Semantic Meaning: None (used for stylistic purposes only).

<p>Click on the <b>Start</b> button to begin.</p>

Elements

<i> (Italic)
• Purpose: Makes text italic purely for stylistic reasons, without semantic emphasis.
• Semantic Meaning: None (used for stylistic purposes only).

<p>This word is in <i>italic</i>.</p>

Superscript Tag: <sup>
•Used to raise text above baseline
•Common uses:
•Exponents (x²)
•Ordinal numbers (1st, 2nd)
Superscript •Footnote references

and
Subscript Tag: <sub>
•Lowers text below baseline
Subscript •Common uses:
•Chemical formulas (H₂O)
Ex:
<p>E = mc<sup>2</sup></p>
<p>Water formula: H<sub>2</sub>O</p>
Inline vs. Block Elements in HTML

• HTML elements are classified into

inline and block elements based on
how they behave in the document
layout.
•Definition: Block elements start on a new line and take up the full
width available by default.
•Characteristics:
•Occupy the entire width of their parent container.
•Stack on top of each other (one after another).
•Can contain other block elements, inline elements, or both.
•Typically used for structure (e.g., headings, paragraphs, divs).
•Examples:

1. Block <div>: Generic container.

<p>: Paragraphs.

Elements <h1> to <h6>: Headings.

<ul> and <ol>: Lists.
<section>, <article>, <header>, <footer>, <aside>: Semantic
layout elements.
<table>: Tables.

Each element appears on a

new line.
•Definition: Inline elements do not start on a new line and
only take up as much width as necessary.
•Characteristics:
•Flow alongside other content within a block element.
•Cannot contain block elements, but can contain other
inline elements.
•Typically used for styling and formatting content within
a block.
•Examples:

2. Inline •<span>: Generic inline container.

•<a>: Hyperlinks.

Elements •<strong> and <em>: Text emphasis.

•<b> and <i>: Bold and italic text.
•<img>: Images.
•<input>: Form fields.

Elements appear inline

with the surrounding text.
Creating Links
in HTML
• Links are created using the
<a> (anchor) tag in HTML.
• They are used to navigate
between pages, sections
of a document, or external
resources.
<a href="URL">Link Text</a>

href(Hypertext Reference):
Specifies the destination URL
1. Basic Syntax of the link.

Link Text:
The clickable text displayed
to users.
a) External Links
Links to an external website.
<a href="[Link]
Google</a>
b) Internal Links
Links to another page on the same website.
<a href="/[Link]">About Us</a>
c) Anchor Links (Same Page)

2. Types of <a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>
Links d) Email Links
Opens the user's default email application to send
an email.
<a href="[Link] an
Email</a>
e) Telephone Links
Initiates a phone call when clicked (on mobile
devices).
<a href="[Link] Us</a>
target: Specifies where the link will open.
•_self (default): Opens the link in the same tab.
•_blank: Opens the link in a new tab or window.

<img src="[Link]" alt="A sunset

over the mountains">
width and height

• Specify the dimensions of the

image in pixels (or percentage).
• Helps browsers allocate space for
the image before it loads.
• If you specify only one (e.g.,width),
the browser will calculate the other
dimension automatically to
maintain the aspect ratio.

• <img src="[Link]" alt="A beach"

width="500" height="300">
title

• Adds a tooltip that

appears when the
user hovers over the
image.

<img src="[Link]" alt="A forest"

title="Click for more details">
The most basic text input in HTML is created using the
Basic Text <input> tag with the type="text“ attribute.

Input <input type="text" name="username" id="username"

(<input> tag) placeholder="Enter your username">
type="text": Specifies that the input
field is for text.

name: Defines the name of the input

element, used when submitting form
data.
Key
Attributes: id: Provides a unique identifier for the
input element. This is often used for
styling or scripting.

placeholder: Displays a placeholder

text inside the input box, which
disappears when the user starts typing.
Label for Text
Inputs
• Labels are used to define a user-
readable description for an input
field. They improve accessibility by
associating a description with a
form element.
• The <label> element is used in
conjunction with the for attribute
that matches the input’s id
<label
for="username">Username:</label>
<input type="text" id="username"
name="username"
placeholder="Enter your username">
Benefits of
labels:
• Improves accessibility,
especially for screen
readers.
• Clicking the label focuses
on the associated input
field.
Placeholder
Text
• The placeholder attribute
provides a hint or
instruction to the user
about what information
should be entered in the
text field. It disappears
when the user starts typing.

<input type="text"
name="email"
placeholder="Enter your
email">
• You can make a text input field
mandatory by adding the required
attribute. This ensures that the field
must be filled out before the form can
be submitted.
• <input type="text" name="email"
id="email" required placeholder="Enter
Required your email">

Field • Validation:
• When the form is submitted, browsers
automatically check that the required
field is not empty.
• The user will be prompted with a
validation message if the field is left
empty.
Try this
<form action="">
<label for=“username">Username:</label>
<input
type="text"
name=“username"
id=“username"
required
placeholder="Enter your user
name"
/>
<button type="submit">Submit</button>
</form>
Input with Pattern
Matching
• The pattern attribute allows you to specify a
regular expression to match the input value.
This is commonly used for fields like phone
numbers or zip codes.
• <input type="text"
name="zipcode"
pattern="\d{5}"
title="Enter a 5-digit zip code">
• You can limit the number of characters
a user can enter into a text input by
Maximum using the maxlength and minlength
attributes.
and
Minimum <input type="text" name="username"
maxlength="20" minlength="5"
Length placeholder="Username (5-20
characters)">
• The autofocus attribute automatically
focuses the text input field when the
page loads. This can be helpful in forms
Text Input where you want the user to start typing
right away.
with
Autofocus <input type="text" name="username"
id="username" autofocus
placeholder="Enter your username">
• You can disable or make an input field
read-only.
Disabled • Disabled Input: The input is uneditable
and does not get submitted with the
and Read- form.

Only Inputs <input type="text" name="username"

id="username" disabled value="User123">
Textarea for Multi-Line
Inputs
• For multi-line text input (e.g.,
messages, comments), use the
<text-area> element instead of
<input>

<textarea name="message" rows="4"

cols="50" placeholder="Enter your
message"></textarea>
Input Types Other Than
Text
Email Input: Ensures the entered text is a valid
email format.
<input type="email" name="email"
placeholder="Enter your email">
Password Input: Hides the entered text for
password fields.
<input type="password" name="password"
placeholder="Enter your password">
Number Input: Restricts the input to numeric
values.
<input type="number" name="age" min="18"
max="99" placeholder="Enter your age">
Checkboxes • Checkboxes and radio buttons
are both input elements used to
and radio collect user selections, but they
serve different purposes in HTML
buttons forms
• Checkboxes allow users to select one
or more options from a set of choices.

<form>
<label>
1. Checkboxes <input type="checkbox"
(<input type="checkbox">) name="subscribe" value="newsletter">
Subscribe to newsletter
</label>
</form>
<form>
<label>

Example of a <input type="checkbox"

name="subscribe"
Checked value="newsletter" checked>
Subscribe to newsletter
Checkbox </label>
</form>
Radio buttons allow users to select only one
option from a group of choices. If there are
multiple radio buttons with the same name
attribute, only one can be selected at a time.
<form>
<label>
<input type="radio" name="gender"
2. Radio Buttons value="male">
Male
(<input </label>
type="radio">) <label>
<input type="radio" name="gender"
value="female">
Female
</label>
</form>
• Tables are used to display tabular
data (like spreadsheets or
Tables databases) in HTML. They provide
a way to organize and present
information in rows and columns
1. Basic Table Structure
in HTML
A basic table is constructed using the
<table> element, with rows defined by the
<tr> (table row) element. Inside each row,
data is placed in <td> (table data)
elements, while headers are placed in
<th> (table header) elements.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
Sample Table <td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
A caption can be added to a table
using the <caption> element, typically
placed directly after the <table> tag

2. Adding a Provides a title or description for the

table, displayed above the table.
Table <table>

Caption <caption>Employee Details</caption>

<thead>
<tr>
………
3. Table Borders and Styling

• By default, tables have no visible borders.

• You can use CSS to add borders, padding, and other
styles.
Semantic markup
• Semantic markup refers to the use
of HTML tags that provide meaning
(semantics) about the content they
enclose, making the structure and
content of a web page more
understandable for both humans
and machines (like search engines
and screen readers).
• Semantic elements convey the
purpose and role of the content,
improving accessibility, SEO, and
maintainability.
Common Semantic
HTML Elements
<header>: The <header> element is used to define a header
for a document or section. It typically contains introductory
content or navigational links.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</header>
Common Semantic
HTML Elements
<footer>: The <footer> element defines the footer of a
document or section.
It usually contains information like copyright notices,
links to privacy policies, or contact information.
<footer>
<p>© 2025 My Website. All Rights
Reserved.</p>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</footer>
Common Semantic
HTML Elements
<article>: The <article> element is used to
represent an independent piece of content.
It could be a blog post, news article, or any
content that stands alone.
The <article> element represents a complete,
self-contained piece of content that can be
distributed or reused independently.
<article>
<h2>Understanding Semantic HTML</h2>
<p>Semantic HTML is important for
accessibility, SEO, and maintainability...</p>
</article>
Common Semantic
HTML Elements
<section>: The <section> element is
used to define a section of content
that is thematically related.
It helps divide the content into logical
groupings.
<section>
<h2>About Us</h2>
<p>We are a team of passionate
web developers...</p>
</section>
Common Semantic
HTML Elements
<nav>: The <nav> element is used to define
navigation links.
It groups a set of links, making it clear that these
are for navigating through the website.
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Common Semantic
HTML Elements
<main>: The <main> element is used
to identify the primary content of the
document.
There should be only one <main>
element per page.
<main>
<h1>Welcome to Our Website</h1>
<p>This is the primary content of the
page.</p>
</main>
Common Semantic
HTML Elements
<aside>: The <aside> element is used for content that
is tangentially related to the main content, such as
sidebars, pull quotes, or advertisements.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#article1">How to Use Semantic
HTML</a></li>
<li><a href="#article2">Why SEO Matters</a></li>
</ul>
</aside>
Common Semantic
HTML Elements
<figure> and <figcaption>: The <figure> element is
used to group media content like images, diagrams,
or videos.
The <figcaption> element provides a caption for the
media content.
<figure>
<img src="[Link]" alt="A beautiful view of the
mountains">
<figcaption>
A breathtaking view of the mountains during
sunset.
</figcaption>
</figure>
Common Semantic
HTML Elements
<mark>: The <mark> element is used
to highlight parts of the text, typically
used to emphasize search results or
important information.

<p>HTML is a <mark>markup</mark>
language used to structure content
on the web.</p>
Summary
<header>: Contains the website's heading and navigation.

<nav>: Groups navigation links together.

<main>: Contains the main content of the page, including articles and sections.

<article>: Represents the main content about the blog topic.

<section>: Groups related articles or content together.

<aside>: Contains related or supplementary content like a featured article.

<footer>: Contains footer information, such as copyright.

(Cascading Style Sheet)
CSS?
• CSS stands for Cascading Style
Sheets. It is a stylesheet language
used to control the presentation
(layout, colors, fonts, spacing, etc.)
of HTML (Hyper Text Markup
Language) content on web pages.
• While HTML defines the structure
and content of a webpage, CSS is
responsible for styling and laying out
that content in a visually appealing
way.
Working Within Inline Styles in HTML

• Inline styles refer to CSS rules applied directly to individual

HTML elements using the style attribute.
• Inline styles are useful for quick styling or when you want to
apply a style to a single element without affecting others
on the page.

(Completely NOT Recommended)

Syntax:
<tagname style="property1: value1;
property2: value2;">
Content goes here
</tagname>
Syntax and
Example Eg:
<p style="color: blue; font-size: 20px;">
This is a paragraph with inline styles.
</p>
Writing Internal Styles in HTML

Internal styles (also known as embedded styles) are defined

within the <style> tag in the <head> section of an HTML
document.

Internal styles are typically used when you want to apply CSS
rules to a single document but don't want to affect other
pages.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document with Internal Styles</title>
<style>
/* CSS styles go here */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p{
color: gray;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
External Styles: The Best
Way to Write Styles
• External styles involve writing CSS in a
separate file and then linking it to an
HTML document using the <link> tag.
• This approach is widely considered the
best practice for web development,
especially for larger websites or web
applications.
• External styles allow for better
separation of concerns, reusability,
maintainability, and improved
performance.
How to Link <head>
<link rel="stylesheet" href="[Link]">
an External </head>
CSS File
CSS (Cascading Style Sheets) is used to
describe the presentation (layout, colors,
fonts, spacing, etc.) of a web document
written in HTML.
The "anatomy" of CSS refers to the
components that make up a CSS rule
and how they work together to apply
Anatomy of styles to HTML elements.

CSS Basic Structure of a CSS Rule:

A CSS rule is made up of three main
parts:
[Link]
[Link]
[Link]
• The selector is the HTML element (or
elements) that the CSS rule applies to.
1. Selector Selectors can target specific elements
on the page, classes, IDs, attributes,
and more.
Element Selector (Type Selector): Targets specific HTML tags
(e.g., <p>, <h1>, etc.).
p { color: red; }

Class Selector: Targets elements with a specific class attribute

(prefixed by a dot .)
.class-name { color: blue; }

Types of This targets all elements with class="class-name"

Selectors: ID Selector: Targets elements with a specific id attribute

(prefixed by a #).
#unique-id { color: green; }
This targets the element with id="unique-id“

Universal Selector: Selects all elements in the document.

* { margin: 0; }
This rule applies to all elements on the page.
Types of Attribute Selectors:
1. Basic Attribute Selector:
Description: Selects all elements that have a specified attribute, regardless of its
value.

Syntax:[attribute] { styles }
Example:
<input type="text">
<input type="password">
<input placeholder="Enter text here">
input {
border: 5px solid
blue;
}
2. Attribute Value Selector
Description: Selects elements where the specified attribute
has an exact value.
Syntax: [attribute="value"] { styles }
Ex:
<input type="text">
<input type="password">
<input type="submit">

input[type=“text”] input[type=“password”] input[type=“submit”]

{ { {
border: 5px solid border: 5px solid border: 5px solid
red; green; blue;
} } }
3. Attribute Value Starts With Selector(^=)
Description: Selects elements where the attribute value starts
with a specific string.
Syntax: [attribute^="value"] { styles }
Ex:
<a href="[Link] Website</a>
<a href="[Link] Website</a>
CSS:
[href^="https"] {
color: green;
}
4. Attribute Value Ends With Selector ($=)
Description: Selects elements where the attribute value
ends with a specific string.
Syntax: [attribute$="value"] { styles }

<a href="[Link]">PDF Document</a>

<a href="[Link]">Image</a>

[href$=".pdf"] {
color: red;
}
5. Attribute Value Contains Selector (*=)
Description: Selects elements where the attribute value
contains a specific substring.
Syntax: [attribute*="value"] { styles }
<a href="[Link] Blog</a>
<a href="[Link] Blog</a>

[href *= "blog"] {
font-weight: bold;
}
6. Attribute Value (Whitespace-Separated)
Selector (~=)
Description: Selects elements where the attribute value
contains a specific word (space-separated).
Syntax: [attribute~="value"] { styles }
<div class="box large red"></div>
<div class="box small green"></div>
[class ~= "large"] {
border: 3px solid black;
}
7. Attribute Value (Dash-Separated) Selector (|=)
Description: Selects elements where the attribute value is an exact
match or starts with a specific value followed by a dash (-).
Syntax: [attribute|="value"] { styles }
<div lang="en"></div>
<div lang="en-us"></div>
<div lang="fr"></div>

[lang|="en"] {
font-family: Arial, sans-serif;
}
Result: Both <div lang="en"> and <div lang="en-us"> are styled because
their lang attribute is either an exact match en or starts with "en-"
Working with
background-color
• CSS provides the background-color
property to set the background
color of an element. It is a
fundamental styling property widely
used to enhance the appearance
and readability of a webpage.
Color Values
Named Colors: HSL Colors:
hue, saturation, lightness
div { background-color: red; } div { background-color: hsl(16, 100%, 60%); /* Same as
#ff5733 */; }
HEX Colors:
HSLA Colors:
div { background-color: #ff5733; } hue, saturation, lightness
div { background-color: hsla(16, 100%, 60%, 0.5)/* Same as
RGB Colors: #ff5733 */; }

div { background-color: rgb(255, 87, 51); }

RGBA Colors:

div { background-color: rgba(255, 87, 51, 0.5); /* 50% transparent */}

Changing Fonts with Font-Family
The font-family property in CSS allows you to define the typeface
used for text within an element. It is one of the core properties for
typography in web design, enabling control over the
appearance and style of textual content.
p{
font-family: 'Times New Roman', serif;
}
Generic Font Families
• CSS includes five generic font families as a fallback
in case the specified fonts are unavailable:
1. Serif: Fonts with small strokes or decorative lines at
the ends of characters (e.g., Times New Roman).
2. Sans-serif: Clean fonts without decorative lines
(e.g., Arial).
3. Monospace: Fonts where each character has the
same width (e.g., Courier New).
4. Cursive: Stylized, handwritten-style fonts (e.g.,
Comic Sans MS).
5. Fantasy: Decorative fonts, typically used sparingly.
Specifying
Fonts
a. Font Names Without
Spaces
Fonts without spaces in their
names don't require quotes.

h1 {
font-family: Arial, Helvetica,
sans-serif;
}
Specifying
Fonts

b. Font Names With Spaces Font names containing

spaces must be enclosed in quotes (single or double).
p{
font-family: "Times New Roman", Georgia, serif;
}
Specifying
Fonts

b. Font Names With Spaces Font names containing

spaces must be enclosed in quotes (single or double).

p{
font-family: "Times New Roman", Georgia, serif;
}
Web Fonts

Fonts loaded from external sources

(e.g., Google Fonts).

Always provide a fallback font for compatibility.

The browser will use the fallback font if the primary font
is unavailable.
p{
font-family: 'Roboto', Arial, sans-serif;
}
Combining Fonts

You can combine multiple fonts to create a hierarchy

of fallbacks

body {
font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}
Setting Default Font

Apply the font-family to the <body> element to set a

default font for the entire webpage.

body {
font-family: 'Arial', sans-serif;
}
Best Practices

Always include fallback fonts for better compatibility.

✓ Avoid using too many different fonts on a single
page to maintain consistency.
✓ Use web fonts sparingly to avoid performance issues
due to font loading times.
✓ Consider accessibility and readability when
selecting fonts.
font-size, font-weight,
and font-style
• These three CSS properties are
essential for controlling the
typography of text on a webpage.
They help define the size, weight
(thickness), and style (e.g., italic,
normal) of text, contributing to the
overall aesthetics and readability.
1. Font-Size

• The font-size property specifies the

size of the text.

selector {
font-size: value;
}
Values

Absolute Units:
Fixed sizes that do not scale with the
viewport or parent element.
Common absolute units:
px, pt, cm, mm, in.
p{
font-size: 16px; /* 16 pixels */
}
Values
Relative Units:
Scale relative to the parent element or root font size.
Common relative units:
em, rem, %, vw, vh

h1 {
font-size: 2em; /* 2 times the parent font size */
}

p{
font-size: 100%; /* Same as parent element font size
*/
}

div {
font-size: 10vw; /* 10% of the viewport width */
}

NOTE: We Will Discuss each in detail in upcoming sessions

2. Font-Weight
• The font-weight property controls
the thickness or boldness of the text.

selector {
font-weight: value;
}
Values
Using Numeric Values
Ranges from 100 (thin) to 900 (extra-
bold).
400 is normal weight, and 700 is bold.

h1 {
font-weight: 700; /* Bold text */
}
Values
Using Keywords
normal : Equivalent to 400 (default
text weight).
bold: Equivalent to 700 (bold text).
Bolder: Bolder than the parent
element’s font weight.
Lighter: Lighter than the parent
element’s font weight.
3. Font-Style
• The font-style property defines
whether the text is normal, italicized,
or oblique.

selector {
font-style: value;
}
3. Font-Style
• The font-style property defines
whether the text is normal, italicized,
or oblique.

selector {
font-style: value;
}
Values
a. Normal
Default text style.

p{
font-style: normal;
}
Values
b. Italic:
Renders text in an italic style, if the font
supports it.
p{
font-style: italic;
}
Values
c. Oblique
Slants the text to the right, even if the font doesn’t
have an italic version.

p{
font-style: oblique;
}
Text Alignment in CSS
• Text alignment determines the
horizontal positioning of text content
within its container.
• The text-align property in CSS is used
to control how text is aligned
relative to its container or parent
element.
The text-align Property
• The text-align property aligns text
horizontally within an element.

selector {
text-align: value;
}
Values of text-align
Property
• Left/Start:
Aligns text to the left of the container.
Default alignment for languages
written left-to-right (e.g., English,
Spanish).
p{
text-align: left/start;
}
Values of text-align
Property
• Right/End:
Aligns text to the right of the container.
Commonly used for alignment in right-to-
left languages (e.g., Arabic, Hebrew).

p{
text-align: right/end;
}
Values of text-align
Property
• Center:
Centers the text horizontally within
the container.

p{
text-align: center;
}
Values of text-align
Property
• Justify:
Aligns text so that both the left and
right edges are flush with the
container (like in newspapers or
books).
Adds spacing between words to
achieve this effect.
p{
text-align: justify;
}
Values of text-align
Property
div {
text-align: center;
}

p{
text-align: inherit; /* Will align center,
like the parent div */
}
Line-Height in CSS
• The line-height property in CSS controls
the vertical spacing between lines of
text.
• It is a key factor in improving the
readability and aesthetics of text by
adjusting how densely or loosely lines
are spaced within a block of text.
Values of Line-Height
in CSS
• Normal:
Default value.
The browser calculates the line height
based on the font size (usually 1.2 times
the font size).

p{
line-height: normal; /* Default spacing */
}
Values of Line-Height
in CSS
• Number (Unitless)
A multiplier of the element’s font size.
Example: A line-height of 1.5 means
the line height is 1.5 times the font size.
p{
font-size: 16px;
line-height: 1.5; /* 1.5 x 16px = 24px */
}
Values of Line-Height
in CSS
• Length (With Units)
Specifies an exact value using units
like px, em, rem
The spacing between lines is fixed,
regardless of the font size.

p{
line-height: 24px;
}
Values of Line-Height
in CSS
• Percentage:

Specifies the line height as a percentage

of the font size.
Example: A line-height of 150% is 1.5 times
the font size.

p{
line-height: 150%;
}
Letter-Spacing in
CSS
• The letter-spacing property in CSS
controls the horizontal spacing
between characters in text, also
known as tracking.
• Adjusting letter spacing can enhance
readability, create stylistic effects, or
ensure better alignment in your
design.

p{
letter-spacing: 2px; /* Adds 2 pixels of
space between letters */
}
Word-Spacing in
CSS
• The word-spacing property in CSS
controls the horizontal spacing
between words in text.
• Adjusting word spacing can enhance
readability, create design effects, or
accommodate specific layout
requirements.
p{
word-spacing: 5px; /* Adds 5 pixels of
space between words */
}
Text Shadows
in CSS
• Text shadows in CSS allow you to add shadow
effects to text, giving it depth, dimension, or
stylistic flair.
Syntax:
text-shadow: offset-x offset-y blur-radius color;
•offset-x: Horizontal shadow position.
Positive values move the shadow to the
right.
Negative values move the shadow to the left.
•offset-y: Vertical shadow position.
text-shadow: Positive values move the shadow downward.

offset-x Negative values move the shadow upward.

•blur-radius (optional): The degree of blur
offset-y blur- applied to the shadow.
Default: 0 (no blur, sharp shadow).
radius color; Larger values make the shadow softer and
more diffused.
•color (optional): The color of the shadow.
Can use any valid CSS color format (e.g.,
red, #ff0000, rgba(0, 0, 0, 0.5)).
If omitted, it defaults to the current text color
Basic Shadow
h1 {
text-shadow: 2px 2px 5px gray;
}
Multiple Shadows
You can specify multiple shadows
separated by commas.

h2 {
text-shadow:
2px 2px 4px gray,
-2px -2px 3px lightblue;
}
text-transform
The text-transform property controls
the capitalization or transformation of
text.
Values:
• None (default)
• Uppercase
• Lowercase
• Capitalize
• inherit
text-decoration
• The text-decoration property
specifies the decoration added to
text, such as underlining, overlining,
strikethrough, or a combination of
these.
• It is the combination of 3 properties
• text-decoration-line
• text-decoration-color
• text-decoration-style
text-decoration-line
• Specifies the type of decoration.
• Values:
• None(No Decoration)
• Underline
• Overline
• Line-through
• blink
text-decoration-color
• Specifies the color of the text
decoration.
• Can use any CSS color value (ex:
red, #f00, rgb(255,0,0)
text-decoration-style
• Defines the style of the text
decoration.
• Values:
• Solid (default)
• Double
• Dotted
• Dashed
• wavy
p{
text-decoration: underline red solid;
}

Shorthand p{
Examples text-decoration: underline overline
dashed blue;
}
Grouping Selectors
• Grouping selectors in CSS allows you
to apply the same styles to multiple
elements by combining their
selectors. This reduces redundancy
and makes your code more efficient
and easier to maintain.

selector1, selector2, selector3 {

/* Shared styles */
}
Descendant & Child
Combinators
• In CSS, combinators are used to define
the relationships between selectors and
specify how they should be matched
against the HTML elements in a
document.
• The descendant and child combinators
are among the most commonly used
combinators.
1. Descendant
Combinator( )
• The descendant combinator (a
space between two selectors) is
used to select all elements that are
descendants of a specific element.
A descendant is any element that is
nested within another element,
regardless of how deeply it is
nested.
Syntax

AB{ B is the
Here, A is the
descendant
/* styles */ ancestor
element (direct
} element.
or indirect).
Key Points:
• Matches all descendants (at any
depth) of A that match the selector
B
• This is not limited to immediate
children but applies to all nested
levels.
Example

<div class="container">
<div class="child">
<p class="descendant">This is a paragraph.</p>
</div>
<span class="descendant">This is a span.</span>
</div>

.container .descendant {
color: blue;
}
• The child combinator
selects elements that are
2. Child direct children of a
specified element. It does
Combinator ( > ) not select deeper
descendants, only the
immediate child elements.
A>B{
/* styles */
}
Syntax: A is the parent element.
B is the direct child of A
• Matches only the immediate children of A
that match B.
Key Points: • Does not apply to deeper nested
descendants.
Example
<div class="container">
<div class="child">
.container > .child {
<p>This is a paragraph.</p> color: green;
</div>
<h1> }
This is a Heading.
<div class="child">
<p>This is a paragraph.</p> Difference from Descendant:
</div>
If we use .container .child , it
</h1>
</div>
would also apply to .child
</div> elements nested at any level
inside .container
Adjacent Sibling
Combinator ( + )
The adjacent sibling combinator
selects an element that is
immediately preceded by another
specified element (they share the
same parent).
Syntax

A+B
{
/* styles */
}

A is the preceding sibling.

B is the immediately following sibling.
Example

<div class="container"> .first + .second {

<p class="first">First Paragraph</p> color: red;
<p class="second">Second }
Paragraph</p>
<p class="second">Third Paragraph</p>
</div>
General Sibling Combinator ( ~ )

• The general sibling combinator selects all elements that

are siblings of a specified element, regardless of their
position in the sequence (but they must share the same
parent).
Syntax:

A~B{
/* styles */
}
A is the reference sibling.
B is any sibling of A that appears after it.
Example

<div class="container"> .first ~ .second {

<p class="first">First Paragraph</p> color: red;
<p class="second">Second }
Paragraph</p>
<p class="second">Third Paragraph</p>
</div>
First Child Selector
(:first-child)
The :first-child pseudo-class targets
the first child of its parent.
A:first-child
{
/* styles */
}
Example

<ul> li:first-child {
<li>Item 1</li> font-weight: bold;
<li>Item 2</li> }
<li>Item 3</li>
</ul>
Last Child Selector
(:last-child)
The :last-child pseudo-class targets
the last child of its parent.
A:last-child
{
/* styles */
}
Example

<ul> li:last-child {
<li>Item 1</li> font-weight: bold;
<li>Item 2</li> }
<li>Item 3</li>
</ul>
nth-Child Selector
(:nth-child())

The nth-child() pseudo-class allows

you to target elements based on their
position within their parent, using a
specific formula.

A:nth-child(n) {
/* styles */
}
N can be

A number (e.g., 2) to target the

second child.
A keyword like odd or even.
A formula (e.g., 2n+1).
Example

<ul> li:nth-child(odd) {
<li>Item 1</li> background-color:
lightgray;
<li>Item 2</li>
}
<li>Item 3</li>
<li>Item 4</li> li:nth-child(2) {
</ul> color: red;
}
• The :nth-last-child() pseudo-class is
nth-Last- similar to :nth-child() but counts
elements from the end.
Child
Selector - A:nth-last-child(n) {

:nth-last- /* styles */

child() }
Example

<ul> li:nth-last-child(1) {
<li>Item 1</li> color: purple;
<li>Item 2</li> Font-weight: bold;
<li>Item 3</li> }
</ul>

This rule applies to the last <li> element Item 3 because it is the 1st child from the end.
nth-of-Type Selector(:nth-of-type())

The :nth-of-type() pseudo-class matches elements of a

specific type, based on their position among siblings of the
same type.
A:nth-of-type(n) {
/* styles */
}
Example

<div> p:nth-of-type(2) {
<p>Paragraph 1</p> color: blue;
<span>Span 1</span> }
<p>Paragraph 2</p>
</div>
This rule applies to the last < p > element Paragraph 2 because it is the 2nd Para of type
Compound Selectors
in CSS
• Compound selectors are
combinations of simple selectors
(such as element type, class, ID, or
pseudo-classes) that are used to
target specific elements in CSS.
• These selectors allow you to apply
styles to elements based on multiple
conditions, offering greater
specificity and flexibility.
Types of
Compound
Selectors
• Targets an element based on its type
and class.

Combining /* Selects all <p> elements with the class

Element "highlight" */

Type and [Link] {

color: blue;
Class font-weight: bold;
}
• Targets a specific element type with a
given ID.

Combining /* Selects the <div> with the ID "main-

container" */
Element div#main-container {

Type and ID background-color: lightgray;

padding: 20px;
}
• Targets elements with a specific class
and a pseudo-class.

Combining /* Selects all elements with the class

Class and "button" when hovered */
.button:hover {
Pseudo-Class background-color: green;
color: white;
}
Targets elements based on all three
conditions.
Combining
Element /* Selects <a> elements with the class
Type, Class, "nav-link" when active */
[Link]-link:active {
and Pseudo- color: red;
Class }
Targets elements that have all specified
classes.

Combining
/* Selects elements with both "card" and
Multiple "featured" classes */

Classes .[Link] {
border: 2px solid gold;
}
The Box Model
CSS Box Model
• The CSS Box Model is a fundamental concept in
web design and layout. It describes how
elements on a web page are represented as
rectangular boxes, consisting of the following
components:
1. Content
The actual content of the box, such as text,
images, or other elements.
2. Padding
The space between the content and the box's
border. Padding is transparent and can expand
the size of the box.
3. Border
The edge surrounding the padding. Borders can
have different styles, colors, and widths.
4. Margin
The outermost layer of the box, creating space
between the box and adjacent elements.
Components
of the Box • Content Area
Contains the content inside the box.

Model
Components of
the Box Model
Its size is determined by the width and height properties.
• Padding Area
Adds space between the content and the border.
Set using the padding property (e.g., padding: 10px;).
• Border Area
Encases the padding and content.
Set using the border property (e.g., border: 1px solid
black;).
• Margin Area
Creates space between the element and neighboring
elements.
Set using the margin property (e.g., margin: 20px;).
Example
.box {
<div class="box"> width: 200px; /* Content width */
This is a box. height: 100px; /* Content height */
</div> padding: 20px; /* Space inside the border */
border: 5px solid black; /* Border thickness */
margin: 30px; /* Space outside the border */
background-color: #789;
}
Explanation
• Width & Height: Content
width is 200px, and height is
100px.
• Padding: Adds 20px of space
around the content,
increasing the box's total size.
• Border: Adds 5px thickness
around the padding.
• Margin: Adds 30px space
between the box and
neighboring elements.
Width:
200px (content) + 20px (padding-left) + 20px (padding-right) + 5px
(border-left) + 5px (border-right) = 250px

Height:
100px (content) + 20px (padding-top) + 20px (padding-bottom) + 5px
(border-top) + 5px (border-bottom) = 150px
Box-Sizing Property

• The box-sizing property changes how the total size of a

box is calculated
1. Default Behavior (content-box):
The width/height only includes the content. Padding and
border are added on top of it.
box-sizing: content-box; /* Default value */
Box-Sizing Property

• The box-sizing property changes how the total size of a

box is calculated
1. Border-Box Behavior(border-box):
The width/height includes the content, padding, and
border.
This makes it easier to manage layouts.
box-sizing: border-box;
Example
<div class="content-box">Content-Box Model</div>
<div class="border-box">Border-Box Model</div>

.content-box { .border-box {
width: 200px; width: 200px;
height: 100px; height: 100px;
padding: 20px; padding: 20px;
border: 5px solid black; border: 5px solid black;
background-color: lightcoral;
background-color: lightgreen;
box-sizing: border-box;
box-sizing: content-box;
display: inline-block;
display: inline-block;
}
}
Working with
Borders in the CSS
Box Model
• Borders in the CSS Box Model are
the layer between the content (plus
padding) and the margin. Borders
can significantly affect the
appearance and size of an
element. By customizing borders,
you can enhance your webpage
design.
Key Border Properties in CSS

border:
A shorthand property to define the width, style, and color of
a border.
border: 2px solid blue;
Key Border Properties in CSS

border-width:
Sets the thickness of the border. Can use values in px, em,
or keywords like thin, medium, thick

border-width: 5px or 5em or thin or medium or thick;

border-style:
Defines the style of the border. Common
styles include:
solid
dotted

Key Border dashed

double
Properties in groove

CSS ridge
inset
outset
none (default)

border-style: dashed;
border-color:
Key Border Specifies the color of the border using
color names, hex codes, RGB, or HSL
Properties in values.

CSS border-color: red;

Key Border Properties in CSS

Individual Borders:

You can set different values for each side of the

element using:
border-top: 2px dashed green;
border-top
border-right: 4px solid red;
border-right
border-bottom: 3px dotted blue;
border-bottom
border-left: 5px double black;
border-left
Key Border
Properties in
CSS
Rounded Borders:
Creates rounded corners.
Values can be in px, em or %.

border-radius: 10px; /*
Rounded corners */
border-radius: 50%; /* Circle
for square elements */
The total size of an element is calculated
as…
Content-Box:
Total Width = width + padding-left + padding-right + border-left + border-right
Total Height = height + padding-top + padding-bottom + border-top + border-bottom

Border-Box:
Total Width = width (includes border and padding)
Total Height = height (includes border and padding)
Individual Border Sides
Example <html lang="en">
<head>
Basic Border:
<style>
<html lang="en">
.individual-border {
<head>
width: 200px;
<style>
.basic-border { height: 100px;
width: 150px; border-top: 5px solid red;
height: 100px; border-right: 3px dashed blue;
border: 3px solid black; border-bottom: 8px dotted green;
padding: 10px; border-left: 4px double black;
margin: 20px; padding: 10px;
background-color: lightblue; margin: 15px;
}
background-color: lightyellow;
</style>
}
</head>
</style>
<body>
</head>
<div class="basic-border">Basic Border</div>
<body>
</body>
</html> <div class="individual-border">Different Borders</div>
</body>
</html>
Example Circle Using Border-Radius
<html lang="en">
Border-Radius for Rounded <head>
Corners: <style>
<html lang="en">
<head>
.circle-border {
<style> width: 100px;
.rounded-border { height: 100px;
width: 150px;
border: 4px solid orange;
height: 150px;
border: 4px solid purple; border-radius: 50%; /* Circle */
border-radius: 15px; /* Rounded corners */ background-color: lightgreen;
padding: 20px;
}
background-color: pink;
}
</style>
</style> </head>
</head> <body>
<body>
<div class="circle-border"></div>
<div class="rounded-border">Rounded
Corners</div> </body>
</body>
</html>
</html>
Adding Padding to Elements in
CSS
• Padding is the space between
the content of an element and
its border. It helps create space
inside an element, enhancing
readability and layout design.
• Padding does not affect the
background color or border but
can influence the total size of
the element, depending on the
box-sizing property
Padding (Shorthand):
Sets padding for all four sides of an element in one
declaration.
padding: 10px;
applies 10px padding to the top, right, bottom, and
Key left.

Properties for
Padding Individual Padding Properties:
padding-top: Specifies padding at the top.
padding-right: Specifies padding on the right.
padding-bottom: Specifies padding at the bottom.
padding-left: Specifies padding on the left.
Two Values
padding: 10px 20px;
/* 10px (top/bottom), 20px (left/right) */

Key Three Values:

Properties for padding: 10px 20px 30px;
Padding /* 10px (top), 20px (left/right), 30px (bottom) */

Four Values:
padding: 10px 20px 30px 40px;
/* 10px (top), 20px (right), 30px (bottom), 40px (left) */
Working with
Margins in CSS
• Margins are the outer space
around an element that
separates it from other elements.
• Unlike padding, which is inside the
element's border, margins define
the space outside the element.
• Margins can collapse (under
certain conditions) and allow you
to control spacing between
elements effectively.
margin (Shorthand)
Sets the margin for all four sides (top,
right, bottom, left) in one declaration.
Example:
margin: 10px;
applies 10px margin to all sides.

Key Properties Individual Margin Properties

for Margins • margin-top: Sets the margin at the
top.
• margin-right: Sets the margin on the
right.
• margin-bottom: Sets the margin at the
bottom.
• margin-left: Sets the margin on the left.
Auto Margin
• The value auto can center an
element horizontally if the element
has a defined width.

margin: 0 auto;
/* Center the element horizontally */
What is the display
Property?
• The display property specifies how an
element is displayed in the document
(i.e., its layout behavior).
• It determines whether an element is
• block-level,
• inline-level, element {
• flex,
display: value;
• grid, or
• none, }
• among others.
Display Property
Values
• Block:
• The element takes up the entire
width of its parent container.
• Starts on a new line.
• Examples: <div>, <p>, <h1> by
default.
Display Property
Values
• Inline:
The element only takes as much width
as its content.
Stays on the same line as other inline
elements.
Examples: <span>, <a>, <strong> by
default.
Display Property
Values
• inline-block:
Combines characteristics of inline
and block:
It stays in the same line.
You can set its width, height,
padding, and margin.
Display Property
Values
• none:
The element is completely removed
from the document (no space is
taken).
Margin
Collapsing?
• Margin collapsing is a
behavior in CSS where the
vertical margins of
adjacent or nested
elements combine into a
single margin instead of
adding up.
• This only applies to vertical
margins (top and bottom),
not horizontal margins (left
and right).
When Does
Margin Collapsing
Occur?
• When two block-level elements are adjacent (placed one
after the other), their vertical margins collapse into the larger
of the two.
1. Adjacent • <div style="margin-bottom: 20px; background: lightblue;">Div 1</div>
Siblings • <div style="margin-top: 30px; background: lightgreen;">Div 2</div>
Resulting Margin: 30px (the larger of 20px and 30px).
• When a child element's top margin meets its parent's
top margin, or a child element's bottom margin meets
its parent's bottom margin, the margins collapse into
2. Parent and one.
<div style="margin-top: 20px; background: lightcoral;">
Child Elements <p style="margin-top: 30px;">Child Paragraph</p>
</div>
Resulting Margin: 30px (the larger of 20px and 30px).
• If a block-level element has no content,
padding, or border, its top and bottom
margins collapse into one.
<div style="margin: 20px 0; background:
3. Empty Block lightyellow;"></div>

Elements
Resulting Margin: 20px (instead of 20px + 20px).
How to
Prevent
Margin
Collapsing?
1. Add Padding or Border

• Margins do not collapse if the parent or

adjacent elements have padding or
borders.
<div style="margin-bottom: 20px; border:
1px solid black;">Div 1</div>
<div style="margin-top: 30px; padding:
1px; border: 1px solid black;">Div 2</div>

Resulting Margin: 20px (bottom) + 30px

(top) = 50px.
2. Add Overflow Property

• Margins will not collapse if the parent element has

overflow set to any value other than visible (e.g.,
hidden, auto, or scroll).
<div style="margin-top: 20px; overflow: hidden;">
<p style="margin-top: 30px;">Child Paragraph</p>
</div>

Resulting Margin: 20px (parent) + 30px (child) = 50px.

Use Flexbox or Grid

• We will discuss this later

Min and Max
Width in CSS
• The min-width and max-width
properties are used to control the
minimum and maximum width of an
element, respectively.
• They are useful for creating responsive
designs and ensuring elements don't
shrink or expand too much.
Syntax
element {
min-width: value;
max-width: value;
}
value can be:
Length units: px, em, rem, etc.
Percentage (%): Based on the parent element's width.
Keywords: none (no limit).
What They Do
• min-width:
Ensures the element is not smaller than the specified width.
If the content or container shrinks, it will stop shrinking once
it reaches the min-width.

• max-width:
Ensures the element is not larger than the specified width.
If the content or container expands, it will stop expanding
once it reaches the max-width.
Example
<div style="min-width: 200px; background:
lightblue;">
This box will never be smaller than 200px.
</div>

<div style="max-width: 400px; background:

lightgreen;">
This box will never exceed 400px, even if there's
more space.
</div>

<div style="min-width: 200px; max-width: 400px;

background: lightcoral;">
This box will be between 200px and 400px wide.
</div>
Responsive
Example
<div style="min-width: 50%; max-
width: 90%; background:
lightyellow;">
This box adjusts with the parent
container but stays between 50% and
90% of its width.
</div>
CSS Box
Shadows
• The box-shadow property
in CSS allows you to apply
shadow effects to
elements.
• It can be used to create
drop shadows, glowing
effects, or inset shadows.
Syntax
element {
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
} offset-x (required): Horizontal shadow position.
Positive: Shadow moves to the right.
Negative: Shadow moves to the left.

offset-y (required): Vertical shadow position.

Positive: Shadow moves down.
Negative: Shadow moves up.

blur-radius (optional): The size of the blur effect.

Default: 0 (sharp shadow).
Larger values: Softer and more diffused shadow.

spread-radius (optional): How far the shadow spreads.

Positive: Shadow expands.
Negative: Shadow shrinks.

color (optional): The color of the shadow.

Default: The shadow is transparent if no color is specified.
inset (optional): Creates an inner shadow instead of an outer shadow.
Working With
Pseudo-Classes
• CSS pseudo-classes are used to
define the special state of an
element.
• They enable you to style elements
dynamically based on their state
or interaction with the user
without adding extra classes or
JavaScript.
What is a Pseudo-Class?

A pseudo-class is a It starts with a colon :

keyword added to a and allows you to style
elements based on
selector that specifies
user interaction,
a special state of the
document structure, or
selected element(s).
dynamic changes.
Common Syntax
selector:pseudo-class
{
property: value;
}
Types of Pseudo-
Classes
:hover
Styles an element when the user hovers
over it.
Dynamic
Pseudo-
Classes button:hover {
background-color: lightblue;
}
:focus
Styles an element when it gains focus
(e.g., via tab navigation or clicking).
Dynamic
Pseudo-
Classes input:focus {
border: 2px solid blue;
}
:active
Styles an element when it is in the active
state (e.g., a button is being clicked).
Dynamic
Pseudo-
Classes a:active {
color: red;
}
Structural
Pseudo-
Classes
• Target elements based on
their position within the
DOM hierarchy.
:first-child

Structural Targets the first child of its parent.

Pseudo- p:first-child {
Classes font-weight: bold;
}
:last-child
Targets the last child of its parent.

Structural
Pseudo- p:last-child {
Classes color: green;
}
:nth-child(n)

Targets elements based on their order

Structural within a parent.

Pseudo-
Classes li:nth-child(2) {
background-color: yellow;
}
:nth-of-type(n)

Targets elements of a specific type

Structural based on their order.

Pseudo-
Classes p:nth-of-type(odd) {
color: blue;
}
UI Element States
USED FOR STYLING USER
INTERFACE ELEMENTS.
:checked

Targets checkboxes or radio buttons that

are selected.
UI Element
States input[type="checkbox"]:checked {
outline: 2px solid green;
}
:disabled

Styles elements that are disabled.

UI Element
States input:disabled {
background-color: lightgray;
}
:enabled

Styles elements that are enabled.

UI Element
States button:enabled {
cursor: pointer;
}
Pseudo-Classes
for Links

Used to style hyperlinks.

Pseudo-Classes for
Links
:link

Targets unvisited links.

a:link {
color: blue;
}
Pseudo-Classes for
Links
:visited

Excludes elements that

match the specified selector.

div:not(.highlight) {
background-color:
lightgray;
}
Pseudo-
Elements in
CSS
• CSS pseudo-elements are used to style
specific parts of an element.
Pseudo- • Unlike pseudo-classes, pseudo-
elements let you create and style
Elements elements that don’t exist in the DOM,
such as adding decorative content or
targeting the first line of text.
What is a Pseudo-
Element?
• A pseudo-element is a keyword that
allows you to style a specific part of
an element.
• It is used to add or style additional
elements without modifying the
HTML structure.
• Pseudo-elements start with a double
colon :: (modern syntax) or a single
colon : (for backward compatibility).
::before

Inserts content before the content of the

selected element.

List of CSS Often used to add decorative content or

icons.
Pseudo-
Elements h1::before {
content: " ";
color: red;
}
::after

Inserts content after the content of the

selected element.
Useful for adding small details or
List of CSS decorative elements.

Pseudo-
Elements h1::after {
content: " ";
color: gold;
}
::first-line

Targets the first line of text in a block

element.

List of CSS Useful for typographic effects like drop

caps or bold styling.
Pseudo-
Elements p::first-line {
font-weight: bold;
font-size: 1.2em;
}
::first-letter

Targets the first letter of the first line of a

block element.
Commonly used for creating decorative
List of CSS drop caps

Pseudo-
Elements p::first-letter {
font-size: 3em;
font-weight: bold;
color: crimson;
}
Specificity in CSS
Specificity in CSS

• Specificity is a fundamental concept in CSS

that determines which rules are applied when
multiple rules target the same element.
• It defines the "weight" or priority of a CSS rule,
ensuring that the most specific selector takes
precedence.
• When multiple rules apply to the same
How element, CSS determines which rule to
apply based on specificity.
Specificity • If specificity values are the same, the
Works rule that appears later in the CSS (or in
the document) will be applied.
How is
Specificity
Calculated ?
Specificity is calculated using a four-part value: (a, b, c, d)

• a: Inline styles (e.g., style="color: red;") – Highest priority.

• b: Number of ID selectors (e.g., #header).
• c: Number of class selectors, attributes, or pseudo-classes (e.g.,
.btn, [type="text"], :hover).
• d: Number of type selectors (e.g., div, p, h1) or pseudo-elements
(e.g., ::before, ::after).

Specificity Hierarchy:
1. Inline Styles
2. IDs
3. Classes, Attributes, and Pseudo-Classes
4. Type Selectors and Pseudo-Elements
5. Universal Selector
Examples of Specificity
Selector Specificity Value (a, b, c, d) Explanation
style="color: red;" (1, 0, 0, 0) Inline styles have the highest specificity.
#header (0, 1, 0, 0) One ID selector.
.button (0, 0, 1, 0) One class selector.
One type selector (input) + one attribute
input[type="text"] (0, 0, 2, 0) selector ([type="text"]).
div p (0, 0, 0, 2) Two type selectors (div, p).
div + p (0, 0, 0, 2) Two type selectors (div, p).
One type selector (h1) + one pseudo-
h1::before (0, 0, 0, 2) element (::before).
One ID selector (#header) + one class
#header .button:hover (0, 1, 2, 0) selector (.button) + one pseudo-class
(:hover).
One ID selector (#header) + two type
#header p strong (0, 1, 0, 2) selectors (p, strong).
Avoiding
Specificity Issues
1. Use Consistent Naming
Avoid overly specific selectors that are hard to
override.
2. Use Class Selectors
Classes are reusable and have moderate
specificity.
3. Avoid Inline Styles
Inline styles make maintenance harder.
4. Minimize !important
Only use !important as a last resort.
5. Reset or Normalize CSS
Start with a reset to avoid unexpected
inherited styles.
Specificity Cheatsheet

✓ Inline styles: (1, 0, 0, 0)

✓ ID selectors: (0, 1, 0, 0)
✓ Class selectors, attributes,
pseudo-classes: (0, 0, 1, 0)
✓ Type selectors, pseudo-
elements: (0, 0, 0, 1)
✓ Universal selector: (0, 0, 0, 0)
The Joy of rem
Units
• rem stands for root em and is a relative
What is 'rem' unit in CSS.
• It is relative to the root element's font
in CSS? size (usually the <html> element's font-
size).
• By default, most browsers set the root
<html> font size to 16px.
• This means 1rem = 16px unless the

How rem <html> font size is modified.

• If you change the root font size (e.g.,
Works html { font-size: 10px; }), then 1rem =
10px.
• Recommended:
font-size: 62.5% (10px / 16px)
html {
font-size: 62.5%; /* 1rem = 10px */
}
Common
use case body {
font-size: 1.6rem; /* 16px */
}
• The em unit is a relative unit in CSS.
• It is relative to the font size of its nearest
What is em parent element.
• If no parent font size is explicitly
unit? defined, it defaults to the browser's
base font size (typically 16px).
html {
font-size: 16px; /* 1rem = 16px */
}

Common button {
Use case font-size: 1rem; /* 16px */
padding: 1em; /* Relative to button
font size (16px) */
}
vw and vh are relative
length units in CSS based on
the viewport size

vw and vh vw (Viewport Width): 1vw is

equal to 1% of the
Units viewport's width.

vh (Viewport Height): 1vh is

equal to 1% of the
viewport's height.
Calculation of vw:
•If the viewport width is 1200px:
•1vw = 1% of 1200px = 12px.
How vw •50vw = 50% of 1200px = 600px.
and vh
Calculation of vh:
Work
•If the viewport height is 800px:
•1vh = 1% of 800px = 8px.
•100vh = 100% of 800px =
800px.
Importance of vw and vh Units
Responsive Design:
They allow elements to scale dynamically based on the viewport size
without relying on fixed breakpoints.

Full-Screen Elements:
Perfect for creating full-page sections or components that span the entire
screen width or height.

Viewport-Dependent Layouts:
Ideal for designing layouts that need to adapt to different screen
dimensions, especially in modern web and mobile designs.

Consistency Across Devices:

Ensures that the design looks proportionate regardless of the device's
resolution or aspect ratio.
Common Use Cases

Full-Screen Sections Hero Sections:

section { .hero {
width: 100vw; /* Full width of the height: 50vh; /* Half the viewport height
viewport */ */
height: 100vh; /* Full height of the display: flex;
viewport */ align-items: center;
background-color: lightblue; justify-content: center;
} background-color: #333;
color: #fff;
}
Which CSS Units
Should You Use?
Examples:
px (pixels), cm (centimeters), mm
(millimeters), in (inches), pt (points), pc
(picas).

When to Use:

Absolute 1. Fixed, Precise Dimensions:

Use absolute units like px when you
Units need exact sizes that won't scale (e.g.,
borders, icons, or pixel-perfect designs).

2. Device-Independent Design:
Avoid cm, mm, in, pt, and pc as
they depend on the physical screen
resolution and aren't practical for web
design.
Relative Units

Examples: div {
%, em, rem, vw, vh, vmin, vmax.
width: 80%;
/* 80% of the parent
% (Percent) container */
Relative to the size of the parent }
element for widths, heights, margins, or
paddings.
Use for fluid layouts that adjust based
on the parent container.
em:
Relative to the font size of the parent element.
Use for component-specific scaling, such as padding,
margins, or typography adjustments that depend on the
component’s font size.

button {
font-size: 1em; /* Equal to parent font size */
padding: 0.5em 1em; /* Scales with font size */
}
rem:
Relative to the root element’s font size.
Use for global consistency, especially for font sizes,
spacing, and layout dimensions.

html {
font-size: 10px; /* 1rem = 10px */
}
h1 {
font-size: 2rem; /* 20px */
}
Working with Floats in
CSS
The float property is an older CSS
technique primarily used for
positioning elements within a
container.
Floats are still relevant for certain use
cases, but they have largely been
replaced by Flexbox and CSS Grid for
modern layouts.
What is the float
Property?
The float property is used to position an
element to the left or right within its
containing block, allowing inline elements
(like text) to wrap around it.
Values of float:
left: The element floats to the left of its
container.
right: The element floats to the right of its
container.
none (default): The element does not float.
inherit: Inherits the float property from its
parent.
Common Use Cases
for Floats
• Text Wrapping Around Images:
Floats are commonly used to wrap
text around an image.

<div>
<img src="[Link]" alt="Example"
style="float: left; margin-right: 10px;">
<p>This is some text that wraps
around the floated image.</p>
</div>
Two-Column Layouts
(Legacy Method):
Floats were often used to create side-
by-side layouts before Flexbox and
Grid became standard.
<div>
<div style="float: left; width:
50%;">Left Column</div>
<div style="float: right; width:
50%;">Right Column</div>
</div>
• When an element is floated, it is
The Problem removed from the normal document
flow, which can cause the parent
with Floats: container to collapse if it contains only
floated elements.
Working With Background Images in CSS
• To add a background image to an
element, you use the background-image
property in CSS

selector {
background-image: url('image-path');
Basic Syntax }

for Ex:
div {
Background width: 500px;
Images height: 300px;
background-image: url("[Link]");
background-size: cover; /*or contain*/
}
Defines the starting position of the
background image. The default is 0% 0%,
which means the top-left corner of the
element.

Background You can use values in pixels (px),

Position percentages (%), or keywords like top,
right, bottom, left.

background-position: center; /* or top

left, right bottom, etc. */
Background Repeat

Defines whether the background image should repeat (tile)

or not.
repeat: The default value; the image will repeat both
horizontally and vertically.
no-repeat: The image will not repeat.
repeat-x: The image will repeat only horizontally.
repeat-y: The image will repeat only vertically.
Background-repeat: repeat;
Example

body {
background-image: url('[Link]');
background-repeat: no-repeat/repeat;
background-position: center/left/right;
background-size: cover/contain;
background-attachment: fixed/scroll;
}
Linear Gradients in
CSS
• Linear gradients in CSS are a way to
create smooth color transitions
along a straight line.
• They are a part of the background-
image property and allow you to
blend multiple colors in various
directions.

background-image:
linear-gradient(direction,
color-stop1, color-stop2, ...);
Specifying
Directions
Using Keywords
to top: Gradient goes from bottom to top.
to bottom: Gradient goes from top to
bottom (default).
to left: Gradient goes from right to left.
to right: Gradient goes from left to right.

div {
background: linear-gradient(to right, red,
blue);
}
You can specify angles in degrees (0deg
to 360deg).
0deg: Gradient starts from the top.
90deg: Gradient starts from the left.
180deg: Gradient starts from the bottom.
Using Angles
div {
background: linear-gradient(45deg,
red, yellow, blue);
}
Using Color Stops

Color stops define where each color

appears and transitions.
You can use percentages or absolute
values (e.g., px) to control their
positions.

body{
background: linear-gradient(to right,
red 0%, yellow 50%, blue 100%);
}
• The repeating-linear-gradient function
creates patterns by repeating the
gradient.
Repeating div {
Linear background: repeating-linear-
gradient(45deg, red, yellow 20px, blue
Gradients 40px);
}
Transparent
Gradients
• You can use transparent as a color
to create gradients that fade into
transparency.

div {
background: linear-gradient(to
bottom, rgba(255, 0, 0, 1), rgba(255,
0, 0, 0));
}
Multi-Color
Gradients
• You can add more than two colors
to a gradient.
div {
background: linear-gradient(to right,
red, yellow, green, blue);
}
Gradient with Text

• You can apply linear gradients to text using

SATISH KONDURU background-clip: text and

color: transparent.
h1 {
font-size: 50px;
font-weight: bold;
background: linear-gradient(to right, gold,
crimson);
-webkit-background-clip: text;
color: transparent;
}
button {
padding: 10px 20px;
font-size: 16px;

Example with border: none;

Gradient color: white;

background: linear-gradient(to right,
button #ff7e5f, #feb47b);
border-radius: 5px;
cursor: pointer;
}
header {
height: 100px;
background: linear-gradient(90deg,
#1e3c72, #2a5298);
Gradient color: white;

Header text-align: center;

line-height: 100px;
font-size: 24px;
}
Fancy CSS Filters

• CSS filters are powerful tools for

applying visual effects to HTML
elements. They can be used to
enhance images, text, or other
elements, giving them a polished or
artistic look.
• Filters can apply effects like blur,
brightness, contrast, grayscale, and
more.
The filter property is applied to an
element, and you can chain multiple
filters for combined effects.

CSS Filter
Syntax selector {
filter: effect1(value) effect2(value);
}
• Creates a blurring effect. The
higher the value, the more blur is
applied.

blur() img {
filter: blur(10px);
}
• Adjusts the brightness of an
element.

• 1 is the default value (original

brightness).
• Values above 1 increase
brightness() brightness, and values below 1
decrease it.

img {
filter: brightness(0.8);
}
• Adjusts the contrast of an
element.

• 1 is the default.
• Values above 1 increase
contrast, and values below 1
contrast() decrease it.

img {
filter: contrast(1.2);
}
• Converts the element to
grayscale.
• 0 is full color (default).
• 1 is fully grayscale.

grayscale()
img {
filter: grayscale(1);
}
Other filters

invert(): opacity()
Inverts the colors of an element. Adjusts the transparency of an
0 is the default (no inversion). element..
1 is fully inverted. 1 is fully opaque
0 is fully opaque.

saturate(): sepia():
Controls the intensity of colors in
Applies a sepia (brownish) tone
the element.
1 is the default (original saturation). to the element.
Values above 1 increase 0 is the default (no effect)
saturation, and values below 1 decrease it. 1 applies a full sepia effect.
Positioning in CSS
Positioning in • CSS positioning allows you to control
the placement of elements in a web
CSS page. It is one of the core concepts in
web design and development.
CSS Position
Property
The position property specifies how
an element is positioned in the
document. Its values include:

static (default)
relative
absolute
fixed
sticky
• Static
Values of Default value for all elements.
Position Elements are positioned in the normal

Property document flow.

Cannot use top, right, bottom, or left.
Values of Position
Property
• Relative
Positions the element relative to its normal
position.
Use top, right, bottom, and left to move the
element..

div {
position: relative;
top: 20px; /* Moves the element 20px down */
left: 10px; /* Moves the element 10px to the
right */
}
Values of Position Property

• Absolute
Positions the element relative to its
nearest positioned ancestor.
If no ancestor has a position other
than static, the element is positioned
relative to the <html> element.
div {
position: absolute;
top: 50px;
left: 100px;
}
Values of Position Property

• Fixed
Positions the element relative to the
viewport.
The element does not move when
scrolling.

div {
position: fixed;
bottom: 10px;
right: 10px;
}
Values of Position Property

• Sticky
A hybrid between relative and
fixed.
The element is treated as relative
until a certain scroll position is
reached, after which it becomes
fixed.

div {
position: sticky;
top: 0; /* Sticks to the top of the
container */
}
Used with relative, absolute, fixed, and
sticky positioning:

Offset top: Distance from the top edge.

Properties right: Distance from the right edge.
bottom: Distance from the bottom edge.
left: Distance from the left edge.
• Specifies the stack order of elements.
• Higher z-index means the element appears in
front of others.
div {
position: absolute;
Z-Index z-index: 10; /* Higher number = Higher priority
*/
}
• Positioned Ancestors: For absolute positioning
to work, an ancestor must have position:
Positioning relative, absolute, or fixed.

Contexts • Viewport: For fixed, the viewport acts as the

positioning context.
Transitions in CSS

• CSS transitions allow smooth

changes between CSS property
values over a specified duration.
• They enhance user experience by
making visual changes appear
more natural and engaging.
What are CSS Transitions?

• CSS transitions enable the gradual change of CSS

property values instead of an immediate shift.
Without Transition: With Transition:
.box:hover { /* With Transition */
background-color: red; .box {
} transition: background-color 0.5s ease-in-out;
}
.box:hover {
background-color: red;
}
The Transition Property

selector {
transition: property duration timing-function delay;
}
Parameters

Parameter Description
property The CSS property to animate (e.g., width,
opacity).

duration The time (in seconds or milliseconds) for the

transition to complete.
Controls the transition speed pattern (ease,
timing-function
linear, ease-in, etc.).
delay Specifies a delay before the transition starts.
transition-property
.box {
transition-property: background-color, width;
}

Common properties that support transitions:

background-color
color
width, height
opacity
transform
Properties that do not support transitions:

• Display
• Visibility
• position
• Defines how long the transition will
take.
.box {
transition- transition-duration: 2s;
duration }
Units: s (seconds), ms (milliseconds)
Default: 0s (instant change)
Timing Function Description
Starts slow, speeds up, then
ease (default)
slows down.
linear Constant speed throughout.

ease-in Starts slow, then speeds up.

ease-out Starts fast, then slows down.

transition- ease-in-out
Starts slow, speeds up, then
slows down.

timing-function cubic-bezier(n,n,n,n)
Custom speed curve using
Bezier curves.
• Delays the start of the transition.

transition- .box {
transition-delay: 1s;
delay }
• You can animate multiple properties
by separating them with commas.
Using .box {
Multiple transition: background-color 1s ease,
width 0.5s linear;
Transitions }
.box {
transition: all 0.5s ease;
}
Using all for .box:hover {
Global background-color: red;

Transitions width: 200px;

height: 200px;
}
Common Mistakes

Using display: none; (doesn’t work with transitions).

Forgetting to define a transition-duration.
Animating too many properties at once (hurts performance).
Instead of display: none;, use opacity: 0; and visibility: hidden;
CSS Transforms

• CSS transforms allow you to modify

an element’s appearance by
changing its shape, size, position,
and orientation.
• Transformations can be 2D or 3D,
enabling smooth effects like
rotation, scaling, skewing, and
translating.
• The transform property lets
you visually manipulate an
element without affecting
the layout.
selector {

What is transform: function(value);

transform in }
Ex:
CSS? .box {
transform: rotate(45deg);
}
2D Transforms
• 2D transformations operate on the X
and Y axes.
1. translate(x, y)
Moves an element without
affecting other elements.
.box {
transform: translate(50px, 100px);
/* Move right 50px, down 100px */
}
2D Transforms
• 2D transformations operate on the X
and Y axes.
1. rotate(angle)
Rotates an element clockwise
or counterclockwise.
.box {
transform: rotate(45deg); /* Rotate
45 degrees */
}
2D Transforms
• 2D transformations operate on the X
and Y axes.
1. scale(x, y)
Resizes an element along X and
Y axes.
.box {
transform: scale(1.5, 2);
/* 1.5x wider, 2x taller */
}
2D Transforms
• 2D transformations operate on the X
and Y axes.
1. skew(x, y)
Tilts an element along the X
and Y axes.
.box {
transform: skew(30deg, 10deg);
}
Combining Multiple
Transforms
• You can apply multiple transformations
together
.box {
transform: translate(50px, 50px) rotate(45deg)
scale(1.5);
}
• Defines the point around which
transformations occur.
.box {

transform- transform-origin: top left;

transform: rotate(45deg);
origin }
Default: center
Other values: top, bottom, left, right, Xpx
Ypx
• Gives elements a depth effect in 3D
transformations.
.container {
perspective: 500px;
perspective }

for 3D Depth .box {

transform: rotateY(45deg);
}
Lower values (perspective: 200px;) → More depth.
Higher values (perspective: 1000px;) → Flatter look.
Ex code for
backface-visibility
in notes section
Flex-Box
CSS Flexbox
(Flexible Box
Layout)
• CSS Flexbox (Flexible Box Layout) is
a layout model designed to align
and distribute elements efficiently
within a container, even when their
size is dynamic.
• It simplifies complex layouts that
require flexible sizing and
alignment.
Introduction to
Flexbox
• Flexbox provides an
efficient way to lay out,
align, and distribute space
among items in a
container.
• It is primarily designed for
one-dimensional layouts
(either row or column).
• It overcomes limitations of
traditional CSS layouts
(float, table, inline-block).
Term Description
The parent element that holds flex items.
Flex Container Declared with display: flex or display: inline-
flex.
The child elements of the flex container that
Flex Items
will be arranged.
The primary axis along which flex items are laid
Main Axis
out (horizontal by default).
Cross Axis The perpendicular axis to the main axis.
Main Start/Main End The beginning and end of the main axis.
Cross Start/Cross End The beginning and end of the cross axis.

Basic Flexbox Terminology

.container {
display: flex; /* Enables flexbox */

Creating a }

Flexbox By default:
Layout The main axis is horizontal (left to right).
Items are arranged in a row.
flex-direction

• Controls the direction of flex items.

.container {
flex-direction: row; /* Default: Items arranged from
left to right */
flex-direction: row-reverse; /* Items arranged from
right to left */
flex-direction: column; /* Items arranged from top
to bottom */
flex-direction: column-reverse; /* Items arranged
from bottom to top */
}
flex-wrap

• Controls whether items should wrap or

not.
.container {
flex-wrap: nowrap; /* Default: No
wrapping, items stay in one line */
flex-wrap: wrap; /* Items wrap to next
line if necessary */
flex-wrap: wrap-reverse; /* Items wrap in
reverse order */
}
flex-flow

• A shorthand for flex-direction and flex-

wrap.
.container {
flex-flow: row wrap;
/* Equivalent to
flex-direction: row;
flex-wrap: wrap;
*/
}
justify-content

• Aligns items along the main axis.

.container {
justify-content: flex-start; /* Default: Items start
from left */
justify-content: flex-end; /* Items aligned to right */
justify-content: center; /* Items centered */
justify-content: space-between; /* Space
between items */
justify-content: space-around; /* Space around
items */
justify-content: space-evenly; /* Equal space
around items */
}
align-items

• Aligns items along the cross axis.

.container {
align-items: stretch; /* Default: Items stretch
to fill container */
align-items: flex-start; /* Items aligned to
start of cross axis */
align-items: flex-end; /* Items aligned to end
of cross axis */
align-items: center; /* Items centered on
cross axis */
align-items: baseline; /* Items aligned along
their text baselines */
}
align-content
• Controls the alignment of multiple lines in a flex
container (if wrapping is enabled).
.container {
align-content: flex-start; /* Lines align to start */
align-content: flex-end; /* Lines align to end */
align-content: center; /* Lines align to center */
align-content: space-between; /* Space
between lines */
align-content: space-around; /* Space around
lines */
align-content: stretch; /* Default: Lines stretch to
fill container */
}
Flex Item
Properties
• These properties apply to
individual flex items.
order

• Specifies the order of flex items.

.item {
order: 2; /* Default is 0. Lower
values appear first */
}
flex-grow

• Defines how much an item should

grow relative to others.
.item {
flex-grow: 1; /* Item will grow to fill
available space */
}
Default is 0 (no growth).
If multiple items have different values,
they grow relative to each other.
flex-shrink

• Defines how much an item should

shrink relative to others.
.item {
flex-shrink: 2; /* Item shrinks twice as
much as others */
}

Default is 1 (shrinks if needed).

0 prevents shrinking.
flex-basis
• Defines the initial size of a flex item
before growth/shrink.
.item {
flex-basis: 200px; /* Item will take
200px before growing or shrinking */
}
Flex (Shorthand)

• A shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
flex: 1;
/* Equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
flex: 2 1 100px; /* Custom values */
}
align-self

• Overrides align-items for a single item.

.item {
align-self: flex-start; /* Aligns this item to the start */
align-self: flex-end; /* Aligns this item to the end */
align-self: center; /* Centers this item */
align-self: stretch; /* Default: Stretches to fill */
}
Practical Examples
CSS Media
Queries
Introduction to
Media Queries
• Media queries are a feature in
CSS that allow you to apply
different styles based on the
characteristics of the device or
viewport.
• They are primarily used for
responsive web design (RWD) to
ensure that web pages adapt to
different screen sizes, resolutions,
and orientations.
Why Use Media
Queries?
• To create responsive designs for
different screen sizes (mobile,
tablet, desktop).
• To optimize the layout for better
readability and usability.
• To provide device-specific
experiences (e.g., dark mode, high
contrast).
• To ensure better cross-browser and
cross-device compatibility.
Basic Syntax of
Media Queries
A media query consists of:

• @media keyword
• A media type (optional)
• One or more media features (conditions)
• CSS rules inside {}

@media (media-type) and (condition) {

/* CSS rules */
}
Media Types

Media Type Description

all Default. Applies styles to all devices.
Applies styles when printing or in print preview
print
mode.
Applies styles only on screen-based devices
Screen
(monitors, tablets, mobile).
Used for screen readers and other speech-
speech
based interfaces.
Example: Print
Styles
@media print {
body {
font-size: 14pt;
color: black;
background: none;
}
}
The background is removed, and the
font size is adjusted when the page is
printed.
Common Media
Features
• Media features allow us to define
conditions for applying styles.
These include screen width,
height, resolution, orientation, and
more.
Feature Description

Width and max-width

Applies styles when the viewport
width is less than or equal to the
Height given value.

• Control styles based on the Applies styles when the viewport

viewport width or height. min-width width is greater than or equal to
the given value.

@media (max-width: 600px) {

Applies styles when the viewport
.container {
max-height height is less than or equal to the
flex-direction: column; given value.
}
} Applies styles when the viewport
If the viewport width is 600px or smaller, items
stack in a column layout.
min-height height is greater than or equal to
the given value.
Orientation:
Controls styles based on the device orientation .
Feature Description
Applies when the height is greater than the
orientation: portrait
width.
Applies when the width is greater than the
orientation: landscape
height.

@media (orientation: landscape) {

body {
background-color: lightgreen;
}
}
The background turns light green in landscape
mode.
Aspect Ratio:
Applies styles based on the width-to-height ratio.

Feature Description
Applies if the aspect ratio is greater than or
min-aspect-ratio: x/y
equal to x/y.
Applies if the aspect ratio is less than or equal
max-aspect-ratio: x/y
to x/y.

@media (min-aspect-ratio: 16/9) {

.video-container {
max-width: 800px;
}
}
If the screen aspect ratio is 16:9 or wider,
the .video-container width is limited.
Combining Media Queries

• You can combine multiple conditions using and , (comma), not.

@media (min-width: 600px) and (max- @media (max-width: 500px), (orientation: portrait) {
width: 900px) { body {
body { background-color: pink;
background-color: yellow; }
} }
}
@media not screen and (max-width:
700px) {
body {
background-color: white;
}
}
/* Default Styles (Desktop) */
body {
font-size: 18px;
}
/* Tablet (600px to 1024px) */

Responsive @media (max-width: 1024px) {

body {

Web Design }
font-size: 16px;

(RWD) }

Example
/* Mobile (Up to 600px) */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Mobile-First vs. Desktop-First Approach
• Mobile-First (Recommended)
Start with mobile styles first and add styles for larger screens using min-width.
/* Mobile styles */
body {
font-size: 14px;
}

/* Tablet */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

/* Desktop */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
Mobile-First vs. Desktop-First Approach
Desktop-First
• Start with desktop styles and use max-width for smaller screens.

• /* Mobile styles */
body {
font-size: 14px;
}

/* Tablet */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

/* Desktop */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
CSS Grid
CSS Grid Layout

• CSS Grid is a powerful layout system

in CSS that allows you to create
complex, responsive web layouts
with ease.
• It provides a two-dimensional grid-
based layout system, meaning you
can control both rows and
columns.
Basics of CSS Grid

• CSS Grid works by defining a container

as a grid and then placing child
elements (grid items) into rows and
columns.
Creating a Grid Container
To use CSS Grid, you must first define a
container as a grid using
display: grid;

.container {
display: grid;
}
Defining Rows and Columns

• Using grid-template-columns and grid-template-rows

• These properties define the number of columns and rows in the grid.
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns of 200px each */
grid-template-rows: 100px 100px; /* 2 rows of 100px each */
gap: 10px; /* Space between grid items */
}
Example: Fixed-sized Grid

<div class="container"> .container {

display: grid;
<div class="item">1</div> grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;
<div class="item">2</div> gap: 10px;

<div class="item">3</div> }

<div class="item">4</div> .item {

background: lightblue;
<div class="item">5</div> padding: 20px;

<div class="item">6</div> text-align: center;

font-size: 20px;
</div> }
Flexible Grid using
fr Unit
• Instead of fixed pixel values, you
can use the fr (fractional unit),
which distributes space
dynamically.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /*
Three columns: middle one is twice as
big */
grid-template-rows: 100px 100px;
}
Placing Items
in the Grid
grid-column and grid-row
.item1 {
grid-column: 1 / 3; /* Spans
from column 1 to column 3 */
grid-row: 1 / 2; /* First row */
}
This makes .item1 span
across two columns.
Manually Positioning Items

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}

.item1 {
background: red;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Auto Placement &
grid-auto-flow
.container {
display: grid;
grid-template-columns: repeat(3,
1fr);
grid-auto-rows: minmax(100px,
auto);
grid-auto-flow: row;
}
This means new rows are
automatically added as needed.
Instead of manually positioning items, you can use grid area names.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
}

Naming Grid .header {

Areas }
grid-area: header;

.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
• CSS Grid makes it easy to create
responsive layouts.
Using minmax()
.container {

Responsive display: grid;

grid-template-columns: repeat(auto-fill,
Grids minmax(150px, 1fr));
}
This ensures each column is at least
150px wide but can grow.
@media (max-width: 600px) {
.container {

Media grid-template-columns: 1fr;

}
Queries }
This converts the grid into a single
column layout on small screens.
• Aligning Items Horizontally & Vertically
.container {
display: grid;

Aligning align-items: center; /* Aligns items

vertically */
Items in Grid justify-items: center; /* Aligns items
horizontally */
}
This centers all grid items.
Aligning the Entire
Grid
.container {
display: grid;
justify-content: center; /* Center grid
horizontally */
align-content: center; /* Center grid
vertically */
}
JavaScript
JavaScript is a high-level,
interpreted programming
language.

Introduction to It is single-threaded, dynamically

JavaScript typed, and uses a prototype-
based object model.

Runs in the browser (client-side)

and can also run on the server-
side ([Link]).

HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
60 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
70 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
68 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
67 pages
HTML Basics: Structure and Tags
No ratings yet
HTML Basics: Structure and Tags
67 pages
Comprehensive HTML Guide for Beginners
No ratings yet
Comprehensive HTML Guide for Beginners
24 pages
Understanding HTML and Web Design Basics
No ratings yet
Understanding HTML and Web Design Basics
126 pages
Introduction to XHTML and HTML Basics
No ratings yet
Introduction to XHTML and HTML Basics
15 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
67 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
75 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
67 pages
HTML5 Basics for Web Development
No ratings yet
HTML5 Basics for Web Development
8 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
66 pages
HTML Basics: Tags, Structure, and Forms
No ratings yet
HTML Basics: Tags, Structure, and Forms
67 pages
HTML Basic Tags and Examples
No ratings yet
HTML Basic Tags and Examples
64 pages
WebTechnology Unit II Notes
No ratings yet
WebTechnology Unit II Notes
16 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
58 pages
Scripting Languages for Web Development
No ratings yet
Scripting Languages for Web Development
30 pages
Introduction to HTML Basics and History
No ratings yet
Introduction to HTML Basics and History
31 pages
HTML Lecture Notes Overview
No ratings yet
HTML Lecture Notes Overview
58 pages
Web Programming
No ratings yet
Web Programming
18 pages
MERN Stack Training Material
No ratings yet
MERN Stack Training Material
156 pages
HTML Anchor Tag for Links
No ratings yet
HTML Anchor Tag for Links
8 pages
HTML Basics from Pythonista Planet
No ratings yet
HTML Basics from Pythonista Planet
16 pages
Creating Basic HTML Files
No ratings yet
Creating Basic HTML Files
91 pages
HTML Basics: Tags, Formatting, and Links
No ratings yet
HTML Basics: Tags, Formatting, and Links
29 pages
HTML Basics: Structure, Tags, and Forms
No ratings yet
HTML Basics: Structure, Tags, and Forms
29 pages
Introduction to Web Designing
No ratings yet
Introduction to Web Designing
29 pages
Understanding HTML and Web Structure
No ratings yet
Understanding HTML and Web Structure
102 pages
Simple HTML Document Structure
No ratings yet
Simple HTML Document Structure
18 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
42 pages
HTML Lists, Links, Images, and Media
No ratings yet
HTML Lists, Links, Images, and Media
92 pages
HTML Website Design: Tags, Forms, & Tables
No ratings yet
HTML Website Design: Tags, Forms, & Tables
78 pages
HTML
No ratings yet
HTML
35 pages
HTML Basics for Beginners Guide
100% (1)
HTML Basics for Beginners Guide
19 pages
HTML Basics and Structure
No ratings yet
HTML Basics and Structure
46 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
9 pages
Web Design Basics Training Guide
No ratings yet
Web Design Basics Training Guide
57 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
6 pages
Website Design Basics: HTML & CSS
No ratings yet
Website Design Basics: HTML & CSS
38 pages
Understanding HTML Structure and Elements
No ratings yet
Understanding HTML Structure and Elements
34 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
37 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
143 pages
HTML vs HTML5: Key Differences Explained
No ratings yet
HTML vs HTML5: Key Differences Explained
48 pages
HTML Notes
No ratings yet
HTML Notes
16 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
48 pages
Intro To HTML
No ratings yet
Intro To HTML
55 pages
Web Designing Basics Explained
No ratings yet
Web Designing Basics Explained
126 pages
HTML Basics for Web Design
No ratings yet
HTML Basics for Web Design
12 pages
HTML5 Web Design Essentials
No ratings yet
HTML5 Web Design Essentials
37 pages
HTML Fundamentals
No ratings yet
HTML Fundamentals
49 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
31 pages
Understanding HTML Basics and Elements
No ratings yet
Understanding HTML Basics and Elements
29 pages
Comprehensive HTML Code Guide
No ratings yet
Comprehensive HTML Code Guide
7 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
37 pages
HTML Basics: Tags, Attributes, and Structure
No ratings yet
HTML Basics: Tags, Attributes, and Structure
12 pages
HTML5 Basics: Structure and Tags Guide
No ratings yet
HTML5 Basics: Structure and Tags Guide
14 pages
HTML5 Application Development Guide
No ratings yet
HTML5 Application Development Guide
21 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
51 pages
Understanding Creative Writing Essentials
No ratings yet
Understanding Creative Writing Essentials
29 pages
E-80 - OM Small
No ratings yet
E-80 - OM Small
284 pages
Development of Art Schools in Nigeria
No ratings yet
Development of Art Schools in Nigeria
1 page
Reflection on "Hacker" Documentary
No ratings yet
Reflection on "Hacker" Documentary
3 pages
Aviation Service Bulletins Overview
No ratings yet
Aviation Service Bulletins Overview
1 page
RMR Modular Enclosure Specifications
No ratings yet
RMR Modular Enclosure Specifications
8 pages
Disciplines Contributing to Organizational Behavior
No ratings yet
Disciplines Contributing to Organizational Behavior
1 page
Class 10 Mathematics Periodic Test 3
No ratings yet
Class 10 Mathematics Periodic Test 3
2 pages
Overview of Polymer Additives and Applications
No ratings yet
Overview of Polymer Additives and Applications
37 pages
Urban Clap Invoice for Kumar S
No ratings yet
Urban Clap Invoice for Kumar S
2 pages
Mexican Imperial Coinage Overview
No ratings yet
Mexican Imperial Coinage Overview
82 pages
EDAC Exam Sample Questions Guide
No ratings yet
EDAC Exam Sample Questions Guide
8 pages
70-Point Supply Chain Basics Checklist
100% (3)
70-Point Supply Chain Basics Checklist
4 pages
Step-by-Step Lapbook Creation Guide
No ratings yet
Step-by-Step Lapbook Creation Guide
6 pages
Corn Husk Bioethanol Production Feasibility
No ratings yet
Corn Husk Bioethanol Production Feasibility
16 pages
Design Principles of Composite Beams
No ratings yet
Design Principles of Composite Beams
52 pages
Symptoms of Rice Diseases Explained
No ratings yet
Symptoms of Rice Diseases Explained
4 pages
Potassium Dichromate Safety Data Sheet
100% (1)
Potassium Dichromate Safety Data Sheet
7 pages
Residential Layout for Queensland Property
No ratings yet
Residential Layout for Queensland Property
1 page
Creating More Effective Graphs
No ratings yet
Creating More Effective Graphs
8 pages
Forestry Agroforestry Exam Paper 2020
No ratings yet
Forestry Agroforestry Exam Paper 2020
62 pages
JanusGraph to Neptune Migration Guide
No ratings yet
JanusGraph to Neptune Migration Guide
11 pages
Vocabulary Teaching Strategies Guide
No ratings yet
Vocabulary Teaching Strategies Guide
49 pages
PHYS 3041 Homework Assignment 1
No ratings yet
PHYS 3041 Homework Assignment 1
3 pages
Banana & Honey Bread - JamieOliver
No ratings yet
Banana & Honey Bread - JamieOliver
1 page
KT5G-2P1112 Contrast Sensor Data Sheet
No ratings yet
KT5G-2P1112 Contrast Sensor Data Sheet
7 pages
Grade 3 Maths Scheme: Term 3 Activities
100% (1)
Grade 3 Maths Scheme: Term 3 Activities
8 pages
FIN 402 Treasury Management Assignments
No ratings yet
FIN 402 Treasury Management Assignments
2 pages
Limitations of Valence Bond Theory
100% (1)
Limitations of Valence Bond Theory
32 pages