HTML

CETIFICATE FORMATE:
HTML Fundamentals
Every website has two parts:
Front-end
Back-end

The front end is responsible for the visual look and feel of the
website or app that a user will interact with (the client side). The
front-end is built using a combination of technologies such as
Hypertext Markup Language (HTML), JavaScript and Cascading
Style Sheets (CSS).

Back end development focuses on the side of a website users can't

see (the server side)

A full stack developer is someone who works with both the front
end and back end of a web application.
HTML
stands for HyperText Markup Language. It is the standard language used to
create and structure content on the web.
 It tells the web browser how to display text, links, images, and other forms of
multimedia on a webpage.
 HTML sets up the basic structure of a website, and then CSS and JavaScript
add style and interactivity to make it look and function better.

Why HTML:
1.Foundation of Web Development: HTML is the starting point for creating
websites. Understanding HTML is crucial for any web development or web
design role

2.Create Your Own Website:

HTML enables you to build and customize your personal or professional
website.
It allows you to create static web pages, and with additional knowledge of CSS
and JavaScript, you can create dynamic, interactive sites.
3.Essential Skill for Digital Careers:
HTML is a must-have skill for many roles in the tech industry, such as:
• Web Developer
• UI/UX Designer
• Front end Expert
• SEO Specialist

Element :
An HTML Element consists of a start tag, content, and an end tag, which
together define the element’s structure and functionality.
Elements are the basic building blocks of a webpage and can represent
different types of content, such as text, links, images, or headings.

Example: <P>Good Morning Guys…</p>

Here,
<p> is the opning tag or start tag
“Good Morning Guys…” is the content.
</p> is the closing tag or ending tag
• Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!

Attribute:
HTML Attributes are special words used within the opening tag of an HTML
element. They provide additional information about HTML elements.
HTML attributes are used to configure and adjust the element’s behavior,
appearance, or functionality in a variety of ways.
Each attribute has a name and a value, formatted as name=”value”. Attributes
tell the browser how to render the element or how it should behave during user
interactions.

Example: <a href=“https://www.example.com”>Click here</a>

Here,
•<a>is the tag name.
• href is the attribute name.
•"https://www.example.com" is the attribute value.
•The content is "Click here to visit Example".
HTML Block elements, are used to structure the main content of a webpage.
They typically start on a new line and take up the full width of their container
examples <div>,<p>,<h1>to<h6> and<li>

HTML Inline elements, are used within block-level elements to style or format
specific parts of the content. They don’t start on a new line and only take up as
much width as necessary for example include ,<span> ,<a> and <strong>

HTML Comments –
 HTML Comments are text in an HTML document that is not displayed by the
browser.
 They allow you to leave notes and explanations directly in the code, which
can be especially helpful during the development process or when you need
to make future updates.
 To add a comment in your HTML code, you enclose the text you want to
hide from display within <!-- and -->
1.1 Construct markup that uses metadata elements:
HTML metadata elements provide information about the document that isn't directly
displayed on the webpage but is vital for browsers and search engines.

1. <script> Tag:
Purpose: Used to embed JavaScript code or link to an external JavaScript file.
Usage:
 Inline JavaScript: Place the JavaScript code directly between the <script> tags.
 External JavaScript: Use the src attribute to link to an external file.
Example:
<script>
console.log("Hello, World!");
</script>
<script src="script.js"></script>
2.<noscript> Tag:
Purpose: Provides fallback content for users whose browsers do not support JavaScript
or have it disabled.
Usage:
Used inside the <body> tag to inform users or provide alternate content.
Example:
<noscript>
<p>JavaScript is disabled in your browser. Please enable it for the best
experience.</p>
</noscript>

3.<style> Tag:
Purpose: Used to define internal CSS styles for a webpage.
Usage:
Write CSS rules directly between the <style> tags.
Example:
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
</style>
4.<link> Tag:
Purpose: Links external resources like stylesheets or icons to the HTML document.
Usage:
Commonly used to link CSS files.
Example:
<link rel="stylesheet" href="styles.css">

Attributes:
rel: Specifies the relationship between the document and the linked resource (e.g.,
stylesheet).
href: URL of the linked file.

5.<meta> Tag:
Purpose: Provides metadata about the HTML document, such as encoding, keywords,
viewport settings, and descriptions.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample website to demonstrate
meta tags in HTML.">
<meta name="keywords" content="HTML, meta tags, website, tutorial">
</head>
Unicode Transformation Format(UTF)-8:
•Encodes characters in 1 to 4 bytes.
•Most widely used encoding on the web.

1.2 Construct Well formed Page Markup:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample website to demonstrate meta
tags in HTML.">
<meta name="keywords" content="HTML, meta tags, website, tutorial">
<title>Meta Tags Example</title>
</head>
<body>
<h1>Welcome to Meta Tags Example</h1>
<p>This page demonstrates how to use meta tags in HTML.</p>
</body>
</html>
Session 3
Document Structure using HTML
3.1 Structure content and organize data

1.Table Tags:
Tables are used to organize data in rows and columns. Below are the key table
tags:
<table>:
Represents the table structure.
Contains rows (<tr>) and columns (<td> or <th>).
<tr> (Table Row)
Defines a single row in a table.
Contains table cells (<td> or <th>).
<th> (Table Header Cell)
Represents a header cell in a table.
Usually bold and centered by default.
Typically used for column or row headers.
<td> (Table Data Cell)
Represents a standard data cell in a table.
Contains data or content within a table row.
Example for Table:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>San Francisco</td>
</tr>
</table>
2.Heading Tags (<h1> to <h6>):
Define headings in a document.
<h1> is the most important heading (largest font size).
<h6> is the least important heading (smallest font size).
Used for structuring content hierarchically.

Example:
<h1>Main Heading</h1>
<h2>Sub heading</h2>
<h3>Sub-sub heading</h3>

3.Paragraph Tag (<p>):

Defines a block of text or a paragraph.
Automatically adds spacing above and below the text.

Example:
<p>This is a paragraph of text.</p>
(D2)

Sub-Tags inside <p> tag:

•<b> bold the the text.

•<i>Italicized the text

•<u>Give the underline to the text

•<mark>Highlights the text

•<strong>Bold the text by default.(Emphasis element)

•<em>Italicized the text by default

<p>You <em>must</em> complete the project today!</p>

•<abbr>: Abbreviation with an optional title

•<cite>:Cites a reference.
<p>One of the greatest novels ever written is <cite>Pride and
Prejudice</cite> by Jane Austen.</p>

•<q>:Adds an inline quotation

4.Line Break Tag (<br>):
Inserts a line break without starting a new paragraph.
Useful for breaking lines in text or poetry.

Example:
<p>This is line one.<br>This is line two.</p>

5.Horizontal Rule Tag (<hr>):

Creates a horizontal line across the page.
Used to separate content or sections visually.

Example:
<p>Section One</p>
<hr>
<p>Section Two</p>
6. Division Tag (<div>):
Defines a container for grouping and styling elements.
Typically used for layout and styling purposes with CSS.

Example:
<div style="background-color: lightblue;">
<h2>Welcome</h2>
<p>This is a content section.</p>
</div>

7. Span Tag (<span>):

Used to style or manipulate a small portion of text within a block.
The tag is easily styled by CSS or manipulated with JavaScript using the class or
id attribute.
The tag is much like the element, but not a block-level element and is an inline
element

Example:
<p>The <span style="color: red;">important</span> part of this text is red.</p>
8. Lists():
An HTML List allows you to organize data on web pages into an ordered or
unordered format to make the information easier to read and visually
appealing.
HTML Lists are very helpful for creating structured, accessible content in web
development

Types of List –
1. Ordered List(ul)
2. Unordered List(ol)
3. Definition List(dl)

Ordered List (ol):

 HTML Ordered List is created by the HTML tag (ol), to display elements in
an ordered form, either numerical or alphabetical.
 Each item within the list is placed within a tag(li), which stands for “list
item”.
 The list is automatically numbered by the browser, but the style of
numbering can be adjusted using attributes and CSS.
Example:
<ol type=“A”>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Unordered List(ul):
An HTML Unordered List () displays elements in a bulleted format.
List items within an unordered list are defined using the tag(li).
The tag requires both opening and closing tags.

Example:
<ul style=“list-style-type:disc”> /* circle and squre*/
<li>HTML</li>
<li>CSS</li>
<li>JAVA</li>
<li>Python</li>
</ul>
Definition List(dl):
A Definition List in HTML is used to display terms and their corresponding
descriptions in a structured format.
It uses <dt> and <dd> elements with it.

Elements of a Definition List

<dl>: The container for the definition list.
<dt>: Represents the term (definition term).
<dd>: Represents the description or definition of the term.
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for creating web
pages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling web pages.</dd>

<dt>JavaScript</dt>
<dd>A programming language for creating dynamic and interactive web content.</dd>
</dl>
(after)

3.2 Construct and Analyse Markup That Uses HTML5 Semantic Elements :
HTML5 introduced a range of semantic elements that clearly describe their
purpose in human and machine-readable language.
Unlike non-semantic elements, which provide no information about their
content, semantic elements clearly define their content.
For instance, , , and tags clearly define the content and purpose, to the
browser.
Semantic Tags – :
1.<header>:Contains introductory content like titles and navigation.
2.<nav>: Contains navigation links or menus.
3.<section>: Groups related content within the document.
4.<article>: Defines a self-contained content unit.
5.<aside>:Contains tangentially related content, often a sidebar.
6.<footer>: Contains footer content like copyright or contact information.

1.<header>:As the name suggests, it is for the header of a section introductory of a

page. There can be multiple headers on a page. It typically contains introductory
content, such as the logo, site title, or navigation links.
<header>
<h1>Welcome to Ethnotech…</h1>
<p>Learn html and css with hands on experience.</p>
</header>

2.<nav>:Defines a section of the webpage that contains navigation links. It is used to

group the navigation menu or links.
<nav>
<ul>
<li><a href=“html.com”>Html</a></li>
<li><a href=“html.com”>Html</a></li>
</ul>
</nav>
3.<section>:A page can be split into sections like Introduction, Contact
Information, Details, etc and each of these sections can be in a different section
tag. It is used for thematic grouping of content such as chapters, groupings of
related content, etc.
<section id=“courses”>
<h1>Our Courses</h1>
<p>Explore the various technology course offered by Ethnotech</P>
</section>

4.<article>: The tag is used for content that stands alone and can be
independently distributed or reused, such as a blog post or news article.
<article>
<h1>Introduction to robotics</h1>
<p>This course will guide you to build your first robot</p>
</article>
5.<aside>: It is used to place content in a sidebar i.e. aside from the existing
content. It is related to surrounding content. It is often used for sidebars or
related links(e.g :gfg)
<aside>
<h1>upcoming Webinars</h1>
<ul>
<li>Introduction to Data science – January 15</li>
<li>Introduction Web design – February 25</li>
</ul>
</aside>

6.<footer>: Defines the footer of a page or section. Footer located at the

bottom of any article or document, they can contain contact details, copyright
information etc.
<footer>
<p>&copy; 2024 Ethnotech Academy, All rights reserved</p>
</footer>

Example including all tags:

3.3 Construct and analyse markup that implements navigation:
A navigation menu is the element we see in any website. It allows users to explore
different pages and sections easily.

1.target Attribute:
Purpose: Specifies where to open the linked document.
Common Values:
_self: Default. Opens the link in the same tab.
_blank: Opens the link in a new tab or window.
Example; <a href="https://example.com" target="_blank">Open in New
Tab</a>

2.Anchor (<a href> Tag):

Purpose: Creates hyperlinks to navigate to other pages, files, or locations within
the same page.
Structure:
href: Specifies the URL or file path of the link.
target: Specifies where to open the link (as explained above).
title: Adds additional information about the link.
Example; <a href="https://example.com" title="Visit Example">Visit
Example</a>
3. Bookmark:
Purpose: Links to a specific location within the same webpage using id and #.
Steps:
Assign an id to the target element.
Use #id in the href to create the link.
Example: <h2 id="section1">Section 1</h2>
<a href="#section1">Go to Section 1</a>

4. Relative vs. Absolute Links:

Relative Links:
Purpose: Point to resources within the same website or folder.
Example: about.html (same folder)
<a href=“about.html">Absolute Link</a>

Absolute Links:
Purpose: Point to resources with the full URL, including the domain name.
Example: <a href="https://example.com/page.html">Absolute Link</a>
5. Navigating Simple Folder Hierarchies:
Example:
website/
├── index.html
├── about/
│ └── team.html
├── images/
│ └── logo.png

From index.html to team.html:

<a href="about/team.html">Team Page</a>

From team.html to logo.png:html

<img src="../images/logo.png" alt="Logo">
6. <map> and <area>:
<map>:
Purpose: Defines an image map, which allows specific areas of an image to be clickable.
<area>:
Purpose: Defines the clickable regions within the image map.

Example:
<img src="world-map.jpg" usemap="#worldmap" alt="World Map">

<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="https://example.com/north-america"
alt="North America">
<area shape="circle" coords="200,200,50" href="https://example.com/europe"
alt="Europe">
</map>

Attributes of <area>:
shape: Shape of the clickable area (rect, circle, poly).
coords: Coordinates for the area.
href: Link to navigate when the area is clicked.
alt: Alternative text for accessibility.
Topic Purpose Example
Specifies where to open a <a href="url"
target
link target="_blank">Link</a>
<a
Anchor (<a>) Creates hyperlinks
href="https://example.com">Visit</a>
Links to a specific location <a href="#section1">Go</a> <h2
Bookmark
within the page id="section1">Section</h2>
<a
Relative Links Links within the same site
href="about/team.html">Team</a>
<a
Absolute
Links with full URL href="https://example.com">Example
Links
</a>
Folder
Navigates files in a folder <img src="../images/logo.png">
Hierarchy
<map><area shape="rect"
<map> & Defines clickable regions
coords="0,0,100,100"
<area> on an image
href="url"></area></map>
D3

3.4 Construct and analyse markup that uses form elements.

Forms are used to collect user input and send it to a server for processing. The <form>
element wraps all input elements.
1. <form> Attributes:
a. action
Purpose: Specifies the URL where the form data will be sent.
Example:
<form action="submit-form.php">
<!-- Form content -->
</form>

b. method
Purpose: Defines how the form data is sent to the server.
Values:
GET: Appends form data to the URL (visible, less secure).
POST: Sends data in the request body (not visible, more secure).
Example:
<form action="submit-form.php" method="POST">
<!-- Form content -->
</form>
2. Input Types and Restrictions :

HTML forms support a variety of input types, and some input types allow you to
set restrictions on the data entered.
Common Input Types:
Text Input: <input type="text" name="username" placeholder="Enter your
name">
Password Input: <input type="password" name="password" placeholder="Enter
your password">
Email Input: <input type="email" name="email" placeholder="Enter your
email">
Number Input: <input type="number" name="age" min="1" max="100">
Date Input: <input type="date" name="dob">
Checkbox: <input type="checkbox" name="subscribe" value="yes"> Subscribe
to newsletter
Radio Buttons: <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Submit Button: <input type="submit" value="Submit">
Restrictions:
• required: Makes a field mandatory.
<input type="text" name="username" required>
• maxlength: Limits the number of characters.
<input type="text" name="username" maxlength="10">

3. <select> tag:
Purpose: Creates a dropdown list.
<select name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>

4.<option>:
Purpose: Represents an item in a <select> dropdown.
Attributes:
value: The data sent to the server.
selected: Pre-selects the option
<select>
<option value="red" selected>Red</option>
<option value="blue">Blue</option>
</select>
5. <textarea>:
Purpose: Allows multi-line text input.
<textarea name="message" rows="5" cols="30" placeholder="Enter your
message"></textarea>

6. <button>:
Purpose: Creates a clickable button.
Types:
submit: Submits the form.
reset: Resets the form fields.
button: A generic button (doesn't perform any action by default).
Example:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

7.<label>:
Purpose: Provides a caption for an input element, improving accessibility.
For Attribute:
Links the <label> to the input's id.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Session 4:
Multimedia Presentation using HTML
(after)
Multimedia combines different media, such as images, audio, and videos. Users will have a
better experience when multimedia is embedded into HTML.

4.1 Construct and Analyse Markup That Displays Images:

The <img> and <picture> elements are used to display images on a webpage.

1. <img> Element:
The <img> element is used to embed images in a webpage.
Example: <img src="image-url" alt="alternative text" width="width"
height="height">
Common Attributes:
1.src (Source):
• Specifies the URL of the image.
• Can be a relative or absolute URL.
2.alt (Alternative Text):
•Provides descriptive text for the image, displayed if the image cannot load.
•Improves accessibility for screen readers.
3.width and height:
Set the image's dimensions (in pixels or percentages).

4.title:
Provides additional information about the image as a tooltip when hovered.

2. <picture> Element:
The <picture> element allows for more advanced control over which image to
display based on screen size, resolution, or format.
Example:
<picture>
<source srcset="image-1.jpg" media="(min-width: 768px)">
<source srcset="image-2.jpg" media="(max-width: 767px)">
<img src="fallback-image.jpg" alt="Fallback Image">
</picture>

•The <source> elements define different images for various conditions using:
srcset: Specifies the URL of the image.
media: Defines a media query for when the image should be displayed.
•The <img> element acts as a fallback if none of the <source> conditions are
met.
 Comparison between <img> and <picture>:

Feature <img> <picture>

Allows multiple images for

Basic Usage Embeds a single image.
different conditions.

Full control with <source>

Responsive Images Limited (with srcset).
and media queries.

None; relies on the alt Built-in fallback with

Fallback Support
text. <img>.

Advanced, responsive
Use Case Simple images.
designs.
4.2HTML Markup for Playing Video and Audio:
HTML provides several elements to embed and control video and audio content
on web pages. These include <video>, <audio>, <track>, <source>, and
<iframe>.

1. <video> Element:
The <video> element is used to embed videos on a webpage.
<video src="video.mp4" controls></video>

Attributes:
controls: Displays play, pause, volume, and other controls.
autoplay: Starts playing the video automatically when the page loads.
loop: Repeats the video when it ends.
muted: Starts the video with the sound muted.

2. <audio> Element:
The <audio> element is used to embed audio files.
<audio src="audio.mp3" controls></audio>
3. <source> Element:
The <source> element is used inside <video> or <audio> to specify multiple media
formats for better browser compatibility.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

4. <track> Element:
The <track> element is used to add subtitles, captions, or other text tracks to videos.
Attributes:
kind: Specifies the type of track (e.g., subtitles, captions, descriptions).
src: URL of the track file.
srclang: Language of the track (e.g., en for English).
label: Label for the track.

<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
5. <iframe> Element:
The <iframe> element embeds external content, such as videos from platforms
like YouTube.

<iframe src="https://www.youtube.com/embed/videoID" width="560"

height="315" allowfullscreen></iframe>

Attributes:
src: URL of the embedded content.
width and height: Dimensions of the embedded content.
allowfullscreen: Allows fullscreen mode for the embedded video.
CSS Fundamentals
Cascading Style Sheets(CSS):

It is a stylesheet language used to style and enhance website presentation.

CSS is one of the main three components of a webpage along with HTML and
JavaScript. HTML adds Structure to a Webpage, JavaScript adds logic to it and CSS
makes it visually appealing or stylish.
It controls the layout of a web page i.e. how HTML elements will be displayed
on a webpage.
CSS comments are used to add notes or explanations to your code, helping you
and others understand it better. They start with /* and end with */ and can be
used for both singleline and multi-line comments.
2.1 Analyse and implement inline styles, internal (embedded) style sheets, and
external style sheets
There are three different ways to add CSS styles to an HTML document, these are Inline,
Internal and External.

1. Inline CSS
The style attribute is used within HTML tags to define styles directly. Use the style
attribute on the HTML element to add styles to the web page. It is used for small projects.
Exaple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Welcome to Inline CSS Example</h1>
<p style="font-size: 18px; color: green;">This paragraph uses inline CSS to set the font
size and color.</p>
</body>
</html>
2. Internal CSS:
Place the CSS styles within a section.
When to Use: Styling for a single-page project or unique styles not shared across
multiple pages.
Benefits: All styles are in one place, making it easier to manage compared to
inline styles
Example:

3. External CSS:
Create a separate CSS file with a .css extension and link this file to your HTML
file using the <link> tag.
When to Use: Large projects with multiple pages needing consistent styling.
Allows separation of structure (HTML) and presentation (CSS).
Benefits: Reusable styles across many pages, easier maintenance.
Example:
CSS Precedence:
Combining Inline Styles, Internal, and External Styles. When multiple CSS rules
target the same element, CSS specificity and precedence determine which
style is applied.

The following order of precedence is generally followed:

1. Inline Styles (highest precedence).
2. Internal (Embedded) Styles (within a section).
3. External Stylesheets (linked via tag in the HTML document).
4. Browser Default Styles (lowest precedence).

Key Factors in Precedence:

Inline styles always override internal and external styles because they are
applied directly to an element.
Example:
2.2 Construct and Analyse CSS Rule Sets:
A CSS rule set consists of a selectors and a declaration block. It defines how selected
HTML elements should be styled.
Syntax:
selector {
property: value;
/* Example: color: blue; */
}

CSS Selectors:
A CSS selector is a pattern or rule used to select and target specific HTML
elements for styling.
1.Universal Selector (*)
Selects all elements on the page.
*{
margin: 0;
padding: 0;
}
2.Type Selector (Element Selector)
Targets all elements of a specific type (e.g., all <p> tags).
p{
color: blue;
}

3.Class selector(.classname):
Targets elements with a specific class.
.highlight {
background-color: yellow;
}

4. ID Selector (#idname)
Targets a specific element with a unique ID.
#header {
font-size: 24px;
}
4. Pseudo-class Selector
Targets elements based on their state
a:hover{
Color:red;
}

Targetting multiple selectors:

h1,h2,h3{
color:red;
}

Nesting with Descendent selector:

Targets child element within the parent.
div p{
color:green;
}
Session 5
Web Styling using CSS
D4

5.1 Construct and analyze styles that position content:

Positioning:
Positioning in CSS determines how elements are placed on a web page.
1.static (Default Positioning)
• Default value for all elements.
• Elements are positioned in the normal document flow.
• Cannot be adjusted using top, right, bottom, or left.
2.relative
• Positioned relative to its original position in the normal document flow.
• You can adjust its position using top, right, bottom, and left.
3.absolute
•Positioned relative to its nearest positioned ancestor (an element with position:
relative, absolute, or fixed).
•If no positioned ancestor exists, it’s positioned relative to the <html> element.

<div style="position: relative; width: 300px; height: 200px; background-color:lightblue;">

<div style="position: absolute; top: 50px; left: 30px; background-color: lightgreen;">
I am absolutely positioned!
</div>
</div>
4.Fixed 5.sticky
•Positioned relative to the viewport.
•Does not move when the page is scrolled.

5.float
•Positions elements to the left or right, allowing text or inline elements to wrap
around it.
•Often used for layouts, though modern CSS (like Flexbox and Grid) is preferred .

Size and Overflow Properties:

1.max-width
•Sets the maximum width an element can take.
•Prevents elements from growing beyond the specified value.

2.overflow
Specifies how content should behave if it overflows its container.
Values:
visible (default): Content overflows visibly.
hidden: Hides overflowing content.
scroll: Adds scrollbars to view overflowing content.
auto: Adds scrollbars only when necessary.
3.height and width
•Control the size of an element.
•Can be set in pixels, percentages, or other units.

Alignment and Display:

1.Align
Used for text alignment (text-align) or aligning items in layouts (Flexbox or Grid).

2.display
Defines how an element is displayed.
Common values:
block: Element takes up the full width.
inline: Element only takes up as much width as necessary.
inline-block: Combines properties of both block and inline elements.
none: Hides the element (removes it from the layout).
3.Inline vs. Block Elements
Inline: Does not start on a new line, only takes up as much width as
necessary. Examples: <span>, <a>.
Block: Starts on a new line, takes up the full width. Examples: <div>, <p>.
Visibility:
•Controls whether an element is visible or hidden.
•visibility: hidden: Hides the element, but it still occupies space in the layout.

(after) Box Model:

The box model defines how elements are sized and spaced. It consists of:
Content: The actual content of the box.
Padding: Space between content and border.
Border: The edge of the box.
Margin: Space outside the border (separates the element from others).

Margins and Padding:

1.Margin
•Creates space outside the element.
•Can be set for each side: margin-top, margin-right, etc.

2.padding
•Creates space inside the element, between content and border.
•Can be set for each side: padding-top, padding-right, etc.
5.2 Construct and analyze styles that format text:

Font and Text Properties:

1. font-family
•Specifies the font(s) to be used for text.
•You can list multiple fonts as a fallback (if the first font is unavailable, the next
one is used).
Exapmle: font-family: Arial, Helvetica, sans-serif;

2.color text –shadow:

• Sets the color of the text. The text-shadow property adds shadow to
Can use: text.
• Named colors (red, blue). In its simplest use, you only specify the
• Hexadecimal values (#FF5733). horizontal shadow (2px) and the vertical
• RGB/RGBA (rgb(255, 87, 51)). shadow (2px).
3.font-style Example:
Defines the style of the font. Common values:
normal: Default style.
P{
italic: Italicized text. text-shadow: 2px 2px 5px red;
oblique: Slanted text. }
4. font-size:
Sets the size of the text.
Units:
Absolute: px, pt, etc.
Relative: %, em, rem, vw.

Percentage (%)
•Represents a percentage relative to the parent element.
•Used for widths, heights, padding, margins, etc.

em
•Relative to the font size of the element’s parent.
•Useful for scaling text or spacing proportionally.
Example:
If the parent font size is 16px:1em equals 16px.
2em equals 32px.

rem
•Relative to the root element’s font size (default is 16px in most browsers).
•More consistent than em since it doesn’t depend on parent elements.
•Regardless of the parent’s font size, 1rem is always based on the root font size.
Viewport Width (vw)
Relative to the width of the browser viewport.
1vw equals 1% of the viewport width.

Example by using all together:

5. font-weight
Specifies the thickness of the text. Common values:
normal (400), bold (700), lighter, bolder.
Numerical values: 100 to 900.

6.font-variant
Controls the display of text in small caps.
Common values:
normal: Default text.
small-caps: Displays lowercase letters as small uppercase.
Link Colors:
1. Link Pseudo-classes
Control how links are styled based on their state:
a:link: Unvisited links.
a:visited: Visited links.
a:hover: Links when hovered.
a:active: Links being clicked.

Text Formatting:
1. text-align
Aligns text horizontally.
Common values:
left (default), right, center, justify.

2.text-decoration
Adds or removes decoration on text.
Common values:
none, underline, overline, line-through, blink.
3.line-height:
•Sets the space between lines of text.
Common values:
Number (1.5), unit (20px), percentage (150%).

4.word-wrap (or overflow-wrap):

•Specifies how words should break when they exceed the container width.
Common values:
normal: Breaks only at allowed breakpoints.
break-word: Breaks words at arbitrary points.

5.letter-spacing:
•Adjusts the space between characters in text.
•Can use positive or negative values.

6.text Transform:
• We will use this property to change the text appearance.
Common values: uppercase, lowercase and capitalize.
5.3 Construct and analyze styles that format backgrounds and borders:
Border Properties
1.border-color
Specifies the color of the border.
Accepts:
Named colors (red, blue, etc.).
Hexadecimal values (#FF5733).
RGB/RGBA (rgb(255, 87, 51)).

2.border-style
Specifies the style of the border.
Common values:
none: No border.
solid: A solid line.
dotted: A series of dots.
dashed: A series of dashes.
double: Two solid lines.
groove, ridge, inset, outset: 3D effects.
3.border-width
•Sets the thickness of the border.
•Can use absolute units (px, pt, etc.) or keywords (thin, medium, thick).

Shorthand: border
Combines all border properties in one line.
Syntax: border: <width> <style> <color>;

Background Properties:
1.background-color
•Sets the background color of an element.
•Accepts the same color values as border-color.

2.background-image
Specifies an image as the background.

3.background-position
Sets the position of the background image.
Common values:
Keywords: top, bottom, left, right, center.
Percentages or lengths: 50% 50% or 10px 20px.
4.background-size
Specifies the size of the background image.
Values:
auto: Default size.
cover: Scales to cover the entire element.
contain: Scales to fit within the element.

5.background-attachment
Determines whether the background scrolls with the page.
Values:
scroll (default): Moves with the page.
fixed: Stays fixed while the page scrolls.

Shorthand: background
Combines all background properties.
Syntax:
background: <color> <image> <position> / <size> <attachment>;

Example:
background: lightblue url('image.jpg') center / cover fixed;
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element.

Example:
p{
border: 2px solid red;
border-radius: 5px;
}

p.normal {
border: 2px solid red;
padding: 5px;
}

p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
D5 CSS Transitions:
The transition property allows you to create smooth animations between two
states of an element when a change occurs (e.g., hover, focus).
Syntax:
transition: property duration timing-function;
Here,
property: The CSS property to animate (e.g., background-color, transform).
duration: The time it takes for the transition (e.g., 0.5s or 500ms).
timing-function: The speed curve of the transition (e.g., ease, linear, ease-in-
out).

CSS Transformations:
The transform property allows you to apply geometric transformations like
scaling, rotating, translating, or skewing elements.
Common Transform Functions:
translate(x, y): Moves the element.
Example: transform: translate(50px, 100px);
rotate(angle): Rotates the element.
Example: transform: rotate(45deg);
scale(x, y): Scales the element.
Example: transform: scale(1.5); (1.5 times larger)
 Flex:
Flex is used arrange elements in a row or column, making it easier to create
responsive designs.
Property Description Values

display Enables Flexbox flex / inline-flex

row, row-reverse, column,

flex-direction Sets direction of items
column-reverse

flex-start, flex-end, center,

align-items Aligns items vertically
stretch, baseline

flex-wrap Wraps items to new line nowrap, wrap, wrap-reverse

justify-content Aligns items horizontally flex-start, flex-end, center,

space-between, space-
around, space-evenly
Flex Item Properties:

Property Description Values

Defines how much an

flex-grow 0 (default), 1, 2, etc.
item should grow

Defines how much an 1 (default), 0 (no

flex-shrink
item should shrink shrink)

Sets initial size of an

flex-basis auto, 100px, 50%, etc.
item
Grids

CSS Grid Layout

A powerful 2D layout system for creating grid-based designs.
Define rows and columns using grid-template-rows and grid-template-columns
Example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-gap: 10px; /* Space between grid items */
}
.grid-item {
background-color: lightgray;
}
Grid Parent or Container Properties:
Property Description Example

display Enables Grid layout grid / inline-grid

Defines column 100px 200px auto /

grid-template-columns
structure repeat(3, 1fr)

50px auto 100px /

grid-template-rows Defines row structure
repeat(2, 1fr)
Space between grid
gap 10px / 10px 20px
items
Aligns grid items start / center / end /
justify-content
horizontally space-between
Aligns grid items
align-content start / center / end
vertically

Flexbox vs. Grid

Flexbox: Best for 1D layouts (row or column).

Grid: Best for 2D layouts (rows and columns).
Media Queries:
Media queries allow you to apply different styles based on device characteristics
like screen size, resolution, orientation, or aspect ratio. They are the foundation
of responsive web design.
Syntax:
@media (condition) {
/* CSS rules here */
}

Common Conditions:
Width-based Queries:
• min-width: Apply styles when the screen width is at least the specified
value.
• max-width: Apply styles when the screen width is at most the specified
value.
Orientation:
orientation: portrait: When the screen height is greater than the width.
orientation: landscape: When the screen width is greater than the height.
Responsive Breakpoints
Breakpoints are specific screen widths where the design should adapt. These are
commonly used:
320px: Small phones.
576px: Phones.
768px: Tablets.
992px: Small desktops.
1200px: Large desktops.
body {
font-size: 16px;
}

@media (max-width: 768px) {

body {
font-size: 14px;
}
}

@media (max-width: 576px) {

body {
font-size: 12px;
}