×

HTML & CSS

📌 Important Notice & Guidelines

  • Scholarship Rule: The percentage of marks you score in the test will be equal to the percentage of scholarship you receive.
  • Weekly Test: Tests will be conducted every Friday.
  • Result Update: Your marks/results will be updated on the WhatsApp Channel every Saturday.
  • New Batches: New batches will start every Monday.

1. Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. It structures content on the web using elements and tags. The basic structure includes <!DOCTYPE html>, <html>,<head>, and <body>. 

<!DOCTYPE html>
<html>
<head>
  <title>HTML & CSS</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Welcome to my website.</p>
</body>
</html>
Page title: HTML & CSS

Hello World!

Welcome to my website.

2. HTML Tags and Elements

Tags define structure and type of content.Common tags include headings, paragraphs, links, images, lists, and containers. 

 <h2>About Me</h2>
 <p>I am learning HTML & CSS.</p>
 <a href="https://google.com">Google</a>
 <img src="https://via.placeholder.com/100" alt="Sample">
 <ul>
      <li>HTML</li>
      <li>CSS</li>
     <li>JavaScript</li>
 </ul>

About Me

I am learning HTML & CSS.

Google

Sample
  • HTML
  • CSS
  • JavaScript

3. Attributes in HTML

Attributes provide additional information about elements. Examples: id, class, src, href, alt, title. 

<img src="https://via.placeholder.com/120"
 alt="Company Logo" title="Our Logo">
<a href="https://example.com" target="_blank">
  Open Link
</a>
Company Logo

Open Link

4. Forms in HTML

Forms are used to collect user input. Elements include input, textarea, button, select. 

<form>
  <input type="text" placeholder="Enter Name">
  <input type="email" placeholder="Enter Email">
  <button type="submit">Submit</button>
</form>




5. Introduction to CSS

CSS styles the HTML content. It changes colors, fonts, spacing, layout, and visual appearance.

<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>

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

This is a styled paragraph.

6. Selectors in CSS

Selectors define which HTML elements the CSS styles apply to. Types: element, class, id, group, universal.

 
<style>
  p { color: green; }
  .highlight { background-color: yellow; }
  #main { width: 50%; }
</style>

<p>This is green text.</p>
<p class="highlight">This has yellow background.</p>
<div id="main">This div is 50% width.</div>

This is green text.

This has yellow background.

This div is 50% width.

7. Box Model in CSS

Every HTML element is a rectangular box. Components: content, padding, border, margin. 

<style>
div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}
</style>

<div>Box Model Example</div>
Box Model Example

8. CSS Positioning

CSS positioning controls the placement of elements on the page: static, relative, absolute, fixed, sticky.

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  position: absolute;
  top: 50px;
  left: 100px;
}
</style>

<div class="box"></div>

9. Flexbox in CSS

Flexbox provides a flexible way to layout items inside a container.

 
<style>
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  width: 50px;
  height: 50px;
  background-color: teal;
}
</style>

<div class="flex-box">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

10. Grid in CSS

Grid layout divides space into rows and columns.

<style>
.grid-demo{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.box1 {
  background-color: orange;
  height: 40px;
  width:40px;
}
</style>

<div class="grid">
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
</div>

11. Lists in HTML

Lists are used to group related items. There are two main types: Ordered lists (<ol>) and Unordered lists (<ul>).

<h3>Unordered List</h3>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

<h3>Ordered List</h3>
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

Unordered List

  • Apple
  • Banana
  • Mango

Ordered List

  1. Step 1
  2. Step 2
  3. Step 3

12. Tables in HTML

Tables are used to display data in rows and columns using <table>, <tr>, <th>, <td> tags.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Emma</td>
    <td>22</td>
  </tr>
</table>
Name Age
John 25
Emma 22

13. HTML5 Semantic Tags

Semantic tags like <header>, <nav>, <section>, <article>, <footer> improve accessibility and SEO.

<header>My Website</header>
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>
<section>
  <article>
    <h3>Article Title</h3>
    <p>This is an article.</p>
  </article>
</section>
<footer>Copyright 2025</footer>

My Website

Article Title

This is an article

14. Embedding Multimedia

HTML allows embedding images, audio, and video using <img>, <audio>, <video> tags.

<img src="https://via.placeholder.com/120">
<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
</audio>
<video width="200" controls>
  <source src="sample.mp4" type="video/mp4">
</video>
Sample



15. CSS Shadows & Borders

Shadows and borders improve the visual design of elements. box-shadow adds shadow around elements, text-shadow adds shadow to text, and border-radius creates rounded corners. 

<style>
.box {
  width: 200px;
  padding: 20px;
  background-color: white;
  border: 2px solid #333;
  border-radius: 15px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}
h3 {
  text-shadow: 2px 2px 4px gray;
}
</style>

<div class="box">
  <h3>Shadow Box</h3>
  <p>This box has rounded corners and a shadow.</p>
</div>

Shadow Box

This box has rounded corners and a shadow.

Best of Luck to All Students!

Give your best in the test, stay focused, and keep learning something new every day. Believe in yourself, and let each lesson make you stronger and smarter.

WhatsApp Chat