Scribd
Upload
6 views55 pages

Teks HTML and CSS Notes

HTML, or HyperText Markup Language, is the foundational language for creating and designing web pages, providing structure, accessibility, and a basis for interactivity with JavaScript and CSS. A basic HTML document consists of a doctype declaration, a head section for meta-information, and a body section for visible content, utilizing various tags for headings, paragraphs, links, images, and lists. HTML5 introduced semantic elements to enhance content meaning and accessibility, along with form elements for user input and tables for data organization.

Uploaded by

Dineshkumar Komari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views55 pages

Teks HTML and CSS Notes

HTML, or HyperText Markup Language, is the foundational language for creating and designing web pages, providing structure, accessibility, and a basis for interactivity with JavaScript and CSS. A basic HTML document consists of a doctype declaration, a head section for meta-information, and a body section for visible content, utilizing various tags for headings, paragraphs, links, images, and lists. HTML5 introduced semantic elements to enhance content meaning and accessibility, along with form elements for user input and tables for data organization.

Uploaded by

Dineshkumar Komari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 55

What is HTML?

HTML stands for HyperText Markup Language. It is the foundational language used to create
and design web pages.

Why Do We Use HTML?

 Structure: HTML helps in organizing and structuring content on the web. It tells the
browser how to display text, images, and other elements.
 Accessibility: HTML makes content accessible and understandable to both users and
search engines.
 Interactivity: While HTML itself doesn’t add interactive features, it sets up the structure
for adding JavaScript and CSS to enhance user experiences.

Basic HTML Document Structure

An HTML document is like a recipe that tells a web browser how to display a webpage. Here's a
simple breakdown of its structure:

1. HTML Document: Every HTML document starts with the <!DOCTYPE html>
declaration, followed by the <html> tag, which wraps all the content on the page.

<!DOCTYPE html>
<html>
</html>

2. Head Section: The <head> section contains meta-information about the webpage, such
as the title, links to stylesheets, and character encoding. This part is not visible on the
webpage itself but crucial for how the page is handled.

<head>
<title>My First Webpage</title>
</head>

3. Body Section: The <body> section includes all the content that users see on the webpage,
such as text, images, links, and more.

<body>
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph of text.</p>
</body>

Common HTML Tags

Here are some basic HTML tags and what they do:
 Headings: Tags like <h1>, <h2>, <h3>, etc., are used for headings, with <h1> being the
largest and most important.

<h1>This is a Heading</h1>

 Paragraphs: The <p> tag is used for paragraphs of text.

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

 Links: The <a> tag is used to create hyperlinks. The href attribute specifies the URL of
the link.

<a href="https://www.example.com">Visit Example</a>

 Images: The <img> tag is used to display images. The src attribute specifies the path to
the image file, and alt provides alternative text for accessibility.

<img src="image.jpg" alt="A description of the image">

 Lists: Lists can be ordered (<ol>) or unordered (<ul>), with items defined using the
<li> tag.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Attributes

HTML tags can have attributes that provide additional information about an element. Attributes
are placed within the opening tag and usually come in name-value pairs.

 Example: The href attribute in a link tag tells the browser where to go when the link is
clicked.

<a href="https://www.example.com" target="_blank">Visit Example</a>

o href="https://www.example.com" specifies the link’s destination.


o target="_blank" makes the link open in a new tab.

Semantic HTML

HTML5 introduced semantic elements to give meaning to the structure of a webpage. This helps
both humans and machines (like search engines) understand the content better.

 <header>: Contains introductory content or navigational links.


 <footer>: Contains footer information, such as contact details or copyright statements.
 <article>: Represents a self-contained piece of content, such as a blog post or news
article.
 <section>: Groups related content together, like different sections of a page.

Forms

Forms are used to collect user input. HTML provides several elements to create forms:

 <form>: Wraps the entire form.


 <input>: Defines various types of input fields (text, checkbox, radio button, etc.).
 <textarea>: Allows users to enter multiple lines of text.
 <button>: Creates clickable buttons.

<form action="/submit" method="post">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

-----------------------------------------------------------------------<b>:
Bold Text

 Purpose: The <b> tag is used to make text bold.


 Usage: It does not indicate any extra importance or semantic meaning; it purely changes
the text appearance.
 Example:

<b>This text is bold.</b>

Note: For semantic emphasis, it’s better to use <strong> instead.

2. <strong>: Strong Importance

 Purpose: The <strong> tag is used to give text strong importance, typically displayed as
bold by default.
 Usage: It indicates that the enclosed text is of strong importance, which is useful for
conveying meaning to screen readers and search engines.

<strong>This text is of strong importance.</strong>

Note: The <strong> tag is preferred over <b> when the emphasis conveys meaning.

3. <i>: Italic Text

 Purpose: The <i> tag is used to italicize text.


 Usage: It’s often used for text that is meant to be displayed in italics, but does not
necessarily convey any semantic meaning.
 Example:

<i>This text is italicized.</i>

Note: For semantic emphasis, the <em> tag is a better choice.

4. <em>: Emphasis

 Purpose: The <em> tag is used to emphasize text, which is typically displayed in italics.
 Usage: It conveys that the text should be stressed or emphasized, providing semantic
meaning, which is beneficial for accessibility tools and search engines.
 Example:

<em>This text is emphasized.</em>

Note: The <em> tag is preferred over <i> for conveying emphasis.

5. <u>: Underlined Text

 Purpose: The <u> tag is used to underline text.


 Usage: It’s mainly used to represent text that should be underlined, though it is not
commonly used for general styling in modern HTML and CSS practices.
 Example:

<u>This text is underlined.</u>

Note: For underlining text in modern practice, CSS is often used (text-decoration:
underline).

6. <mark>: Highlighted Text

 Purpose: The <mark> tag is used to highlight text, typically with a yellow background.
 Usage: It indicates that the text is of special interest or importance, often used for
highlighting search terms or relevant information.
 Example:

<mark>This text is highlighted.</mark>

7. <s>: Strikethrough Text

 Purpose: The <s> tag is used to show text with a strikethrough or line through it.
 Usage: It indicates that the text is no longer accurate or relevant, but it does not convey
semantic meaning about why it is struck through.
 Example:

<s>This text is struck through.</s>


Note: For representing text that is deleted or no longer relevant, consider using the <del>
tag instead.

8. <sup>: Superscript Text

 Purpose: The <sup> tag is used to display text as superscript, which appears slightly
above the normal line of text.
 Usage: Commonly used for mathematical exponents or footnotes.
 Example:

html
Copy code
E=mc<sup>2</sup>

9. <sub>: Subscript Text

 Purpose: The <sub> tag is used to display text as subscript, which appears slightly below
the normal line of text.
 Usage: Often used for chemical formulas or mathematical notations.
 Example:

html
Copy code
H<sub>2</sub>O

10. <del>: Deleted Text

 Purpose: The <del> tag is used to show text that has been deleted from a document.
 Usage: It indicates that the text has been removed
 Example:

<del>This text has been deleted.</del>

Note: For indicating changes or removals in documents, the <del>

Lists:

HTML provides three main types of lists to help organize information on web pages: Unordered
Lists, Ordered Lists, and Description Lists. Each type serves a specific purpose and helps
present content in a clear and structured way.

1. Unordered Lists (<ul> and <li>):

What is it?
An unordered list is a way to group a set of items where the order does not matter. The items are
typically marked with bullet points.
When to use it:
Use unordered lists for items where the sequence is not important. For example, you might use
an unordered list to display a list of groceries or features of a product.

Structure:

 <ul>: The container tag for the unordered list.


 <li>: The list item tag used for each individual item in the list.

Example:

<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>

What it looks like:

 Milk
 Bread
 Eggs

2. Ordered Lists (<ol> and <li>):

What is it?
An ordered list is used when the sequence of items is important. The items are displayed with
numbers or letters to show their order.

When to use it:


Use ordered lists for instructions or steps where the sequence is critical. For example, a recipe or
a set of steps to solve a problem.

Structure:

 <ol>: The container tag for the ordered list.


 <li>: The list item tag used for each individual item in the list.

Example:

html
Copy code
<ol>
<li>Preheat the oven to 375°F.</li>
<li>Mix flour, sugar, and eggs.</li>
<li>Bake for 25 minutes.</li>
</ol>
What it looks like:

1. Preheat the oven to 375°F.


2. Mix flour, sugar, and eggs.
3. Bake for 25 minutes.

3. Description Lists (<dl>, <dt>, and <dd>):

What is it?
A description list is used for lists where you want to define terms and their descriptions.

When to use it:


Use description lists to present terms and their explanations, such as a glossary of terms or a list
of frequently asked questions.

Structure:

 <dl>: The container tag for the description list.


 <dt>: Defines a term in the list.
 <dd>: Provides the description or definition of the term.

Example:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to create web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML elements.</dd>
</dl>

What it looks like:

 HTML: HyperText Markup Language, used to create web pages.


 CSS: Cascading Style Sheets, used to style HTML elements.

4. Nested Lists:

What is it?
Nested lists are lists within lists. You can create complex structures by placing one list inside
another.

When to use it:


Use nested lists to represent hierarchical information or to group related items under a main
category.
Structure:

You can nest <ul> or <ol> lists inside each other.

Example:

<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>

What it looks like:

 Fruits
Apple
o
Banana
o
 Vegetables
o Carrot
o Broccoli

5. List Attributes:

Attributes for Ordered Lists:

 typeAttribute: Specifies the type of numbering (e.g., numbers, letters, Roman


numerals).

Example:

<ol type="a">
<li>First item</li>
<li>Second item</li>
</ol>

Rendering:

a. First item
b. Second item
 start Attribute: Specifies the starting number for the list.

Example:

<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>

Rendering:

5. Fifth item
6. Sixth item

HTML Tables

HTML tables are essential for presenting data in rows and columns, making it easier to organize
and compare information. Tables are used in many contexts, such as displaying schedules,
reports, or data sets.

1. Basic Table Structure

A basic HTML table is made up of several key elements. Each element has a specific role:

<table>

 Purpose: Defines the entire table.


 Example: Wraps around all the other table elements.

<table>
<!-- Table content goes here -->
</table>
<tr> (Table Row)

 Purpose: Defines a row in the table.


 Example: Each <tr> contains one or more <th> or <td> elements.

<tr>
<!-- Table cells go here -->
</tr>
<th> (Table Header Cell)

 Purpose: Defines a header cell. Header cells are bold and centered by default.
 Example: Used to label columns, such as "Name" or "Age."

<th>Header Text</th>
<td> (Table Data Cell)

 Purpose: Defines a regular cell that contains data.


 Example: Used to display data in rows, such as names or numbers.

<td>Data</td>

Example of a Simple Table

Here’s how these elements come together to form a table:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Sri</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Anu </td>
<td>16</td>
<td>B</td>
</tr>
</table>

Explanation:

 <table border="1">: Defines the table and adds a border around the table cells.
 <tr>: Defines rows.
 <th>: Defines header cells in the first row.
 <td>: Defines data cells in the following rows.

2. Adding a Caption

A table caption provides a title or description for the table. It helps users understand what the
table is about.

<table border="1">
<caption>Student Grades</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
<tr>
<td>Sri </td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Anu</td>
<td>16</td>
<td>B</td>
</tr>
</table>

Explanation:

 <caption>: Adds a title above the table, providing context.

Document Declaration and Basic Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<h1>Table Example</h1>
<!-- Table code here -->
</body>
</html>

 <!DOCTYPE html>: Defines the document type and version (HTML5 in this case).
 <html lang="en">: Specifies the language of the document (English).
 <head>: Contains meta-information about the document, including character set and viewport
settings.
 <meta charset="UTF-8">: Ensures the document uses the UTF-8 character encoding.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Sets the viewport for responsive design.
 <title>Table</title>: Defines the title of the web page.
 <body>: Contains the content of the document, including the heading and table.

2. Main Table

<table border="2px" style="border-collapse: collapse;background-color:


yellow;" cellpadding="10px" cellspacing="10px" width="400px">
<tr>
<th>SID</th>
<th colspan="2">SNAME</th>
</tr>
<tr>
<td>101</td>
<td>Sri</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td>102</td>
<td>
<!-- Nested Table here -->
</td>
</tr>
</table>

 <table border="2px" style="border-collapse: collapse;background-color:


yellow;" cellpadding="10px" cellspacing="10px" width="400px">:
o border="2px": Adds a 2-pixel border around the table cells.
o style="border-collapse: collapse;background-color: yellow;": Uses
inline CSS to collapse table borders into a single border and sets the background color of
the table to yellow.
o cellpadding="10px": Adds padding inside each cell.
o cellspacing="10px": Adds space between cells.
o width="400px": Sets the table width to 400 pixels.

 First Row:

<tr>
<th>SID</th>
<th colspan="2">SNAME</th>
</tr>

o <tr>: Defines a row in the table.


o <th>SID</th>: Header cell for "SID".
o <th colspan="2">SNAME</th>: Header cell for "SNAME" that spans across two
columns.

 Second Row:

<tr>
<td>101</td>
<td>Sri</td>
<td rowspan="2">100</td>
</tr>

o <td>101</td>: Data cell for "101".


o <td>Sri</td>: Data cell for "Sri".
o <td rowspan="2">100</td>: Data cell with "100" that spans across two rows.

 Third Row:

<tr>
<td>102</td>
<td>
<!-- Nested Table here -->
</td>
</tr>
o <td>102</td>: Data cell for "102".
o <td>: Contains a nested table.

3. Nested Table

<table border="2px" width="250px" style="border-collapse: collapse;background-


color: aqua;">
<tr>
<th>phn.num</th>
<th>DOJ</th>
</tr>
<tr>
<td>12345</td>
<td>9/12/2024</td>
</tr>
<tr>
<td>678910</td>
<td>9/12/2024</td>
</tr>
</table>

 <table border="2px" width="250px" style="border-collapse:


collapse;background-color: aqua;">:
o border="2px": Adds a 2-pixel border around the nested table cells.
o width="250px": Sets the width of the nested table to 250 pixels.
o style="border-collapse: collapse;background-color: aqua;": Uses inline
CSS to collapse borders and set the background color to aqua.

 Nested Table Rows and Cells:


o Header Row:

<tr>
<th>phn.num</th>
<th>DOJ</th>
</tr>

 Defines the headers for phone numbers and dates of joining.


o Data Rows:

<tr>
<td>12345</td>
<td>9/12/2024</td>
</tr>
<tr>
<td>678910</td>
<td>9/12/2024</td>
</tr>

 Displays data for phone numbers and dates.

 Tables are used to organize data in rows and columns.


 Basic Table Tags:
o <table>: Wraps the entire table.
o <tr>: Defines a row.
o <th>: Defines a header cell.
o <td>: Defines a data cell.
 Attributes:
o border: Adds a border around the table or cells.
o cellpadding: Adds space inside each cell.
o cellspacing: Adds space between cells.
o colspan: Allows a cell to span multiple columns.
o rowspan: Allows a cell to span multiple rows.
 Nested Tables: Tables within tables are useful for more complex data layouts
 --------------------------------------------------------------------------------------------------------------------------------

Introduction to HTML Forms

HTML forms are crucial for web applications because they allow users to interact with a website
by providing information. Whether it’s filling out a contact form, signing up for a newsletter, or
submitting an order, forms facilitate data collection from users.

Key Components of an HTML Form

1. Form Element (<form>):


o The <form> tag wraps all form elements and defines how the data will be sent.
o Attributes:
 action: The URL to which the form data is sent upon submission.
 method: Determines how data is sent. Common methods are:
 GET: Appends data to the URL. Suitable for non-sensitive
information.
 POST: Sends data in the request body. More secure for sensitive
information.
2. Labels (<label>):
o Labels provide a user-friendly way to describe form fields.
o Each label is associated with a specific input field using the for attribute, which
enhances accessibility by allowing screen readers to associate the label with the
input.
3. Input Fields (<input>):
o Different types of input fields allow for various kinds of user input.
o Common types include:
 Text: Single-line input (<input type="text">)
 Email: Validates email format (<input type="email">)
 Password: Hides input text (<input type="password">)
 Checkbox: Allows users to select multiple options (<input
type="checkbox">)
 Radio Button: Lets users select one option from a group (<input
type="radio">)
 Number: Accepts numeric input (<input type="number">)
Date: Enables date selection (<input type="date">)
File: For uploading files (<input type="file">)
4. Text Areas (<textarea>):
o Allows users to enter multi-line text. Ideal for comments or messages.
5. Dropdowns (<select> and <option>):
o A dropdown list for selecting from multiple options. Each option is defined within
the <select> tag.
6. Buttons:
o Submit Button (<button type="submit">): Triggers form submission.
o Reset Button (<button type="reset">): Resets all fields to their initial values.

CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation of
HTML documents. It enables web developers to separate content from design, allowing for more
flexibility and control over the appearance of web pages. Here's a comprehensive overview:

What CSS Does

1. Styling: CSS is used to apply styles to HTML elements, such as colors, fonts, spacing,
and layouts.
2. Layout Control: It allows you to position elements on a web page using techniques like
flexbox and grid.
3. Responsive Design: CSS enables the creation of responsive layouts that adapt to
different screen sizes and devices.
4. Animations: You can create animations and transitions to enhance user experience.
5. Theming: CSS can be used to apply different themes to a website, allowing for easy
updates and maintenance.

In CSS, there are three primary ways to apply styles to HTML documents: inline, internal, and
external. Each method has its own use cases and advantages. Here’s a detailed breakdown of
each:

1. Inline CSS

Definition: Inline CSS applies styles directly within an HTML element using the style
attribute.

Syntax:

<element style="property: value;">

Example:

<p style="color: blue; font-size: 20px;">This is a blue paragraph.</p>

Advantages:
 Quick and easy for small changes.
 Overrides other styles due to higher specificity.

Disadvantages:

 Can make HTML messy and harder to read.


 Not reusable; styles must be repeated for each element.
 Makes maintaining the style more difficult.

2. Internal CSS

Definition: Internal CSS is defined within a <style> tag in the <head> section of the HTML
document.

Syntax:

<head>
<style>
selector {
property: value;
}
</style>
</head>

Example:

<head>
<style>
body {
background-color: lightgrey;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Advantages:

 Keeps styles separate from content, improving readability.


 Easier to manage styles for a single document.
 Can use the same styles across multiple elements in the same document.

Disadvantages:

 Styles are not reusable across multiple HTML files.


 Increases page size if styles are large.

3. External CSS

Definition: External CSS is defined in a separate .css file and linked to the HTML document
using the <link> tag.

Syntax:

<head>
<link rel="stylesheet" href="styles.css">
</head>

Example of styles.css:

body {
background-color: lightblue;
}

h1 {
color: darkblue;
}

Example of HTML:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Advantages:

 Styles can be reused across multiple HTML files.


 Keeps HTML files clean and easier to maintain.
 Facilitates collaborative work (styles can be managed independently).

Disadvantages:

 Requires an additional HTTP request to fetch the CSS file, which may impact loading
time.
 Changes to the stylesheet affect all linked documents.

CSS selectors are patterns used to select and style HTML elements. They are essential for
applying styles to specific elements based on various criteria. Here’s a comprehensive overview
of different types of CSS selectors:

1. Basic Selectors

 Universal Selector (*): Selects all elements on the page.

* {
margin: 0;
padding: 0;
}

 Type Selector: Selects all instances of a specified HTML element.

p {
color: blue; /* All <p> elements will be blue */
}

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

.my-class {
font-size: 20px; /* All elements with class "my-class" */
}

 ID Selector (#): Selects a unique element with a specific ID. IDs should be unique within
a page.

#my-id {
background-color: yellow; /* The element with ID "my-id" */
}

2. Grouping Selectors

You can group multiple selectors that share the same styles to reduce redundancy:

h1, h2, h3 {
color: red; /* All specified headings will be red */
}

3. Combinators
Combinators describe the relationship between two or more selectors:

 Descendant Selector ( ): Selects all elements that are descendants of a specified


element.

div p {
color: green; /* All <p> elements inside any <div> */
}

 Child Selector (>): Selects elements that are direct children of a specified element.

ul > li {
list-style-type: none; /* Only <li> elements that are direct
children of <ul> */
}

 Adjacent Sibling Selector (+): Selects an element that is immediately after another
specified element.

h1 + p {
margin-top: 0; /* The first <p> following an <h1> */
}

 General Sibling Selector (~): Selects all siblings that follow a specified element.

h1 ~ p {
color: blue; /* All <p> siblings after an <h1> */
}

4. Attribute Selectors

Select elements based on their attributes:

 Existence:

a[target] {
color: orange; /* All <a> elements with a target attribute */
}
input[type="text"] {
border: 1px solid black; /* Only <input> elements with type="text"
*/
}

 Partial Value Matching:

a[href^="https"] {
color: green; /* <a> elements with href starting with "https" */
}

5. Pseudo-classes
Pseudo-classes style elements based on their state:

 :hover: Styles an element when it is hovered over.

a:hover {
text-decoration: underline; /* Underlines links on hover */
}

 :first-child: Selects the first child of a parent.

p:first-child {
font-weight: bold; /* The first <p> in a parent element */
}

 :nth-child(n): Selects the nth child of a parent.

li:nth-child(2) {
color: blue; /* The second <li> */
}

CSS supports a variety of units for defining lengths, sizes, and measurements. These units can
be broadly categorized into two groups: absolute units and relative units. Here’s an overview
of the different types of units you can use in CSS:

Absolute Units

Absolute units are fixed and do not change based on the user's screen or settings. They are
typically used for print layouts or when a precise size is required.

1. Pixels (px):
o The most common unit, representing a single pixel on the screen.
o Example: font-size: 16px;
2. Points (pt):
o Traditionally used in print media; 1 point is equal to 1/72 of an inch.
o Example: font-size: 12pt;
3. Picas (pc):
o Also used in print media; 1 pica is equal to 12 points or 1/6 of an inch.
o Example: margin: 1pc;
4. Inches (in):
o Represents physical inches. Useful for print styles.
o Example: width: 2in;
5. Centimeters (cm):
o Represents physical centimeters.
o Example: height: 10cm;
6. Millimeters (mm):
o Represents physical millimeters.
o Example: border-width: 5mm;

Relative Units

Relative units are flexible and scale based on other factors, such as the font size of the parent
element or the viewport size. They are generally more suitable for responsive designs.

1. Percentage (%):
o A percentage is relative to the parent element's size.
o Example: width: 50%; (50% of the parent element's width)
2. Em (em):
o A unit relative to the font size of the element. 1em is equal to the current font size.
o Example: font-size: 1.5em; (1.5 times the size of the parent element's font)
3. Rem (rem):
o A unit relative to the root element's (usually <html>) font size. This makes it
more predictable than em.
o Example: font-size: 2rem; (2 times the font size of the root element)
4. Viewport Width (vw):
o 1vw is equal to 1% of the viewport's width.
o Example: width: 50vw; (50% of the viewport width)
5. Viewport Height (vh):
o 1vh is equal to 1% of the viewport's height.
o Example: height: 100vh; (100% of the viewport height)
6. Viewport Minimum (vmin):
o 1vmin is equal to 1% of the viewport's smaller dimension (width or height).
o Example: font-size: 5vmin;
7. Viewport Maximum (vmax):
o 1vmax is equal to 1% of the viewport's larger dimension (width or height).
o Example: font-size: 5vmax;

Font Properties in CSS

1. font-size: 24px;
o This property sets the size of the font. The value 24px specifies that the font size
should be 24 pixels. You can also use other units, such as em, rem, %, etc., for
responsive designs.
2. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;
o This property specifies the typeface(s) to be used for the text. The browser will
first try to use 'Franklin Gothic Medium'. If that isn't available, it will try 'Arial
Narrow', then Arial, and finally any generic sans-serif font available on the
system. The use of multiple fonts ensures that if one isn’t available, a fallback
option is used.
3. font-weight: lighter;
o This property defines the thickness of the font. The value lighter makes the text
lighter than the parent element’s font weight. You can also use numeric values
(100 to 900) or keywords like bold, normal, etc.
4. font-style: italic;
o This property sets the style of the font. The value italic renders the text in
italics, which is often used for emphasis.
5. font-variant: small-caps;
o This property transforms the text to small capital letters. The small-caps font
variant displays lowercase letters as smaller uppercase letters, giving a unique
typographic effect.
6. color: white;
o This property sets the color of the text. The value white specifies that the text
color should be white. You can use color names, hex values, RGB, RGBA, HSL,
etc.
7. letter-spacing: 10px;
o This property controls the space between characters in the text. A value of 10px
adds extra space between each letter, which can improve readability or achieve a
desired aesthetic effect.
8. text-shadow: 1px 1px 0px black, -1px -1px 0px black;
o This property adds shadow to the text. The parameters are:
 1px 1px 0px black: This specifies the horizontal offset (1px right),
vertical offset (1px down), blur radius (0px, meaning no blur), and color
(black) for the first shadow.
 -1px -1px 0px black: This adds a second shadow that is offset in the
opposite direction (1px left and 1px up), also with no blur.
o This creates a subtle, multidimensional effect around the text.
9. <!DOCTYPE html>
10. <html lang="en">
11. <head>
12. <meta charset="UTF-8">
13. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
14. <title>units</title>
15. <link rel="preconnect"
href="https://fonts.googleapis.com">
16. <link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
17. <link href="https://fonts.googleapis.com/css2?
family=Bungee+Tint&display=swap" rel="stylesheet">
18. <style>
19. div{
20. width: 200px;
21. height: 200px;
22. border: 2px solid red;
23. font-size: 1rem;
24. }
25. .demo{
26. width: 90vw;
27. height: 90vh;
28. border: 2px solid black;
29. }
30. .para{
31. width: 50%;
32. height: 50%;
33. border: 2px solid blue;
34. }
35. h1{
36. font-size: 24px;
37. font-family:'Franklin Gothic Medium', 'Arial
Narrow', Arial, sans-serif;
38. font-weight: lighter;
39. font-style: italic;
40. font-variant: small-caps;
41. color:white;
42. letter-spacing: 10px;
43. text-shadow: 1px 1px 0px black,-1px -1px 0px black;
44. }
45. .card{
46. width: 250px;
47. height: 350px;
48. border: 2px solid black;
49. margin: 30px;
50. border: none;
51. box-shadow: 2px 2px 4px black,-2px -2px 4px black;
52. }
53. img{
54. width:100%;
55. padding-top: 20px;
56. }
57. h2{
58. font-size: 2rem;
59. text-align: center;
60. margin: 5px;
61.
62. }
63. h2:hover{
64. text-shadow: 2px 2px 4px blue;
65. }
66. p{
67. font-size: 14px;
68. }
69. button{
70. padding: 10px 24px;
71. border: none;
72. background-color: dodgerblue;
73. color: white;
74. font-weight: bold;
75. border-radius: 10px;
76. }
77. button:hover{
78. border: 2px solid dodgerblue;
79. background-color: white;
80. color: dodgerblue;
81. font-weight: bold;
82. }
83. </style>
84. </head>
85. <body>
86. <div>
87. <h1>Lorem, ipsum dolor.</h1>
88. </div>
89. <div class="demo">
90. <div class="para"></div>
91. </div>
92. <div class="card">
93. <img src="https://img.freepik.com/free-photo/full-
shot-family-running-meadow_23-2149049202.jpg?
t=st=1727679194~exp=1727679794~hmac=a86b11981225f39ac482c4c4fd2b000a
5debc476b910c43aa26971d669431811" alt="">
94. <h2>Card1</h2>
95. <p>Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Repellat, officiis.</p>
96. <button>Read More...</button>
97. </div>
98.
99. </body>
100. </html>
In CSS, colors can be specified in several ways, allowing for a wide range of styling options
for elements. Here’s a breakdown of the various methods to define colors in CSS:

1. Named Colors

CSS includes a list of predefined color names that you can use directly. Some common named
colors include:

 red
 blue
 green
 black
 white
 gray
 yellow
 orange

Example:

color: red; /* Sets the text color to red */

2. Hexadecimal Colors

Hexadecimal (hex) color codes start with a # followed by six hexadecimal digits. The first two
digits represent red, the next two represent green, and the last two represent blue.

 Format: #RRGGBB

Example:

color: #ff5733; /* A shade of orange */

3. RGB Colors

RGB stands for Red, Green, and Blue. You can specify colors using the rgb() function, where
each component ranges from 0 to 255.

 Format: rgb(red, green, blue)

Example:

color: rgb(255, 87, 51); /* A shade of orange */

4. RGBA Colors
RGBA is an extension of RGB that includes an alpha (opacity) channel. The alpha value ranges
from 0 (completely transparent) to 1 (completely opaque).

 Format: rgba(red, green, blue, alpha)

Example:

color: rgba(255, 87, 51, 0.5); /* A semi-transparent shade of orange */

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness. It provides a more intuitive way to understand
colors.

 Format: hsl(hue, saturation, lightness)


o Hue: A degree on the color wheel (0-360)
o Saturation: A percentage (0% is gray, 100% is the full color)
o Lightness: A percentage (0% is black, 100% is white)

Example:

color: hsl(14, 100%, 60%); /* A shade of orange */

6. HSLA Colors

HSLA is similar to HSL but includes an alpha (opacity) channel.

 Format: hsla(hue, saturation, lightness, alpha)

Example:

color: hsla(14, 100%, 60%, 0.5); /* A semi-transparent shade of orange */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
margin-bottom: 10px;
}
.name{
background-color: lightgreen;
}
.hexvalue{
background-color: #d6c156;
}
.exrgb{
background-color: rgb(255, 85, 0);
}
.exrgba{
background-color: rgba(255, 85, 0, 0.564);
}
.exhsl{
background-color:hsl(211, 61%, 59%);
}
.exhsla{
background-color: hsla(211, 61%, 59%, 0.582);
}
</style>
</head>
<body>
<div class="name"></div>
<div class="hexvalue"></div>
<div class="exrgb"></div>
<div class="exrgba"></div>
<div class="exhsl"></div>
<div class="exhsla"></div>

</body>
</html>

CSS gradients are a powerful way to create smooth transitions between two or more colors
without the need for an image. They can be used as background images for elements, providing a
modern and visually appealing design. Here’s an overview of the different types of gradients and
how to use them in CSS.

Types of Gradients

1. Linear Gradients
2. Radial Gradients
3. Conic Gradients
1. Linear Gradients

Linear gradients transition colors along a straight line. You can specify the direction of the
gradient, which can be defined in degrees or using keywords.

Syntax
css
Copy code
background: linear-gradient(direction, color-stop1, color-stop2, ...);

 Direction can be specified in degrees (e.g., 90deg for right) or with keywords like to right, to
left, to top, or to bottom.

Example
background: linear-gradient(to right, red, yellow);

This creates a gradient that transitions from red on the left to yellow on the right.

2. Radial Gradients

Radial gradients transition colors in a circular pattern, starting from a central point and radiating
outwards.

Syntax
background: radial-gradient(shape size at position, color-stop1, color-
stop2, ...);

 Shape can be circle or ellipse.


 Size can be specified as closest-side, farthest-side, closest-corner, farthest-
corner, or specific lengths.
 Position specifies where the gradient starts.

Example
background: radial-gradient(circle at center, blue, green);

This creates a circular gradient that transitions from blue at the center to green at the edges.

3. Conic Gradients

Conic gradients transition colors around a center point in a circular fashion, creating a pie-like
effect.

Syntax
background: conic-gradient(color-stop1, color-stop2, ...);
Example
background: conic-gradient(red, yellow, green, blue);
This creates a gradient that transitions through red, yellow, green, and blue in a circular pattern.

Using Multiple Color Stops

You can add multiple color stops in gradients to create more complex effects. Each color stop
can be defined with a color and an optional position.

Example
background: linear-gradient(to right, red, orange 30%, yellow 50%, green);

Linear Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
margin-bottom: 10px;
}
.default{
background: linear-gradient(red,green,yellow,blue);
}
.top{
background: linear-gradient(to top,red,green,yellow,blue);
}
.right{
background: linear-gradient(to right,red,green,yellow,blue);
}
.bottom{
background: linear-gradient(to bottom,red,green,yellow,blue);
}
.left{
background: linear-gradient(to left,red,green,yellow,blue);
}
.tr{
background: linear-gradient(to top
right,red,green,yellow,blue);
}
.tl{
background: linear-gradient(to top
left,red,green,yellow,blue);
}
.bl{
background: linear-gradient(to bottom
left,red,green,yellow,blue);
}
.br{
background: linear-gradient(to bottom
right,red,green,yellow,blue);
}
.rp{
width: 200px;
height: 400px;
background: repeating-linear-gradient(red,green 10%,yellow
20%,blue 25%);
}
</style>

<body>
<div class="default">default</div>
<div class="top">top</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="tr">TR</div>
<div class="tl">TL</div>
<div class="bl">BL</div>
<div class="br">BR</div>
<div class="rp"></div>

</body>
</html>

Radial and Conic Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 2px solid black;
margin-bottom: 10px;

}
.default{
background: radial-gradient(red,orange,yellow,green,blue);
}
.shape{
background: radial-gradient(circle,red,orange,yellow,blue);
}
.rp{
background: repeating-radial-gradient(red,orange 10%,yellow
15%,green 20%,blue 25%);
}
.cde{
background: conic-gradient(red,yellow,green,blue);
}
.deg{
background: conic-gradient(from 45deg,red,yellow,green,blue);
}
.position{
/* at 30% 40%-------->30% horizontal, 40%---->vertical*/
background: conic-gradient(at 30% 40%,red,yellow,green,blue);
}
.rc{
background: repeating-conic-gradient(red,yellow 10%,green
15%,blue 25%);
}
.rcdeg{
border-radius: 50%;
background: repeating-conic-gradient(red,yellow 10deg,green
25deg,blue 45deg);
}
.rcdeg2{
background: repeating-conic-gradient(red 0deg,red
15deg,yellow 15deg,yellow 25deg,green 25deg,green 35deg,blue 35deg,blue
45deg);
}

</style>
</head>
<body>
<div class="default"></div>
<div class="shape"></div>
<div class="rp"></div>
<div class="cde"></div>
<div class="deg"></div>
<div class="position"></div>
<div class="rc"></div>
<div class="rcdeg"></div>
<div class="rcdeg2"></div>
</body>
</html>

The display property in CSS is one of the most important properties for controlling how
elements are rendered on the page. It defines the display behavior of an element and can affect
the layout of the entire document. Here’s a breakdown of the most commonly used values for the
display property:

Common display Property Values

1. Block
o Value: display: block;
o Description: Elements with this display type take up the full width available,
causing a line break before and after the element. Common block elements
include <div>, <h1> to <h6>, and <p>.
o Example:

div {
display: block;
}

2. Inline
o Value: display: inline;
o Description: Inline elements do not start on a new line and only take up as much
width as necessary. They can sit alongside other inline elements. Common inline
elements include <span>, <a>, and <strong>.
o Example:

span {
display: inline;
}

3. Inline-Block
o Value: display: inline-block;
o Description: Inline-block elements are similar to inline elements but can have
width and height set. They do not break onto a new line.
o Example:

css
.box {
display: inline-block;
width: 100px;
height: 100px;
}

4. Flex
o Value: display: flex;
o Description: This value enables the flexbox layout, allowing for a more flexible
and efficient way to arrange elements. It can align items, distribute space, and
more.
o Example:

.container {
display: flex;
justify-content: space-between;
}

5. Grid
o Value: display: grid;
o Description: This value enables the CSS grid layout, which allows for the
creation of complex layouts with rows and columns.
o Example:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

6. None
o Value: display: none;
o Description: This removes the element from the document flow completely, and
it does not take up any space. It is often used to hide elements.
o Example:

.hidden {
display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 2px solid black;
/* display: block; width---->100%*/
/* display: inline; width---->upto content */
/* display:inline-block width----->add width height inline*/
}
</style>
</head>
<body>
<div class="box">BOX-1</div>
<div class="box">BOX-2</div>
<div class="box">BOX-3</div>
<div class="box">BOX-4</div>
<div class="box">BOX-5</div>
</body>
</html>

Flex:---------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>flex</title>
<style>
.parent{
width: 60vw;
height: 50vh;
border: 2px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* gap: 10px; */
/* justify-content: start; */
/* justify-content: center; */
/* justify-content: end; */
/* justify-content: space-around; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
}
.child{
width: 100px;
height: 100px;
border: 2px solid black;
}
.c1{
background-color: lightcoral;

}
.c2{
background-color: lightgreen;
}
.c3{
background-color: lightpink;

}
.c4{
background-color: lightseagreen;

}
.c5{
background-color: lightslategray;

}
</style>
</head>
<body>
<div class="parent">
<div class="child c1">1</div>
<div class="child c2">2</div>
<div class="child c3">3</div>
<div class="child c4">4</div>
<div class="child c5">5</div>
<div class="child c1">6</div>
<div class="child c2">7</div>
<div class="child c3">8</div>
<div class="child c4">9</div>
<div class="child c5">10</div>
</div>
</body>
</html>
Card:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>card</title>
<style>
.parent{

display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
row-gap: 50px;
}
.child{
width: 300px;
height: 420px;
box-shadow: 1px -1px 10px rgb(182, 182, 243),-1px 1px 10px
rgb(133, 133, 237);
}
img{
width: 100%;
height: 250px;
}
h1{
font-family:Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
margin: 5px;
}
h1:hover{
color: dodgerblue;
}
h3{
margin: 10px;
}
button{
padding: 10px 24px;
border: none;
background-color: black;
color: white;
margin: 10px;
font-weight: bold;
border-radius: 10px;
}
button:hover{
background-color: white;
color: black;
border: 2px solid black;
margin: 5px;

}
img:hover{
opacity: 0.8;

}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackjava.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackpython.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/AWS+DEVEOPS.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img src="https://teksacademy.com/assets/img/allcourses/Data-
Science.jpg" alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/Digital-Marketing.jpg"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/bim.png" alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/bim.png" alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/Testing_Tools.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackjava.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackjava.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackjava.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
<div class="child">
<img
src="https://teksacademy.com/assets/img/allcourses/fullstackjava.png"
alt="">
<h1>Full Stack java </h1>
<h3>Full stack java helps in developing frontend and
backend</h3>
<button>Read More..</button>
</div>
</div>
</body>
</html

NavBar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?
family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_name
s=login" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/
all.min.css" integrity="sha512-
Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/
gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<style>
nav{
background-color: black;
height: 60px;
}
img{
width: 300px;
height: 60px;
}
.parent{
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
}
.links a{
color: white;
text-decoration: none;
margin-right: 50px;
font-weight: bold;
}
.links a:hover{
border: 2px solid white;
padding: 10px;
}
.btns button{
padding: 10px 24px;
margin-right: 30px;
font-size: 18px;
}
.btns button:hover{
background-color: black;
color: white;
border: 2px solid white;
}

.btns i{
font-size: 20px;
}

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
font-size: 24px;

</style>
</head>
<body>
<nav>
<div class="parent">
<div class="logo">
<img src="./download-removebg-preview (2).png" alt="">
</div>
<div class="links">
<a href="">Home</a>
<a href="">AboutUs</a>
<a href="">ContactUs</a>
<a href="">Services</a>
</div>
<div class="btns">
<button><i class="fa-solid fa-user"></i>
&nbsp;Register</button>
<button><span class="material-symbols-outlined">
login
</span>&nbsp;&nbsp;Login</button>
</div>
</div>
</nav>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>

The position property is used to control how an element is positioned on a web page. It
defines how an element is positioned relative to its normal position, its parent element, or the
viewport. There are several values for the position property, each with different behavior:

1. static

 Default value.
 Elements are positioned according to the normal document flow (top, bottom, left, right,
and z-index don't work).
 This is the default position type for all elements unless otherwise specified.

css
Copy code
element {
position: static;
}

2. relative

 The element is positioned relative to its normal position.


 You can use the top, right, bottom, and left properties to move the element from
where it would normally be placed.
 The space originally taken up by the element remains in the document flow.

css
Copy code
element {
position: relative;
top: 20px; /* Moves 20px down from its original position */
left: 10px; /* Moves 10px to the right from its original position */
}

3. absolute

 The element is positioned relative to the nearest positioned ancestor (i.e., an element
with position: relative, absolute, or fixed).
 If no such ancestor exists, it is positioned relative to the initial containing block (usually
the viewport).
 The element is removed from the document flow, so it won't affect the layout of other
elements.

css
Copy code
element {
position: absolute;
top: 50px;
left: 30px;
}

4. fixed

 The element is positioned relative to the viewport (i.e., the visible portion of the browser
window).
 It stays fixed in place even when the page is scrolled.
 Like absolute, it is removed from the document flow.

css
Copy code
element {
position: fixed;
top: 10px;
left: 20px;
}

5. sticky

 The element is positioned based on the user's scroll position.


 It toggles between relative and fixed positioning depending on the scroll position.
 It is relative until a defined scroll position is reached, at which point it becomes fixed.
 Typically used for sticky headers.

css
Copy code
element {
position: sticky;
top: 0; /* Becomes fixed when scrolling to the top */
}

6. inherit

 The element inherits the position value from its parent element.

css
Copy code
element {
position: inherit;
}
Summary Table

Position Type Description


static Default positioning (normal flow)
relative Positioned relative to its normal position
absolute Positioned relative to its nearest positioned ancestor
fixed Positioned relative to the viewport (fixed during scroll)
sticky Scrolls like relative until a threshold, then behaves like fixed
inherit Inherits position from the parent element

These positioning types can be combined with other properties like top, right, bottom, left,
and z-index to further refine the placement and stacking of elements on the page.

Transform and Transition


In CSS, both transform and transition are powerful properties used to create dynamic and
interactive effects. Here's an explanation of each one, along with examples:

1. transform Property

The transform property allows you to apply various transformations to an element, such as
scaling, rotating, translating (moving), and skewing. It doesn't affect the document flow,
meaning the element still occupies the same space it would have otherwise.

Common Transformations:

 Translate: Moves an element along the X, Y, or Z axis.


 Scale: Resizes an element along the X and Y axes.
 Rotate: Rotates an element by a specified angle.
 Skew: Tilts an element along the X and Y axes.

Syntax:

transform: <transform-function>;
Examples:

/* Move an element 50px to the right and 100px down */


.transform-example {
transform: translate(50px, 100px);
}

/* Scale an element to twice its size */


.transform-example {
transform: scale(2);
}
/* Rotate an element by 45 degrees */
.transform-example {
transform: rotate(45deg);
}

/* Skew an element */
.transform-example {
transform: skew(20deg, 10deg);
}
Multiple Transforms:

You can combine multiple transformations on a single element, like this:

.transform-example {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}

2. transition Property

The transition property in CSS allows you to smoothly animate changes to CSS properties
over a specific duration. It enables transitions between two states of an element when a property
changes (such as on hover or focus).

Syntax:

transition: <property> <duration> <timing-function> <delay>;

 property: The CSS property you want to animate.


 duration: The time it takes for the transition to complete (e.g., 2s, 500ms).
 timing-function: Controls the acceleration of the transition. Common values are linear, ease,
ease-in, ease-out, and ease-in-out.
 delay: The time to wait before starting the transition (optional).

Example:

/* On hover, the button will grow slightly and change color smoothly */
.button {
padding: 10px 20px;
background-color: blue;
color: white;
transition: transform 0.3s ease, background-color 0.3s ease; /* Transition
for transform and color */
}

.button:hover {
transform: scale(1.2); /* Make the button bigger */
background-color: red; /* Change color */
}
Multiple Transitions:

You can animate multiple properties at once. For example, you can change the background color,
opacity, and transform at the same time:

.element {
background-color: green;
opacity: 1;
transform: translateX(0);
transition: background-color 0.5s, opacity 0.5s, transform 0.5s;
}

.element:hover {
background-color: yellow;
opacity: 0.5;
transform: translateX(100px);
}

3. Combining transform and transition

When you combine transform and transition, you can create smooth animations that involve
transformations, like moving or rotating an element on hover.

Example: Moving an element smoothly on hover

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform and Transition Example</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: transform 0.5s ease, background-color 0.5s ease;
}

.box:hover {
transform: translateX(300px) rotate(45deg);
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

In this example:
 The .box will move 300px to the right (translateX(300px)) and rotate by 45 degrees
(rotate(45deg)) when you hover over it.
 The transition lasts 0.5s and uses the ease timing function.
 The background color will also transition from blue to red.

Timing Functions for transition:

 linear: The transition occurs at a constant speed.


 ease: Starts slow, speeds up, then slows down.
 ease-in: Starts slow, then speeds up.
 ease-out: Starts fast, then slows down.
 ease-in-out: Starts and ends slow, but is fast in the middle.

Example of Timing Functions:


/* Apply a smooth transition with ease-in-out */
.element {
width: 100px;
height: 100px;
background-color: green;
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.element:hover {
width: 200px;
height: 200px;
}

Key Differences Between transform and transition:

 transform: It applies changes to an element's shape, size, position, or rotation without


affecting its document flow.
 transition: It animates changes to CSS properties over time, making the change gradual and
smooth.

Summary:

 transform is used to modify an element’s position, scale, rotation, or skew.


 transition allows those changes to happen smoothly over time, with control over the speed
and timing of the effect.

--------------------------------------------------------------------------
Animations
CSS animations allow you to create dynamic, animated effects in web design without needing
JavaScript. These animations can make your website more interactive and engaging by altering
the appearance of HTML elements over time.

Here’s an overview of how to create CSS animations:

1. Basic CSS Animation Structure

To define an animation, you generally use two key properties:

 @keyframes: This defines the animation's behavior by specifying what styles should be
applied at different points during the animation.
 animation: This property attaches the keyframes to an element and controls aspects like
duration, delay, and iteration.

2. @keyframes Syntax

The @keyframes rule defines the styles for an animation at specific points (usually percentages).
The most common ones are 0% (the start) and 100% (the end), but you can also use intermediate
steps like 50% if needed.

Example:

@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}

This animation will move an element horizontally from its initial position to 300px to the right.

3. Applying the Animation to an Element

Once you've defined the animation, you can apply it to an element using the animation
shorthand property. This property allows you to set multiple aspects of the animation:

.element {
animation: slide 2s ease-in-out infinite;
}

 slide: This is the name of the @keyframes animation.


 2s: The duration of the animation (2 seconds).
 ease-in-out: The timing function, which controls the speed curve (you can use linear,
ease, ease-in, etc.).
 infinite: This makes the animation repeat indefinitely.

4. Complete Example

Here's a simple example that animates a box moving to the right and then back to the left, with
some color changes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* Defining the animation */
@keyframes moveAndColor {
0% {
transform: translateX(0);
background-color: red;
}
50% {
transform: translateX(200px);
background-color: blue;
}
100% {
transform: translateX(0);
background-color: green;
}
}

/* Applying the animation to an element */


.box {
width: 100px;
height: 100px;
background-color: red;
animation: moveAndColor 3s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

5. Animation Properties

The animation shorthand property can include the following:

 animation-name: The name of the animation (e.g., moveAndColor).


 animation-duration: How long the animation should take to complete one cycle (e.g.,
3s).
 animation-timing-function: Controls the timing of the animation (e.g., ease,
linear).
 animation-delay: Defines a delay before the animation starts (e.g., 1s).
 animation-iteration-count: Defines how many times the animation should run (e.g.,
infinite, 1, or a number).
 animation-direction: Defines whether the animation should play forwards,
backwards, or alternate (e.g., normal, reverse, alternate).
 animation-fill-mode: Defines what styles the element has before and after the
animation (e.g., forwards, backwards, both, or none).

Media Queries in CSS

Media queries are a powerful feature in CSS that allows you to apply styles to elements based on
specific conditions, such as the screen size, device orientation, resolution, and more. They enable
responsive web design, ensuring your website looks good on all types of devices (desktops,
tablets, phones, etc.).

1. Basic Syntax of Media Queries

The basic syntax of a media query is:

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


/* CSS rules go here */
}

 @media: The rule to define a media query.


 [media-type]: Optional. It can be all, screen, print, etc. If omitted, it defaults to all.
 (condition): The condition (e.g., max-width, min-width) that determines when the styles
will be applied.

2. Common Use Cases for Media Queries

 Width-based queries: These are the most common and are used for responsive design.
 Device-specific queries: Target specific devices based on their features like screen size,
orientation, etc.
 Orientation: Detects if the device is in portrait or landscape mode.

3. Examples of Media Queries

a. Targeting Specific Screen Widths

You can use min-width and max-width to apply different styles depending on the screen size.
 For screens wider than 768px (e.g., tablets and desktops):

@media (min-width: 768px) {


body {
font-size: 18px;
}
}

 For screens narrower than 768px (e.g., mobile devices):

@media (max-width: 767px) {


body {
font-size: 14px;
}
}
b. Combining Conditions

You can combine multiple conditions using and, or, and parentheses.

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


body {
background-color: lightblue;
}
}

This applies the styles when the screen width is between 600px and 1024px (typically tablets).

c. Targeting Orientation

You can use orientation to detect if the device is in portrait or landscape mode.

 Portrait mode (height > width):

@media (orientation: portrait) {


body {
background-color: lightgreen;
}
}

 Landscape mode (width > height):

@media (orientation: landscape) {


body {
background-color: lightcoral;
}
}
d. High-Resolution Screens (Retina Display)

You can target devices with high-resolution displays (like Retina displays) using min-
resolution.
@media (min-resolution: 2dppx) {
body {
font-size: 20px;
}
}
e. Multiple Queries

You can apply multiple queries at once by chaining them together.

@media (max-width: 600px) {


body {
font-size: 12px;
}
}

@media (max-width: 400px) {


body {
font-size: 10px;
}
}

In this example, for screens smaller than 600px, the font size will be 12px, and for screens
smaller than 400px, the font size will be 10px.

4. Responsive Design with Media Queries

Media queries are crucial in responsive web design, where the layout adapts to the screen size.
Here’s an example of how you might structure a simple responsive layout:

/* Base styles (for mobile-first design) */


body {
font-size: 14px;
}

.container {
display: block;
}

/* For tablets and larger screens */


@media (min-width: 768px) {
body {
font-size: 16px;
}

.container {
display: flex;
justify-content: space-between;
}
}

/* For desktops and larger screens */


@media (min-width: 1024px) {
body {
font-size: 18px;
}

.container {
display: flex;
justify-content: space-around;
}
}

5. Common Media Query Breakpoints

While you can use any breakpoints you like, here are some commonly used ones:

 320px — Small mobile screens (iPhone SE, older devices).


 480px — Mobile devices.
 600px — Small tablets (portrait).
 768px — Tablets (landscape).
 1024px — Laptops and smaller desktops.
 1200px — Larger desktops.

You can adjust these based on your specific needs.

6. Media Query Groups

You can group multiple queries together using a comma to apply the same styles to different
screen sizes:

@media (max-width: 600px), (max-width: 1024px) {


body {
background-color: lightgray;
}
}

This will apply the background color to screens that are either smaller than 600px or 1024px.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container{
display: grid;
grid-template-columns: repeat(4,200px);
grid-template-rows: repeat(2,200px);
background-color: dodgerblue;
gap: 30px;
justify-content:space-around;
}
.cards{
background-color: blueviolet;
}
@media screen and (max-width:450px) {

h1{
display: none;
}
.container{
display: grid;
grid-template-columns: repeat(2,150px);
grid-template-rows: repeat(4,150px);
gap:30px;
justify-content: space-around;
}
.cards{
background-color: green;
}

}
@media screen and (max-width:200px) {

h1{
display: none;
}
.container{
display: grid;
grid-template-columns: repeat(1,100px);
grid-template-rows: repeat(8,100px);
gap:30px;
justify-content: space-around;
}
.cards{
background-color: yellow
}

}
</style>
</head>
<body>
<h1>Large Screen Content</h1>
<div class="container">
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
<div class="cards"></div>
</div>

</body>
</html>

You might also like