Scribd
Upload
11 views52 pages

HTML & CSS Front-End Development Guide

The document serves as a comprehensive reference for front-end development, focusing on HTML and CSS. It covers fundamental concepts, including the structure of HTML documents, text content, paths, images, tables, and forms, along with detailed explanations of various HTML elements and CSS properties. Additionally, it emphasizes the importance of understanding front-end technologies and provides a structured approach to learning through chapters dedicated to specific topics.

Uploaded by

sreeramcharan03
Copyright
© All Rights Reserved
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
11 views52 pages

HTML & CSS Front-End Development Guide

The document serves as a comprehensive reference for front-end development, focusing on HTML and CSS. It covers fundamental concepts, including the structure of HTML documents, text content, paths, images, tables, and forms, along with detailed explanations of various HTML elements and CSS properties. Additionally, it emphasizes the importance of understanding front-end technologies and provides a structured approach to learning through chapters dedicated to specific topics.

Uploaded by

sreeramcharan03
Copyright
© All Rights Reserved
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

1

Front-End Development(HTML+CSS) Reference By [Link]

HTML

Chapter-1: Introduction to HTML

Chapter-2: Working with Text Content

Chapter-3: Working with Paths, Images, Tables

Chapter-4: Working with Forms and Other input elements

Chapter-5: Working with Lists, Links and multi-media

Chapter-6: Working with Container Elements , IFrame and Semantic Elements

CSS

Chapter-1:Introduction to CSS, How to apply CSS and working with Colors

Chapter-2: Working with CSS Selectors and BOX Model

Chapter-3: Working with Float and CSS Units

Chapter-4: Working with CSS Text properties and Background property

Chapter-5: Working with Positions In CSS

Chapter-6 : Working with CSS Flexbox

Chapter-7:max-width, min-width, max-height,min-height, overflow

Chapter-8:Working with GRID

Chapter-9: Working with CSS Pseudo-classes and CSS Pseudo Elements

Chapter-10: Working with Shadow Effects In CSS

Chapter 11: Working with Transform, Transition and Animations

Chapter-12: Working with Media queries

Note: This document not having more examples, Should refer recording sessions or your running notes.

Chapter-1: Introduction to HTML

• What is Website and Webpage


• What is Front-End and Technologies used in Front-end
• Introduction to Html
• HTML Elements and Tags
• Structure of HTML
• How to Run HTML documents

Website:
2

A website is a collection of multiple webpages that are linked together under a single domain name.

Webpage:

A webpage is a single document or page that is part of a website, contain text, images, links, and multimedia.

Front-End:

The front end of a website is the part that users see and interact with, including the design, layout, and user experience

Key Technologies Used in Front-End:

HTML (HyperText Markup Language) → Defines the structure of a webpage.

CSS (Cascading Style Sheets) → Styles the webpage (colors, fonts, layout).

JavaScript (JS) → Adds interactivity (click events, animations, dynamic content).

Front-End Frameworks/Libraries:

[Link] (by Facebook)

Angular (by Google)

[Link]

Introduction To Html

→HTML stands for HyperText Markup Language. It is the standard language used to create and structure
content on the web.
→It is markup language , Not a programming language because HTML only structures content; it does not handle
logic like JavaScript.
→It is Platform-Independent → Works on all browsers (Chrome, Firefox, Edge, etc.).
→We can combine with CSS & JavaScript → Used with CSS for styling and JavaScript for interactivity.
→In short, HTML is the skeleton of every website!
Elements and Tags:
→HTML documents are made up of elements, which are represented by tags.
→Tags are enclosed in angle brackets (< >). Most tags come in pairs: an opening tag (<tag>) and a closing tag
(</tag>).
Example: <p>This is a paragraph.</p>

Document Structure:
An HTML document has a specific structure:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>
3

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>
• <!DOCTYPE html> declares the document type and version of HTML (HTML5 in this case).
• <html> is the root element of the document.
• <head> contains meta-information about the document, such as the title and links to stylesheets.
• <body> contains the visible content of the webpage.

Chapter-2: Working with Text Content


• Headings
• Paragraphs
• Formatting Text
• HTML Attributes
• HTML Quotations
• HTML Comments
Headings:
→HTML headings are titles or subtitles that you want to display on a webpage.
→HTML headings are defined with the <h1> to <h6> tags.
→<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Search engines like Google use headings to index the structure and key topics of a web page. Proper use of headings
improves SEO (Search Engine Optimization) by helping search engines understand which parts of the content are
most important.
Paragraphs:
→A paragraph is a group of sentences or text that conveys a specific idea
→The HTML <p> element defines a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Note: In HTML, extra spaces and blank lines in the code do not affect. The browser automatically removes extra
spaces and lines,
4

Horizontal Rule
→<hr> tag is Used to create a horizontal line to separate sections of content.
→It is a self-closing tag (no closing tag needed).
→By default, it takes the full width of the page.
<p>Section 1</p>
<hr>
<p>Section 2</p>
Line Break
→<br> is Used to insert a line break inside a paragraph or text.
→It is also a self-closing tag.
<p>This is<br>a paragraph<br>with line breaks.</p>
Preformatted Text
→<pre> is used to Displays text exactly as written in the HTML file, preserving spaces, line breaks.
→Useful for showing code snippets, poetry, where formatting matters
Text Formatting:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<b>:
→The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>
<strong>:
→The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.
<strong>This text is important!</strong>
<i>:
→The <i> Html element is used for styling purposes to display text in an italic font.
→It does not carry any additional meaning or emphasis.
→Commonly used for foreign words, technical terms, or citations.
5

<p>The scientific name of a cat is <i>Felis catus</i>.</p>


<em> :
→The <em> Html Element is used to emphasize text.
→It conveys semantic meaning, meaning that screen readers and search engines recognize it as important.
→By default, browsers display <em> as italic,
<p>I <em>really</em> need to finish this work.</p>
<mark>:
→Highlights text with a yellow background (by default).
→Used to draw attention to important parts of the text.
<p>This is a <mark>highlighted</mark> word.</p>
<small> :
→Displays text in a smaller font size than the surrounding text.
→Often used for disclaimers, copyright notes, or fine print.
<p>This is <small>small text</small>.</p>
<del> :
→Shows text as deleted by adding a strikethrough line.
→Useful for indicating text that has been removed in documents.
<ins>:
→Underlines the text to indicate it has been newly inserted.
→Commonly used in edited documents.
<p>This is an <ins>added</ins> word.</p>
<sub>(Subscript Text):
→Displays text slightly below the normal text.
→Used for chemical formulas or mathematical Formulas.
<p>Water formula: H<sub>2</sub>O</p>
<sup> (Superscript Text):
→Displays text slightly above the normal text baseline.
→Used for mathematical exponents, etc.
<p>Square of 5: 5<sup>2</sup> = 25</p>
HTML Attributes
→All HTML elements can have attributes
→Attributes provide additional information about elements
→Attributes are always specified in the start tag
→Attributes usually come in name/value pairs like: name="value"
6

<blockquote> – Block Quotation:


→Used to display long, block-level quotations.
→Typically, browsers indent the text inside <blockquote>.(adding space at the beginning of a line)
→ defines a section that is quoted from another source.
<blockquote cite=”[Link]
“The only way to do great work is to love what you do.” – Steve Jobs
</blockquote>
<q> – Inline Quotation
→Used for short, inline quotes.
→Automatically adds quotation marks around the content
<p>Steve Jobs once said, <q>Stay hungry, stay foolish.</q></p>
<abbr> – Abbreviation
→Defines an abbreviation or acronym.
→The title attribute provides the full meaning when hovered over
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address> – Contact Information
Represents contact details (e.g., address, email, phone).
Typically displayed in italic by default in browsers.
<address>
Contact us at: <br>
123 Main Street, Cityville, USA <br>
Email: support@[Link]
</address>
<bdo> – Bi-Directional Override
→Stands for Bi-Directional Override.
→Controls the text direction (LTR or RTL).
→Uses the dir attribute (ltr for left-to-right, rtl for right-to-left).
<p><bdo dir="rtl">This text will be reversed.</bdo></p>
Note:
→Block-level elements start on a new line and take up the full width available.
→Inline elements do not start on a new line and take up only as much width as necessary.
→You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Comments are not displayed by the browser, but they can help document your HTML source code.
7

Chapter-3: Working with Paths, Images, Tables


• Understanding Paths(Relative Path and Absolute Path)
• Working with Images in HTML
• Working with Tables in HTML
Understanding Paths (Relative Path and Absolute Path)
→ When using images, links, or other resources in HTML, you need to specify the correct file path. There are two
types of file paths in HTML:
Absolute Path
→ An absolute path provides the full URL or file location from the root directory
→ It is a complete path to a file.
Examples:
C:/Users/YourName/Pictures/[Link]
[Link]

Relative Path

→A relative path provides the file location relative to the current document.

→It is shorter and flexible, making it useful when moving files within the project.

→/ → Refers to the root directory of the website


→. → Refers to the current folder
→.. → Moves one level up (parent folder)
→../.. → Moves two levels up etc..

Accessing Files from [Link] (Root Folder)


[Link] → "[Link]"
[Link] (inside images folder) → "images/[Link]"
[Link] (inside images folder) → "images/[Link]"
8

[Link] (inside assets/css folder) → "assets/css/[Link]"


[Link] (inside assets/js folder) → "assets/js/[Link]"
[Link] (inside docs folder) → "docs/[Link]"
Accessing Files from [Link] (assets/js folder)
Move up to assets: "../"
Move up to project (root folder): "../../"
[Link] (inside root folder): "../../[Link]"
[Link] (inside images folder): "../../images/[Link]"
[Link] (inside images folder): "../../images/[Link]"
[Link] (inside assets/css folder): "../css/[Link]"
[Link] (inside docs folder): "../../docs/[Link]"
Accessing Files from [Link] (docs folder)
Move up to project (root folder): "../"
[Link] (inside root folder): "../[Link]"
[Link] (inside images folder): "../images/[Link]"
[Link] (inside images folder): "../images/[Link]"
[Link] (inside assets/css folder): "../assets/css/[Link]"
[Link] (inside assets/js folder): "../assets/js/[Link]"
HTML Images
→The <img> tag is used to display images in HTML. It is self-closing Tag
Example: <img src="images/[Link]" alt="A beautiful scenery">
Image Attributes
a) src (Source)
Specifies the location of the image file. It can be a relative or absolute path.
b) alt (Alternative Text)
Describes the image when it fails to load on webpage.
c) width and height
Used to resize an image while maintaining its aspect ratio.
d) title (Tooltip Text)
Shows a tooltip when you hover over the image.
Note: Image Formats: JPEG (.jpg, .jpeg), PNG (.png), GIF (.gif), SVG (.svg), WebP (.webp)
HTML Tables
→HTML tables are used to organize data in rows and columns, similar to spreadsheets.
→They are widely used for displaying structured data such as schedules, pricing tables, reports, and comparison
charts.
9

→An HTML table is defined using the <table> tag. It consists of rows (<tr>) and columns (<td> for data cells and
<th> for header cells).
a) <table>
Defines the table.
b) <tr> (Table Row)
Defines a row inside a table.
c) <td> (Table Data)
Defines a data cell.
d) <th> (Table Header)
Defines a header cell, which is bold and center-aligned by default.
Example:
<table border="1">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Alice</td>
<td>Math</td>
<td>85</td>
</tr>
<tr>
<td>Bob</td>
<td>Science</td>
<td>90</td>
</tr>
</table>
<table> Tag Attributes
a) border
Specifies the thickness of the table border.
Example: <table border="2">
b) cellspacing and cellpadding
cellspacing: Controls the space between table cells.
cellpadding: Controls the space inside each cell.
10

<td> tag Attributes


1. colspan (Column Span)
The colspan attribute allows a single cell to span(extends) across multiple columns, merging them into one.
2. rowspan (Row Span)
The rowspan attribute allows a single cell to span across multiple rows.
Note:
If we want to structure table content into header, body, and footer sections, and making tables more readable and
accessible then we can use following tags
a) <thead> (Table Head)
→Groups all the header content.
b) <tbody> (Table Body)
→Holds the main data.
c) <tfoot> (Table Footer)
→Groups footer content (e.g., totals, summary).
Chapter-4: Working with Forms and Other input elements
• Working with Forms in HTML
• text-area, Drop-down list etc…
HTML Forms:
→HTML forms allow users to send data to a server.
→Forms are used in login pages, registration pages, search bars, feedback forms, and more.
→An HTML form is created using the <form> element. It contains various input elements like text fields, checkboxes,
radio buttons, and submit buttons.
<form action=”” id=”” method=””>
</form>

action
Defines the URL where form data is sent (e.g., a server-side script).
method
Specifies how data is sent: "GET" (data in URL) or "POST" (data in request body).
id
Unique identifier for JavaScript or CSS targeting.

→HTML forms support various input types to collect different kinds of data.

→Each input type is designed for a specific kind of user input. We are using <input> tag.

Text Input (type="text")

• Used for single-line text input.


• Commonly used for names, usernames, etc.
11

<label for="username">Username:</label>

<input type="text" id="username" name="username" placeholder="Enter your username" required>

Password Input (type="password")

• Used to hide input characters for security reasons.

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

Email Input (type="email")

• Ensures input contains a valid email format.

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

Number Input (type="number")

• Accepts only numeric values.

<label for="age">Age:</label>

<input type="number" id="age" name="age" min="1" max="100" required>

Date Input (type="date")

• Opens a date picker in modern browsers.

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

Time Input (type="time")

• Allows users to select a time.

<label for="time">Select Time:</label>

<input type="time" id="time" name="time">

Radio Buttons (type="radio")

• Used for selecting one option from multiple choices.

<label>Gender:</label>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female


12

Checkboxes (type="checkbox")

• Used to select multiple options.

<label>Hobbies:</label>

<input type="checkbox" name="hobby" value="reading"> Reading

<input type="checkbox" name="hobby" value="sports"> Sports

File Upload (type="file")

• Allows users to upload a file.

<label for="file">Upload File:</label>

<input type="file" id="file" name="file">

Submit Button (type="submit")

• Submits the form.

Reset Button (type="reset")

• Clears all form fields.

<input type="reset" value="Clear Form">

input tag elements attributes

type: Defines the type of input.

name: Assigns a name to the input for form submission.

value: Sets a default value.

placeholder: Shows hint text inside input.

required: Ensures field must be filled.

disabled: Disables input.

readonly: Prevents user modification.

maxlength: Limits character input.

min / max: Defines numeric limits.

Grouping Inputs with <fieldset> and <legend>

<form>

<fieldset>

<legend>Personal Details</legend>
13

<label for="name">Name:</label>

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<input type="email" id="email" name="email">

</fieldset>

</form>

Dropdown (<select> and <option>)

To create a dropdown menu, use the <select> element.

<label for="course">Choose a Course:</label>

<select id="course" name="course">

<option value="html">HTML</option>

<option value="css">CSS</option>

<option value="javascript">JavaScript</option>

</select>

Textarea for Multi-line Input

Use <textarea> when users need to enter longer text inputs.

<label for="message">Your Message:</label>

<textarea id="message" name="message" rows="4" cols="30"></textarea>

Chapter-5: Working with Lists, Links and multi-media

• HTML Lists
• HTML Links
• Images and Audio

HTML LISTS

HTML lists are used to group related items together in an organized way. There are three main types of lists in HTML:

1. Ordered List (<ol>)

An ordered list is used when the order of items matters. Each item in an ordered list is marked with numbers, letters,
or roman numerals.

<ol>

<li>First item</li>
14

<li>Second item</li>

<li>Third item</li>

</ol>

Types of Ordered Lists

The <ol> tag supports the type attribute, which changes the numbering style:

• type="1" → Default (1, 2, 3...)


• type="A" → Uppercase letters (A, B, C...)
• type="a" → Lowercase letters (a, b, c...)
• type="I" → Uppercase Roman numerals (I, II, III...)
• type="i" → Lowercase Roman numerals (i, ii, iii...)

<ol type="I">

<li>Introduction</li>

<li>Body</li>

<li>Conclusion</li>

</ol>

Reversed and Start Attribute

• reversed → Displays numbers in descending order.


• start → Specifies the starting value.

<ol start="5" reversed>

<li>Item One</li>

<li>Item Two</li>

<li>Item Three</li>

</ol>

2. Unordered List (<ul>)

An unordered list is used when the order of items does not matter. The items are marked with bullets (•).

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>

</ul>
15

Types of Unordered Lists

The type attribute can be used to specify different bullet styles:

• type="disc" → Default (●)


• type="circle" → Hollow circle (○)
• type="square" → Solid square (■)

<ul type="square">

<li>Math</li>

<li>Science</li>

<li>History</li>

</ul>

3. Definition List (<dl>)

A definition list is used for listing terms and their descriptions, similar to a dictionary.

<dl>

<dt>HTML</dt>

<dd>HyperText Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

</dl>

4. Nested Lists

You can create lists inside other lists.

<ul>

<li>Fruits

<ul>

<li>Apple</li>

<li>Banana</li>

</ul>

</li>

<li>Vegetables

<ul>
16

<li>Carrot</li>

<li>Broccoli</li>

</ul>

</li>

</ul>

HTML Links

HTML links (also called hyperlinks) allow users to navigate between different web pages, sections of the same page.
They are created using the <a> (anchor) tag.

→The <a> tag is used to define a hyperlink, and the href attribute specifies the destination URL.

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

→By default, links open in the same tab. To open a link in a new tab, use the target="_blank" attribute.

<a href="[Link] target="_blank">Open Google in New Tab</a>

→we can create a clickable link that opens an email client using the mailto: scheme.

<a href="[Link] an Email</a>

<a href="[Link] are you?">Email Me</a>

→We can create a link that allows users to call a number on mobile devices using tel:

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

Linking to a Section in the Same Page

→Anchor links help users jump to specific sections of a page using the id attribute.

<h2 id="contact">Contact Us</h2>

<a href="#contact">Jump to Contact Section</a>

→We can use an image as a clickable link.

<a href="[Link]

<img src="[Link]" alt="Visit Example" width="100">

</a>

HTML Audio and Video

→HTML provides built-in support for audio and video playback using the <audio> and <video> elements.

→The <audio> tag is used to embed audio files like MP3, WAV, OGG.
17

<audio controls autoplay loop muted>

<source src="music.mp3" type="audio/mpeg">

<source src="[Link]" type="audio/ogg">

Your browser does not support the audio element.

</audio>

controls: Shows play, pause, volume buttons


autoplay: Automatically plays the audio when the page loads
loop: Repeats the audio continuously
muted: Starts audio in muted mode

→The <video> tag is used to embed video files like MP4, WebM, Ogg.

<video width="500" height="300" controls autoplay loop muted poster="[Link]">

<source src="video.mp4" type="video/mp4">

<source src="[Link]" type="video/webm">

Your browser does not support the video tag.

</video>

controls: Displays play, pause, volume, fullscreen buttons


autoplay: Automatically plays the video on page load
loop: Repeats the video continuously
muted: Starts video with no sound
poster: Sets an image to display before the video plays
width / height: Defines video dimensions

Chapter-6: Working with Container Elements , IFrame and Semantic Elements

• container elements(div and span)


• Embedding Content
• HTML Semantic Elements

<div> tag:

The <div> (short for "division") tag is a block-level element that is primarily used to group other HTML elements
together for styling and layout purposes.

Example:

<div class="container">
18

<h2>Welcome to My Website</h2>

<p>This is a simple paragraph inside a div.</p>

</div>

<span> tag:

The <span> tag is an inline element used to apply styling to a specific part of text within a larger Section.

Example:

<p>This is a <span class="highlight">highlighted</span> word in a sentence.</p>

<iframe> tag

The <iframe> (Inline Frame) element in HTML is used to embed another webpage or document within the current
webpage.

Example: <iframe src="[Link] width="600" height="400"></iframe>

src Specifies the URL of the page to embed.

width Defines the width of the iframe in pixels or percentage.

height Defines the height of the iframe in pixels or percentage.

frameborder Controls the visibility of the iframe border

allowfullscreen Allows fullscreen mode when supported.

Note: Referrer data is information about the previous webpage that a user visited before reaching the current page.

referrerpolicy Controls how much information is sent in the Referer header.

no-referrer No referrer information is sent.

origin Sends only the origin (e.g., [Link] not the full URL).

origin-when-cross-origin Sends full referrer only for same-origin requests; otherwise, sends only the origin.

same-origin Sends the full referrer only for same-site requests.

strict-origin Sends only the origin, and only if the destination is HTTPS.

strict-origin-when-cross-originSends full referrer for same-origin and only origin for cross-origin, but only if the
destination is HTTPS.

Use-Cases:

• Embedding YouTube Videos


• Displaying Google Maps
• Embedding an External Website

Semantic elements
19

Semantic elements in HTML are elements that convey meaning about their content, making it easier for both
developers and search engines to understand the structure of a webpage.

Improves Readability: Code is easier to read and understand.


Enhances SEO: Search engines better interpret page content.
Better Accessibility: Screen readers and assistive technologies can interpret pages correctly.
Improved Maintainability: Code is cleaner and easier to manage.

• <article>
• <aside>
• <footer>
• <header>
• <nav>
• <section>
• <figcaption>
• <figure>

<header> - Defines the Header Section

• Used to represent the introductory section of a page or a section.


• Typically contains logos, navigation menus, and titles.

Example:

<header>

<h1>Welcome to My Website</h1>

<nav>

<a href="#">Home</a> |

<a href="#">About</a> |

<a href="#">Contact</a>

</nav>

</header>

<nav> - Defines Navigation Links

• Used to wrap main navigation links of the website.

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contact</a></li>
20

</ul>

</nav>

<section> - Defines Section of a Page

• Represents a thematic group of content (e.g., articles, features, or product descriptions).


• Useful for breaking content into logical parts.

<section>

<h2>Our Services</h2>

<p>We offer web development, app development, and SEO optimization.</p>

</section>

<footer> - Defines the Footer Secion

• Contains author info, copyright, social media links, or contact details.


• Appears at the bottom of the webpage or a section.

Example:

<footer>

<p>&copy; 2025 MyWebsite. All Rights Reserved.</p>

<nav>

<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a>

</nav>

</footer>

<main> - The Main Content of the Page

• Represents the main content of a webpage.

<aside> - Side Content(Sidebar)

• Commonly used for sidebars, advertisements, author bio, or related links


• The <aside> element defines some content aside from the content it is placed in (like a sidebar).

Example

<aside>

<h2>Related Posts</h2>

<ul>

<li><a href="#">Learn HTML Basics</a></li>


21

<li><a href="#">CSS for Beginners</a></li>

</ul>

</aside>

Example: Think of <aside> as the side column in a newspaper, where ads or related news appear.

<article> - Independent Content:

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the
web site.

Note: we will find HTML pages with <section> elements containing <article> elements, and <article> elements
containing <section> elements.

Scenario 1: <section> contains <article>

• This happens when you have multiple independent articles grouped under a common theme.

<section>

<h2>Latest Blog Posts</h2>

<article>

<h3>Understanding HTML Nesting</h3>

<p>HTML elements can be nested in different ways...</p>

</article>

<article>

<h3>CSS Grid vs Flexbox</h3>

<p>Both are powerful layout techniques...</p>

</article>

</section>

Scenario 2: <article> contains <section>

• This happens when an article itself has multiple sections inside it.

<article>

<h2>How to Learn Web Development</h2>

<section>

<h3>Introduction</h3>
22

<p>Web development is an exciting field...</p>

</section>

<section>

<h3>Frontend vs Backend</h3>

<p>Frontend focuses on UI, while backend handles logic...</p>

</section>

</article>

Chapter-1:Introduction to CSS, How to apply CSS and working with Colors

• Introduction to CSS
• Different Ways to apply CSS
• CSS Colors

What is CSS:

→CSS is the language we use to style a Web page.

→CSS stands for Cascading Style Sheets

→CSS describes how HTML elements are to be displayed on screen, paper, or in other media

→CSS saves a lot of work. It can control the layout of multiple web pages all at once

We can apply CSS to HTML in following ways:

1. Inline CSS:
23

→In this method, we CSS Properties applied directly within an HTML element using the style attribute.

Ex: <p style="color: blue; font-size: 20px;">This is an inline CSS example.</p>

2. Internal CSS

→In this method, CSS properties is written inside the <style> tag within the <head> section of an HTML document.

<head>

<style>

p{

color: green;

font-size: 18px;

</style>

</head>

3. External CSS

→In this method, CSS Properties are written in a separate .css file and linked to an HTML document using the <link>
tag.

[Link]

p{

color: red;

font-size: 22px;

<head>

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

</head>

COLORS in CSS:

→We can apply the colors in CSS by using following CSS Properties:

color: It Changes the text color

background-color: changes the background color

Ways to define Colors:


24

a) Named Colors:

→CSS Provides some pre-defined color names such as red, blue etc..

Ex: color:red;

b) HEX Color Codes:

→A HEX code is a six-digit code representing colors in the RGB (Red, Green, Blue) format.

Format: #RRGGBB

Each pair (RR, GG, BB) represents a value from 00 to FF (hexadecimal).

Ex: color: #ff5733;

RGB Color Model

→Defines colors using Red, Green, and Blue values in the range of 0 to 255.

Format: rgb(red, green, blue)

color: rgb(255, 0, 0); /* Red */

RGBA in CSS

→RGBA stands for Red, Green, Blue, Alpha.

→The Alpha channel controls the transparency (0 = fully transparent, 1 = fully visible).

background-color: rgba(255, 0, 0, 0.5); /* Red with 50% transparency */

Opacity

→Opacity controls how transparent an element is.

→Value ranges from 0 (completely transparent) to 1 (completely visible).

opacity: 0.5; /* 50% transparent */

CSS gradients

→CSS gradients let you display smooth transitions between two or more specified colors.

Linear Gradients (goes down/up/left/right/diagonally)

→ To create a linear gradient we must define at least two color stops. Color stops are the colors you want to render
smooth transitions among
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction:
Top to Bottom(this is default)
25

background-image: linear-gradient(red, yellow);// linear gradient that starts at the top


Left to Right
background-image: linear-gradient(to right, red , yellow);// linear gradient that starts from the left
Diagonal (Top-left to Bottom-right)
linear-gradient(to bottom right, red, blue);// start from top-left and move to bottom-right.
Using angles:
→ If you want more control over the direction of the gradient, you can define an angle, instead of the predefined
directions
→ A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is
equivalent to "to bottom".
0deg → (bottom to top)
90deg → (left to right)
180deg → (top to bottom)
270deg → (right to left)
Ex: linear-gradient(270deg, red, blue);
Note: We can use multiple colors.
Radial Gradients
→A radial gradient is defined by its center.
→To create a radial gradient you must also define at least two color stops.
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(red 5%, yellow 15%, green 60%);// differently spaced color stops
background-image: radial-gradient(circle, red, yellow, green);//circle shape
repeating-radial-gradient(red, yellow 10%, green 15%);//To repeat gradient

Chapter-2: Working with CSS Selectors and BOX Model


CSS Selectors

→CSS selectors define which HTML elements the CSS Properties apply to

Simple Selectors

Universal Selector (*): Selects all elements in a document.

*{

Type Selector (Element Selector): Selects elements by their tag name.

p{
26

ID Selector (#id): Selects an element with a specific ID.

#abc{

Class Selector(.class): Selects all elements with a specific class.

.abc{

Multiple Selectors (A, B, C): Applies styles to multiple elements.

h1,p,span{

Combinator Selectors

Descendant Selector (A B): Selects elements inside another element.

div p{

Child Selector (A > B): Selects only direct children.

div > p{

Adjacent Sibling Selector (A + B): Selects the next immediate sibling.

h1+p{

General Sibling Selector (A ~ B): Selects all siblings after a specified element.

h1 ~ p{

Attribute Selectors

Attribute Exists ([attr]): Selects elements with a specific attribute.

[disabled] {

background-color: gray;

Attribute Equals ([attr="value"]): Matches exact attribute values

input[type=”text”] {

background-color: gray;

Box Model in CSS


27

→All HTML elements can be considered as boxes.

→The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding,
borders and margins.

→Th innermost box contains the content of element. Surrounding that is the padding then border and finally the
outermost layer the margin.

Note: In Developers tools of every browser we can see the box model for html element.

→CSS Provides properties that can be used to change the padding, border and margin for HTML Element.

Borders

→The border in CSS is the outermost edge of an element’s padding

Border Properties

border-width: Defines the thickness of the border.

border-width:2px;

border-style: Defines the appearance of the border.

border-style:solid;

border-color: Specifies the border color.

border-color:red;

border(shorthand): Combines all three properties.

border:2px solid black;

Individual Borders: You can set borders for specific sides.

border-top: 3px dashed green;

border-right: 2px solid red;

border-bottom: 4px double blue;

border-left: 5px dotted orange;

Rounded Borders: Adds curves to the border.

border-radius: 10px;
28

Padding:

→Padding is the space between the content of an element and its border. It provides inner spacing

Padding Properties:

padding-left: Sets padding only at the top.

padding-right: Sets padding only on the right.

padding-bottom: Sets padding only at the bottom.

padding-left: Sets padding only on the left.

One Value (All Sides Equal):

padding:10px;

Two Values (Top-Bottom & Left-Right)

padding:10px 20px;

Three Values (Top, Left-Right, Bottom)

padding:10px 20px 30px;

Four Values (Top, Right, Bottom, Left – Clockwise Order)

padding:10px 20px 30px 40px;

Margins :

→Margin is the space outside an element’s border that separates it from other elements. It controls the outer
spacing of an element.

Margin Properties:

margin-left: Sets margin only at the top.

margin-right: Sets margin only on the right.

margin-bottom: Sets margin only at the bottom.

margin-left: Sets margin only on the left.

One Value (All Sides Equal):

margin:10px;

Two Values (Top-Bottom & Left-Right)

margin:10px 20px;

Three Values (Top, Left-Right, Bottom)

margin:10px 20px 30px;

Four Values (Top, Right, Bottom, Left – Clockwise Order)

margin:10px 20px 30px 40px;

Note:

Margin collapsing is a behavior in CSS where vertical margins of adjacent elements are combined (collapsed) into a
single margin instead of adding up.
29

→When two block elements are placed next to each other, their vertical margins collapse, and the larger of the two
margins is used instead of adding them together.

.div1 {

margin-bottom: 20px;

.div2 {

margin-top: 30px;

→If a parent element has no padding or border, the top margin of its first child and the bottom margin of its last child
will collapse with the parent’s margin.

.parent {

margin: 20px;

.child {

margin-top: 30px;

Note:

→When you apply margin:auto to an element, it tells the browser to distribute the available space equally on both
sides.

Chapter-3: Working with Float and CSS Units

float:

when an element is floated, it is taken out of the normal flow of the document (though still remaining part
of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated
element.

Values of the float Property:

left: The element floats to the left of its container.

right: The element floats to the right of its container.

none: The element does not float (default behavior).

inherit: The element inherits the float value from its parent.

Note:

→When an element is floated, it is taken out of the normal document flow. This means that other block-level
elements will behave as if the floated element does not exist, and they will occupy the space as if the floated
element were not there.

→Inline elements and text will wrap around the floated element. This is the primary use case for the float property,
such as wrapping text around an image.

Clearing Floats:
30

→The clear property is used to prevent elements from wrapping around floated elements. It is useful when you want
to ensure that an element starts below any floated elements.

Values of clear

left → Prevents wrapping around floated elements on the left.

right → Prevents wrapping around floated elements on the right.

both → Prevents wrapping around floated elements on both sides.

none → Default value (no effect).

CSS Units

→CSS has several different units for expressing a length.

→Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

→Length is a number followed by a length unit, such as 10px, 2em, etc.

There are two types of length units: absolute and relative.

Absolute

→The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

→Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they
can be used if the output medium is known, such as for print layout.

Note: The viewport is the visible area of a webpage on a device (like a phone, tablet, or computer). It is the browser
window size where content is displayed.

Relative

→ Relative units depend on the parent element, viewport, or other factors. They make web pages more responsive
and adaptable.

a) Relative to Font Size

em → Relative to the font size of the parent element. If parent font-size = 16px, then 1em = 16px.

rem (Root em) →Similar to em, but relative to the root (html) font size. By default, 1rem = 16px

b) Relative to Viewport
31

vw (Viewport Width) → 1vw = 1% of viewport width.

vh (Viewport Height) → 1vh = 1% of viewport height.

c) Percentage (%)

% is relative to the parent element's size.

Chapter-4: Working with CSS Text properties and Background property

Text-Related CSS Properties

1. Font Properties

These properties control the appearance of text, including size, family, weight, and style.

a) font-family (Selects the Font)

b) font-size (Controls the Size of the Text)

Commonly used values:

px (pixels) - Fixed size

em / rem - Relative to parent/root

% - Relative to the parent size

c) font-weight (Controls Text Thickness)

Common values:

normal (default), bold, lighter, bolder

Numeric values from 100 to 900 (e.g., font-weight: 700; is bold)

d) font-style (Changes Text Appearance)

Common values:

normal (default), bold, lighter, bolder

Numeric values from 100 to 900 (e.g., font-weight: 700; is bold)

2. Text Formatting Properties

a) text-align (Aligns Text Horizontally)

Values:

left - Aligns text to the left

right - Aligns text to the right

center - Centers the text

justify - Spreads text evenly

b) text-decoration (Adds Underline, Overline, or Strikethrough)

Values:

none - Removes decoration

underline - Underlines text


32

overline - Adds a line above the text

line-through - Strikes through text

c) text-transform (Changes Text Case)

Values:

uppercase - Converts text to UPPERCASE

lowercase - Converts text to lowercase

capitalize - Capitalizes the first letter of each word

d) letter-spacing (Adjusts Space Between Letters)

Positive values increase space; negative values reduce space.

e) word-spacing (Adjusts Space Between Words)

f) line-height (Adjusts Space Between Lines)

a) text-shadow (Adds a Shadow to Text)

text-shadow: X-offset Y-offset Blur-amount Color;

text-shadow: 2px 2px 5px gray;

display property : block,inline,inline-block refer the recording video

background-image

To use an image as a background, we need to specify the path to the image file using the url() function.

background-image: url('path-to-image');

Note:By default, the background image repeats itself both horizontally and vertically to fill the entire element.

background-repeat

Controls whether the image repeats or not.

Values:

repeat (default): The image repeats both horizontally and vertically.

no-repeat: The image does not repeat.

repeat-x: The image repeats only horizontally.

repeat-y: The image repeats only vertically.

background-position

Defines where the image is positioned within the element.

Values:

Keywords: top, bottom, left, right, center.

Percentages: 50% 50% (center).

Pixels: 10px 20px.


33

background-size

Controls the size of the background image.

Values:

auto (default): The image is displayed at its original size.

cover: The image scales to cover the entire element (may crop the image).

background-attachment

Controls whether the image scrolls with the content or stays fixed.

Values:

scroll (default): The image scrolls with the content.

fixed: The image stays fixed while the content scrolls.

Chapter-5: Working with Positions In CSS

CSS Positioning

→CSS positioning is a way to control where an element is placed on a web page. By default, elements are positioned
in the normal document flow,

→However, CSS positioning allows you to override this behavior and place elements anywhere you want on the page.

→The position property in CSS is used to define how an element is positioned. It has five possible values:

Static (default)

Relative

Absolute

Fixed

Sticky

1. position: static; (Default Positioning)

→This is the default positioning for all elements.

→Elements are placed in the normal document flow (i.e., they appear in the order they are written in the HTML).

→The top, right, bottom, left, and z-index properties do not work with static positioning.

2. position: relative;

→The element is positioned relative to its normal position in the document flow.

→we can use top, right, bottom, and left to move the element from its original position.

→Other elements on the page will not adjust to fill the gap left by the moved element.

3. position: absolute;

→The element is removed from the normal document flow. This means other elements on the page will ignore it and
act like it doesn’t exist.
34

→The element is positioned relative to its nearest positioned ancestor. If no positioned ancestor exists, it is
positioned relative to the viewport (the browser window).

Note:A positioned ancestor is any parent element with position set to relative, absolute, fixed, or sticky.

→we can use top, right, bottom, and left to precisely place the element.

position: fixed;

→The element is removed from the normal document flow.

→It is positioned relative to the viewport (the browser window).

→It stays in the same place even when the page is scrolled.

→we can use top, right, bottom, and left to place the element.

position:sticky; relative+fixed

z-index is a CSS property that controls the stacking order of elements on a webpage. It determines which elements
appear in front or behind others when they overlap.

How z-index Works

z-index only works on elements with a positioned property (position: relative;, absolute;, fixed;, or sticky;).

The higher the z-index value, the closer the element is to the user (it appears on top).

If two elements have the same z-index, the one that appears later in the HTML code is stacked on top.

Chapter-6 : Working with CSS Flexbox

The CSS Flexbox

→The CSS Flexbox (Flexible Box Layout) is a modern CSS layout system that provides an efficient way to align and
distribute space among elements in a container.

Flex Containers and Flex Items

→To use all of Flexbox's properties, we need to set the display property for an element to flex or inline-flex.

→ This turns the element into a flex container, and the children of that element become flex items.

Understanding flex and inline-flex

→This turns the element into a flex container, and the children of that element become flex items.

we can use both flex and inline-flex to make an element a flex container. The difference is in how they interact with
surrounding elements.

display: flex

This makes the flex container behave like a block-level element. The flex-container takes up the entire available width
of its parent element. It starts on a new line, and the element that comes after it also starts on a new line.

display: inline-flex

This makes the flex-container behave like an inline-level element. This allows other inline elements (like buttons) to
flow alongside it. Using the previous example, this is how the elements will be arranged when you change display
from flex to inline-flex.

The Flex Container Properties


35

The flex container properties allow you to control the layout and alignment of the flex items within a flex container.

We can apply these properties on the flex container, and not on its items.

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

The flex-direction Property

The flex-direction property defines the direction for displaying the flex items. It is what sets the flex container's main
axis. This property can take any of these four values:

row (default value)

column

row-reverse

column-reverse

The flex-wrap Property

Sometimes, the space within the flex container will not be enough for the flex items.

In such cases, you use the flex-wrap property to choose whether to let the flex-items overflow or begin on a new line.

The flex-wrap property accepts any of the following values:

nowrap (default value)

wrap

wrap-reverse

The flex-flow Shorthand Property

The flex-flow property is a shorthand for the flex-direction and flex-wrap properties. This means that when you use
flex-flow, you can apply both properties with only a single line of code.

flex-flow: column wrap;

The justify-content Property

This justify-content property handles the alignment of flex items on the main axis of the flex container.

You can use it to take care of how space is distributed on the main axis. This property takes any of the following
values:

flex-start (default value)

flex-end

center
36

space-between

space-around

space-evenly

The align-items Property

The align-items property handles the alignment of flex items on the cross-axis of the flex container. It can take any of
the following values:

stretch (default value)

flex-start

flex-end

center

The align-content Property

When you have a flex container with wrap (or more than one flex line), you may need to align the lines to distribute
the space as you want. That is when you use align-content. This property can take any of the following values:

stretch (default value)

flex-start

flex-end

center

space-between

space-evenly

space-around

The Flex Item Properties

Every direct child of a flex container is a flex item. Flexbox also has properties that you can apply to individual flex
items. They include the following:

order

align-self

flex-grow

flex-shrink

flex-basis

flex

The order property

The order property determines the order of appearance for the flex items.

The value you give to this property must be a number. A flex item with a lower number will appear before one with a
higher number.
37

The align-self property

we can use the align-self property to give a flex item a different alignment from the other items.

It works the same way as the align-items property. The difference is that whereas align-items applies to all flex items,
the align-self property is applied to only specific items.

The flex-grow property

When we set a container's display to flex, often there will be some extra space after the items are arranged.

This property control how much a flex item should expand to fill the available space within the flex container.

The extra space is shared proportionately if we apply for multiple flex items within container

Note:The browser treats the extra as a value of 1

The flex-shrink property is the opposite of flex-grow.

You use flex-grow when you want to increase the flex item's size if there's extra space. But, you use flex-shrink when
you want to decrease the flex-item's size if there's not enough space in the flex container.

The flex-shrink property accepts a positive number as a value.

A value of 1 (default) means the item can shrink when needed.

A value of 0 means the item won’t shrink, even if space is limited.

A higher value makes the item shrink more relative to other items.

The flex-basis property

You can use the flex-basis property to set the default length of a specific flex item. This is either the width or height of
the item depending on the flex-direction.

If the flex-direction is row or row-reverse, the value for flex-basis becomes the initial width of the item.

And if flex-direction is column or column-reverse, then the value for flex-basis becomes the initial height of the item.

The flex Shorthand Property

we can use flex as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

flex: 2 0 50px;

Flexbox Gaps

we can use the gap property to adjust the space between flex items.

gap can take two values: the first value for gaps between the rows and the second value for gaps between the
columns.

If the gap you want between the rows and the columns is the same, you can use a single value. The browser will
apply the same value to both rows and columns.

You can also use the properties row-gap if you need to apply a specific gap value between only the rows. and column-
gap if you need to add gaps between only the columns.

Chapter-7:max-width, min-width, max-height,min-height, overflow

1. max-width
38

→ Sets the maximum width an element can have.

→Useful for ensuring that an element does not exceed a certain width, even if its content or container is larger.

Values:

none (default): No maximum width.

Length values: px, em, rem, %, vh, vw, etc.

Example:

.container {

max-width: 1200px;

This ensures the .container will not grow wider than 1200px, even if the viewport is larger.

2. min-width

→Sets the minimum width an element can have.

→Ensures that an element does not shrink below a specified width, even if its content or container is smaller.

Values:

0 (default): No minimum width.

Length values: px, em, rem, %, vh, vw, etc.

Example:

.sidebar {

min-width: 250px;

This ensures the .sidebar will never be narrower than 250px.

3. max-height

→ Sets the maximum height an element can have.

→Prevents an element from exceeding a specified height, even if its content is taller.

Values:

none (default): No maximum height.

Length values: px, em, rem, %, vh, vw, etc.

Example:

.modal {

max-height: 80vh;

This ensures the .modal will not grow taller than 80% of the viewport height.

4. min-height
39

→Sets the minimum height an element can have.

→Ensures that an element does not shrink below a specified height, even if its content is smaller.

Values:

0 (default): No minimum height.

Length values: px, em, rem, %, vh, vw, etc.

Example:

.header {

min-height: 100px;

This ensures the .header will never be shorter than 100px.

5. overflow

→ Controls how content that overflows an element’s box is handled.

→Useful for managing content that exceeds the dimensions of an element.

Values:

visible (default): Content is not clipped and may overflow outside the element’s box.

hidden: Content is clipped, and overflow is not visible.

scroll: Adds scrollbars to the element, allowing users to scroll to see the overflowed content.

auto: Adds scrollbars only if necessary (i.e., when content overflows).

overflow-x: Controls horizontal overflow.

overflow-y: Controls vertical overflow.

.scrollable {

overflow: auto;

max-height: 200px;

This ensures the .scrollable element will show scrollbars if its content exceeds 200px in height.

Chapter-8:Working with GRID


CSS Grid
CSS Grid is a two-dimensional layout system for creating web layouts. It allows you to divide a webpage into rows and
columns, and place elements anywhere in the grid. Unlike Flexbox (which is one-dimensional), Grid lets you control
both rows and columns at the same time.

• setting an element's display property's value to grid turns the box model into a block-level grid layout
module.
40

• setting an element's display property's value to inline-grid turns the box model into an inline-level grid layout
module.

grid container properties are:

grid-template-columns

grid-template-rows

justify-content

align-content

grid-template-columns
grid-template-columns specifies the number and widths of columns browsers should display in the selected grid
container.

Note:The fr unit distributes space proportionally across the grid.

Note:The auto value in grid-template-columns or grid-template-rows allows the size of a column or row to adjust
based on the size of the content inside it.

Note:Instead of manually defining each column or row, you can use the repeat() function to simplify the definition.

grid-template-columns: repeat(number, size);

grid-template-rows
grid-template-rows specifies the number and heights of rows browsers should display in the selected grid container.

justify-content
justify-content specifies how browsers should position a grid container's columns along its row axis.

The justify-content property works if the total column widths are less than the grid container's width

The justify-content property accepts the following values:

start

center

end

stretch

space-between

space-around

space-evenly

align-content
align-content specifies how browsers should align a grid container's rows along the container's column axis.

The align-content property works if the total row heights are less than the grid container's height

The align-content property accepts the following values:

start

center
41

end

stretch

space-between

space-around

space-evenly

Gaps in Grid
row-gap:Defines the space between rows.

column-gap:Defines the space between columns.

gap (Shorthand):A shorthand for setting both row and column gaps at once. If only one value is given, it sets both
row and column gaps to the same value.

The ten (10) types of grid item properties are:

grid-column-start

grid-column-end

grid-column

grid-row-start

grid-row-end

grid-row

grid-area

grid-template-areas

grid-column-start
grid-column-start specifies where the selected grid item should start (or span) along the grid container's row
axis(inline)(Column lines).

grid-column-end
grid-column-end specifies where the selected grid item should end (or span) along the grid container's row (inline)
axis.

grid-column
grid-column is a shorthand for the grid-column-start and grid-column-end properties.

grid-column:1 / 5;

grid-row-start
grid-row-start specifies where the selected grid item should start (or span) along the grid container's column (block)
axis (Row Lines).

grid-row-end
grid-row-end specifies where the selected grid item should end (or span) along the grid container's column (block)
axis.
42

grid-row
grid-row is a shorthand for the grid-row-start and grid-row-end properties

grid-row: 1 / 5;

grid-area
As a shorthand for the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties. we can use
grid-area

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

grid-template-areas
grid-template-areas specifies the area where you want to place named grid items within a grid container.

• It allows you to create named areas in a grid.


• We assign names to grid items and define their position using a grid-template.
• Each grid area is represented by a name (like header, main, sidebar, etc.).
• The grid layout is defined using strings that represent the grid structure.

Chapter-9: Working with CSS Pseudo-classes and CSS Pseudo Elements

CSS Pseudo-classes

A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific state or condition of
an element

selector:pseudo-class {

/* styles */

1. :hover

This applies when the user hovers over an element.

2. :focus

Applies when an element receives focus (e.g., a text input clicked)

3. :active

Applies when an element is being clicked .

4. :visited

Applies to links the user has visited.

5. :link

Applies to links that the user has not visited yet.

1. :first-child

Matches the first child of its parent

2. :last-child

Matches the last child of its parent


43

3. :nth-child(n)

Matches the nth child of its parent

Form Pseudo-Classes

1. :checked

Matches checkboxes or radio buttons that are selected.

2. :disabled

Matches elements that are disabled.

4. :required

Matches form fields marked as required.

CSS Pseudo Elements

A pseudo-element is a keyword added to a selector that lets you style specific parts of an element

selector::pseudo-element{

property: value

1. ::before

The ::before pseudo-element allows you to insert content before the actual content of an element.

p::before {

content: " ";

color: gold;

2. ::after

Similar to ::before, the ::after pseudo-element inserts content after the element’s content

etc....

Chapter-10: Working with Shadow Effects In CSS

CSS Shadow Effects

With CSS you can add shadow to text and to elements.

text-shadow

box-shadow

CSS Text Shadow

The CSS text-shadow property applies shadow to text.

text-shadow: <x-offset> <y-offset> <blur-radius> <color>;

x-offset

Horizontal position of the shadow


44

2px (moves right) / -2px (moves left)

y-offset

Vertical position of the shadow

2px (moves down) / -2px (moves up)

blur-radius (optional)

Amount of blur

color

Shadow color

box-shadow

The box-shadow property in CSS is used to add shadow effects around the edges of an HTML element

box-shadow: <x-offset> <y-offset> <blur-radius> <spread-radius> <color> <inset>;

x-offset

Horizontal position of the shadow

2px (right), -2px (left)

y-offset

Vertical position of the shadow

2px (down), -2px (up)

blur-radius (optional)

Amount of blur

spread-radius (optional)

Size of the shadow (positive = expand, negative = shrink)

2px, -2px

color

Shadow color

inset (optional)

Makes the shadow appear inside the element.

Chapter 11: Working with Transform, Transition and Animations

transform property
The transform property in CSS allows you to manipulate the appearance of an element by applying various transform
functions.

1. translate(x-axis, y-axis)
45

→ Moves an element along the X-axis and Y-axis.

Values:

x-axis: Horizontal movement (positive values move right, negative values move left).

y-axis: Vertical movement (positive values move down, negative values move up).

Example:

.box {

transform: translate(50px, 20px);

Moves the element 50px to the right and 20px down.

2. translateX()

→Moves an element along the X-axis (horizontal).

Values:

Length values: px, em, %, etc.

Example:

.box {

transform: translateX(30px);

Moves the element 30px to the right.

3. translateY()

→Moves an element along the Y-axis (vertical).

Values:

Length values: px, em, %, etc.

Example:

.box {

transform: translateY(-20px);

Moves the element 20px up.

4. rotate()

Purpose: Rotates an element around its center.

Values:

Angle: deg,

Positive values rotate clockwise, negative values rotate counterclockwise.

Example:
46

.box {

transform: rotate(45deg);

Rotates the element 45 degrees clockwise.

5. skew()

→ Skews (tilts) an element along the X-axis and Y-axis.

Values:

skew(x-angle, y-angle): Angles in deg, etc.

If only one value is provided, it applies to the X-axis.

Example:

.box {

transform: skew(20deg, 10deg);

Skews the element 20 degrees along the X-axis and 10 degrees along the Y-axis.

6. scale()

→Resizes an element (makes it larger or smaller).

Values:

scale(x, y): Scales the width (x) and height (y).

If only one value is provided, it applies to both X and Y.

Example:

.box {

transform: scale(1.5, 0.8);

Scales the element to 1.5 times its original width and 0.8 times its original height.

7. matrix()

→ Combines all 2D transformations into a single function using a 6-value matrix.

Values:

matrix(a, b, c, d, e, f):

a and d: Scale X and Y.

b and c: Skew Y and X.

e and f: Translate X and Y.

.box {
47

transform: matrix(1, 0.5, 0.5, 1, 50, 20);

Combines scaling, skewing, and translation into a single transformation.

CSS Transitions
→Allow you to create smooth animations between different states of an element.

→Instead of the change happening instantly, transitions let you control the timing and speed of the change, making
it more visually appealing.

transition-property

The transition-property property specifies which style(s) to transition.

.my-element {

transition-property: background-color;

The transition-property accepts one or more CSS property names in a comma-separated list.

transition-duration

The transition-duration property is used to define the length of time that a transition will take to complete.

transition-duration accepts time units, either in seconds (s) or milliseconds (ms) and defaults to 0s.

transition-duration: 0s;

transition-duration: 200ms;

The transition-timing-function

defines the speed curve of a transition

When you define a transition, the transition-timing-function controls how quickly or slowly the transition happens at
different points during the duration.

1. ease (Default)

Starts slow, speeds up in the middle, and slows down at the end.

2. linear

The transition progresses at a constant speed from start to finish.

3. ease-in

Starts slowly and accelerates toward the end.

4. ease-out

Starts fast and slows down toward the end

5. ease-in-out

Starts slowly, accelerates in the middle, and slows down at the end.
48

transition-delay

Use the transition-delay property to specify the time at which a transition will start. If transition-delay is not
specified, transitions will start instantly because the default value is 0s. This property accepts a time unit, for example
seconds (s) or milliseconds (ms).

shorthand: transition

Like most CSS properties, there is a shorthand version. transition combines transition-property, transition-duration,
transition-timing-function, and transition-delay.

transition: transform 300ms ease-in-out 0s;

CSS Animations

→CSS allows animation of HTML elements without using JavaScript

• An animation lets an element gradually change from one style to another.


• You can change as many CSS properties you want, as many times as you want.
• To use CSS animation, you must first specify some keyframes for the animation.
• Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style
to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

/* The animation code */

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

/* The element to apply the animation to */

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

}
49

The animation-duration property defines how long an animation should take to complete. If the animation-duration
property is not specified, no animation will occur, because the default value is 0s (0 seconds).

In the example above we have specified when the style will change by using the keywords "from" and "to" (which
represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

@keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

Note:Negative values are also allowed. If using negative values, the animation will start as if it had already been
playing for N seconds

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

div {

width: 100px;

height: 100px;

position: relative;

background-color: red;

animation-name: example;

animation-duration: 4s;
50

animation-iteration-count: 3;

The animation-direction property specifies whether an animation should be played forwards, backwards or in
alternate cycles.

The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default

reverse - The animation is played in reverse direction (backwards)

alternate - The animation is played forwards first, then backwards

alternate-reverse - The animation is played backwards first, then forwards

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)

linear - Specifies an animation with the same speed from start to end

ease-in - Specifies an animation with a slow start

ease-out - Specifies an animation with a slow end

ease-in-out - Specifies an animation with a slow start and end

The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it
starts, after it ends, or both).

The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or after it is executing

forwards - The element will retain the style values that is set by the last keyframe

backwards - The element will get the style values that is set by the first keyframe , and retain this during the
animation-delay period

both - The animation will follow the rules for both forwards and backwards, extending the animation properties in
both directions

Animation Shorthand Property

animation: name duration timing-function delay iteration-count direction fill-mode;

animation: example 5s linear 2s infinite alternate forwards;

Chapter-12: Working with Media queries

Media queries are a powerful feature in CSS that allow you to apply styles based on specific conditions, such as the
viewport size, device orientation, screen resolution. enabling you to create layouts that adapt to different devices
and screen sizes.

Syntax of Media Queries


51

A media query consists of:

The @media rule.

A media type (e.g., screen, print, all).

One or more conditions (e.g., min-width, max-width, orientation).

@media media-type and (condition) {

/* CSS rules */

Media Types

Media queries can target specific types of devices or contexts:

all: Applies to all devices (default).

screen: Applies to screens (e.g., desktops, tablets, phones).

print: Applies to printed documents or print previews.

speech: Applies to screen readers.

Common Conditions

Media queries use conditions to apply styles based on specific criteria. Here are the most commonly used ones:

1. Viewport Width

min-width: Applies styles if the viewport is at least a certain width.

max-width: Applies styles if the viewport is at most a certain width.

width: Applies styles if the viewport is exactly a certain width.

Example:

@media (min-width: 768px) {

/* Styles for screens wider than 768px */

@media (max-width: 767px) {

/* Styles for screens narrower than 768px */

2. Viewport Height

min-height: Applies styles if the viewport is at least a certain height.

max-height: Applies styles if the viewport is at most a certain height.


52

Example:

@media (min-height: 600px) {

/* Styles for screens taller than 600px */

3. Device Orientation

orientation: portrait: Applies styles when the device is in portrait mode.

orientation: landscape: Applies styles when the device is in landscape mode.

Combining Conditions

You can combine multiple conditions using logical operators:

and: Combines multiple conditions (all must be true).

, (comma): Acts like an OR operator (at least one must be true).

not: Negates a condition.

Example:

@media (min-width: 768px) and (max-width: 1024px) {

/* Styles for screens between 768px and 1024px */

@media (max-width: 767px), (min-width: 1200px) {

/* Styles for screens smaller than 768px or larger than 1200px */

@media not (orientation: portrait) {

/* Styles for devices not in portrait mode */

You might also like