KEMBAR78
Module 2 | PDF | Html | Websites
Scribd
Upload
23 views35 pages

Module 2

The document compares HTML and CSS, highlighting that HTML defines the structure and content of web pages while CSS focuses on presentation and style. Advantages of HTML include ease of learning and SEO benefits, whereas CSS allows for responsive designs and faster maintenance. Disadvantages include HTML's limitation to static pages and CSS's dependency on HTML, along with potential compatibility issues.

Uploaded by

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

Module 2

The document compares HTML and CSS, highlighting that HTML defines the structure and content of web pages while CSS focuses on presentation and style. Advantages of HTML include ease of learning and SEO benefits, whereas CSS allows for responsive designs and faster maintenance. Disadvantages include HTML's limitation to static pages and CSS's dependency on HTML, along with potential compatibility issues.

Uploaded by

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

Compare HTML and CSS with advantages and disadvantages.

HTML (HyperText Markup


Feature CSS (Cascading Style Sheets)
Language)

Primary Defines the structure and Defines the presentation and style of
Purpose content of a web page. a web page.

Provides the skeleton or Applies the visual design and layout


Key Role framework of the website (e.g., (e.g., colors, fonts, margins,
headings, paragraphs, images). animations).

Separates style from content, enabling


Easy to learn, universally
faster loading times and easier site
supported by all browsers, and
Advantages maintenance. Essential for creating
essential for SEO by providing
responsive and visually consistent
semantic meaning to content.
designs.

Can only create static, unstyled Cannot function without an HTML


web pages on its own. It's not document. It has a steeper learning
Disadvantages
suited for complex layouts and curve for advanced features and can
can lead to repetitive code. lead to browser compatibility issues.

Building the foundational Styling the content from HTML,


Best Used For content and structure of any creating responsive layouts, and
website. adding animations and visual effects.
Write HTML code for a employee registration form shown
in the image.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Employee Registration Form - Basic</title>

<style>

/* This is a simple way to add styles directly to the HTML file. */

/* It's great for beginners, but for larger sites, we put this in a separate file. */

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

.form-box {

background-color: white;

padding: 30px;

border: 2px solid black;

box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.75);

width: 100%;

max-width: 600px;

box-sizing: border-box; /* Ensures padding doesn't affect the width */

}
h1 {

color: #d11212;

text-align: center;

margin-bottom: 20px;

/* Styling for the table to align the form labels and inputs */

table {

width: 100%;

td {

padding: 8px 0;

vertical-align: top; /* Align text to the top of the cell */

input[type="text"],

input[type="email"],

input[type="tel"],

select,

textarea {

width: 100%;

padding: 8px;

box-sizing: border-box;

border: 1px solid #ccc;

border-radius: 4px;

/* Specific styles for the "Upload Photo" file input to hide the default browser look */

.file-input-wrapper {
display: flex;

align-items: center;

.file-input-button {

background-color: #e0e0e0;

border: 1px solid #ccc;

padding: 6px 12px;

border-radius: 4px;

cursor: pointer;

.file-input-display {

margin-left: 10px;

color: #555;

/* Style for the buttons at the bottom */

.button-group {

text-align: center;

padding-top: 20px;

button {

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

font-weight: bold;

}
button[type="submit"] {

background-color: #333;

color: white;

margin-right: 10px;

button[type="reset"] {

background-color: #e0e0e0;

color: #333;

</style>

</head>

<body>

<!-- Main container for the form -->

<div class="form-box">

<!-- Form Header -->

<h1>Employee Registration Form</h1>

<!-- The form itself -->

<form action="#" method="POST">

<!-- Using a table to align labels and input fields as seen in the image -->

<table>

<tr>

<td></td>

<td>

<!-- Salutation radio buttons -->

<input type="radio" id="mr" name="salutation" checked>

<label for="mr">Mr.</label>
<input type="radio" id="mrs" name="salutation">

<label for="mrs">Mrs.</label>

<input type="radio" id="ms" name="salutation">

<label for="ms">Ms.</label>

</td>

</tr>

<tr>

<td><label for="first-name">First Name</label></td>

<td><input type="text" id="first-name" name="firstName" placeholder="First


Name"></td>

</tr>

<tr>

<td><label for="last-name">Last Name</label></td>

<td><input type="text" id="last-name" name="lastName" placeholder="Last


Name"></td>

</tr>

<tr>

<td><label for="mail-address1">Mail Address1</label></td>

<td><input type="text" id="mail-address1" name="mailAddress1"></td>

</tr>

<tr>

<td><label for="mail-address2">Mail Address2</label></td>

<td><input type="text" id="mail-address2" name="mailAddress2"></td>

</tr>

<tr>

<td><label for="city">City</label></td>

<td><input type="text" id="city" name="city"></td>

</tr>

<tr>

<td><label for="state">State</label></td>

<td>

<select id="state" name="state">


<option>Gujarat</option>

<option>Maharashtra</option>

<option>Karnataka</option>

<option>Delhi</option>

</select>

</td>

</tr>

<tr>

<td><label for="zip">Zip</label></td>

<td><input type="text" id="zip" name="zip"></td>

</tr>

<tr>

<td><label for="photo">Upload Photo</label></td>

<td><input type="file" id="photo" name="photo"></td>

</tr>

<tr>

<td><label for="email">E-Mail</label></td>

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

</tr>

<tr>

<td><label for="mobile">Mobile</label></td>

<td>

<input type="text" id="mobile" name="mobile" value="+91" style="width: 50px;


display: inline-block;">

<input type="tel" id="mobile-number" name="mobileNumber" style="width: calc(100%


- 60px); display: inline-block;">

</td>

</tr>

<tr>

<td><label>Languages known</label></td>

<td>

<input type="checkbox" id="gujarati" name="languages" value="gujarati" checked>


<label for="gujarati">Gujarati</label><br>

<input type="checkbox" id="hindi" name="languages" value="hindi" checked>

<label for="hindi">Hindi</label><br>

<input type="checkbox" id="english" name="languages" value="english" checked>

<label for="english">English</label><br>

<input type="checkbox" id="marathi" name="languages" value="marathi">

<label for="marathi">Marathi</label>

</td>

</tr>

<tr>

<td><label for="additional-info">Additional Information</label></td>

<td><textarea id="additional-info" name="additionalInfo" rows="4"


placeholder="Optional"></textarea></td>

</tr>

</table>

<!-- Submit and Reset Buttons -->

<div class="button-group">

<button type="submit">submit</button>

<button type="reset">reset</button>

</div>

</form>

</div>

</body>

</html>
Design an HTML table to show a monthly expense tracker, with rows for
categories (food, rent, travel, etc.) and columns for each week of the month.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Monthly Expense Tracker - No CSS</title>

</head>

<body>

<center>

<h1>Monthly Expense Tracker</h1>

<table border="1" cellpadding="10" cellspacing="0">

<thead>

<tr>

<th>Category</th>

<th>Week 1</th>

<th>Week 2</th>

<th>Week 3</th>

<th>Week 4</th>

<th>Monthly Total</th>

</tr>

</thead>

<tbody>

<!-- Food Category Row -->

<tr>

<td>Food</td>

<td>$150.00</td>
<td>$120.00</td>

<td>$160.00</td>

<td>$135.00</td>

<td>$565.00</td>

</tr>

<!-- Rent Category Row -->

<tr>

<td>Rent</td>

<td>$0.00</td>

<td>$0.00</td>

<td>$0.00</td>

<td>$1,000.00</td>

<td>$1,000.00</td>

</tr>

<!-- Travel Category Row -->

<tr>

<td>Travel</td>

<td>$50.00</td>

<td>$75.00</td>

<td>$20.00</td>

<td>$90.00</td>

<td>$235.00</td>

</tr>

<!-- Entertainment Category Row -->

<tr>

<td>Entertainment</td>

<td>$30.00</td>

<td>$45.00</td>

<td>$15.00</td>

<td>$60.00</td>

<td>$150.00</td>
</tr>

<!-- Utilities Category Row -->

<tr>

<td>Utilities</td>

<td>$0.00</td>

<td>$85.00</td>

<td>$0.00</td>

<td>$0.00</td>

<td>$85.00</td>

</tr>

<!-- Other Category Row -->

<tr>

<td>Other</td>

<td>$25.00</td>

<td>$10.00</td>

<td>$5.00</td>

<td>$30.00</td>

<td>$70.00</td>

</tr>

<!-- Monthly Total Row -->

<tr>

<td><b>Total</b></td>

<td><b>$255.00</b></td>

<td><b>$330.00</b></td>

<td><b>$200.00</b></td>

<td><b>$1,315.00</b></td>

<td><b>$2,100.00</b></td>

</tr>

</tbody>

</table>

</center>
</body>

</html>
Create a table in HTML that uses: a. rowspan to merge two rows. b. colspan
to merge two columns.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Table with Colspan and Rowspan</title>

<script src="https://cdn.tailwindcss.com"></script>

<style>

/* Add some basic styling for better readability */

table, th, td {

border: 1px solid #d1d5db; /* A light gray border */

table {

border-collapse: collapse; /* Collapse the borders for a single line */

width: 100%;

</style>

</head>

<body class="bg-gray-100 p-8 font-sans">

<div class="max-w-xl mx-auto bg-white rounded-lg shadow-md p-6">

<h1 class="text-2xl font-bold mb-4 text-center text-gray-800">Sales Report</h1>

<table class="w-full text-left text-sm text-gray-500 rounded-lg overflow-hidden">

<thead class="text-xs text-gray-700 uppercase bg-gray-50">

<tr>

<!-- This cell uses colspan to span across 2 columns -->

<th scope="col" class="px-6 py-3 text-center" colspan="2">

Quarterly Sales Summary

</th>
<th scope="col" class="px-6 py-3">

Status

</th>

</tr>

</thead>

<tbody>

<tr class="bg-white border-b">

<!-- This cell uses rowspan to span across 2 rows -->

<td scope="row" class="px-6 py-4 font-medium text-gray-900" rowspan="2">

Q1

</td>

<td class="px-6 py-4">

Revenue

</td>

<td class="px-6 py-4">

$500,000

</td>

</tr>

<tr class="bg-white border-b">

<td class="px-6 py-4">

Expenses

</td>

<td class="px-6 py-4">

$200,000

</td>

</tr>

<tr class="bg-white border-b">

<td class="px-6 py-4 font-medium text-gray-900">

Q2

</td>

<td class="px-6 py-4">


Revenue

</td>

<td class="px-6 py-4">

$650,000

</td>

</tr>

</tbody>

<tfoot>

<tr class="font-bold text-gray-700">

<td colspan="2" class="px-6 py-4 text-right">

Total

</td>

<td class="px-6 py-4">

$1,150,000

</td>

</tr>

</tfoot>

</table>

</div>

</body>

</html>
Write HTML code to create a webpage with two sections: one showing an
image gallery and the other playing a video.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Basic Media Page</title>

</head>

<body>

<!-- This is the first section for the image gallery -->

<div>

<h1>Image Gallery</h1>

<p>A collection of images.</p>

<!-- This div holds all the images for the gallery -->

<div>

<!-- Each image element with placeholder URL -->

<img src="https://placehold.co/600x400/38bdf8/ffffff?text=Image+1" alt="Placeholder Image


1">

<img src="https://placehold.co/600x400/f87171/ffffff?text=Image+2" alt="Placeholder Image


2">

<img src="https://placehold.co/600x400/4ade80/ffffff?text=Image+3" alt="Placeholder Image


3">

<img src="https://placehold.co/600x400/818cf8/ffffff?text=Image+4" alt="Placeholder Image


4">

<img src="https://placehold.co/600x400/fbbf24/ffffff?text=Image+5" alt="Placeholder Image


5">

<img src="https://placehold.co/600x400/e879f9/ffffff?text=Image+6" alt="Placeholder Image


6">

</div>
</div>

<hr>

<!-- This is the second section for the video player -->

<div>

<h2>Video Section</h2>

<p>A simple video player.</p>

<div>

<!-- The video tag displays the video. -->

<video controls>

<!-- This line points to the video file to be played -->

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

<!-- This text shows up if the browser can't play the video -->

Your browser does not support the video tag.

</video>

</div>

</div>

</body>

</html>
Create a personal website with Formatting, Colors, Images, Lists, Links and
Tables HTML tags.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Personal Website</title>

<!--

This is a style block. We'll put all of our

styling rules here to make the page look good.

-->

<style>

/*

We are applying styles directly to the body and other HTML tags.

This makes the code shorter and easier to understand for beginners.

*/

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 20px;

padding: 20px;

background-color: #f4f4f4;

color: #333;

max-width: 960px;

margin: 20px auto;

background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h1, h2 {
color: #0056b3;

img {

max-width: 100%;

height: auto;

display: block;

margin-bottom: 20px;

border-radius: 8px;

a{

color: #007bff;

text-decoration: none;

a:hover {

text-decoration: underline;

ul, ol {

margin-bottom: 20px;

table {

width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

th {

background-color: #0056b3;
color: white;

</style>

</head>

<body>

<!-- Main Heading and Introduction -->

<h1>Welcome to My Personal Website</h1>

<p>

Hello! My name is John Doe, and this is a simple website to showcase my skills and interests.

</p>

<hr>

<!-- Image Section -->

<h2>My Photo</h2>

<img src="https://placehold.co/800x450/4ade80/ffffff?text=My+Image" alt="A placeholder image


for a personal website">

<hr>

<!-- Formatted Text Section -->

<h2>About Me</h2>

<p>

I am a <strong>web development enthusiast</strong>. I love to learn new things and build


interesting projects. This website is a small example of what I can do with simple HTML and CSS. I'm
excited to explore more!

</p>

<hr>

<!-- Lists Section -->


<h2>My Hobbies</h2>

<p>Here are some of the things I enjoy doing:</p>

<ul>

<li>Reading science fiction novels</li>

<li>Hiking in the mountains</li>

<li>Playing the guitar</li>

</ul>

<p>Here is my favorite hiking gear list, in order of importance:</p>

<ol>

<li>Sturdy hiking boots</li>

<li>A reliable map and compass</li>

<li>Plenty of water and snacks</li>

</ol>

<hr>

<!-- Links Section -->

<h2>Important Links</h2>

<p>You can find more of my work here:</p>

<ul>

<li><a href="https://github.com/yourusername" target="_blank">My GitHub Profile</a></li>

<li><a href="https://www.linkedin.com/in/yourusername" target="_blank">Connect with me on


LinkedIn</a></li>

<li><a href="mailto:youremail@example.com">Send me an email</a></li>

</ul>

<hr>

<!-- Table Section -->

<h2>My Skills</h2>
<p>This table summarizes my technical skills:</p>

<table>

<thead>

<tr>

<th>Skill</th>

<th>Level</th>

</tr>

</thead>

<tbody>

<tr>

<td>HTML5</td>

<td>Advanced</td>

</tr>

<tr>

<td>CSS3</td>

<td>Intermediate</td>

</tr>

<tr>

<td>JavaScript</td>

<td>Beginner</td>

</tr>

</tbody>

</table>

</body>

</html>
Explain how the element works. What kind of applications use it?
That's an excellent question! I can explain how the selected code uses CSS to add formatting to the
webpage.

The code within the <style> tags in the <head> of the HTML document is called internal CSS. It's used
to define rules for how the different elements on the page should look. Instead of applying styles to
each element individually, you write rules that apply to all instances of a specific HTML tag.

Let's break down how it works in the Canvas you selected:

• body: This rule applies to the entire webpage. It sets the font style (font-family), the space
between lines of text (line-height), and the background color (background-color: #f4f4f4). It
also centers the content and adds a white background with a shadow, creating a nice, clean
box for your content to sit in.

• h1, h2: This rule targets all h1 and h2 headings at once. It changes their color to a shade of
blue (#0056b3), making them stand out.

• img: This rule applies to all images on the page. It ensures the image is responsive (max-
width: 100%) so it won't be larger than its container, and adds a small space below it
(margin-bottom) and rounded corners (border-radius).

• a: This rule changes the color of all links (<a>) to a different shade of blue (#007bff) and
removes the default underline (text-decoration: none). The next rule, a:hover, adds the
underline back only when you hover your mouse over the link, which is a common visual cue
for interactivity.

• table, th, td: These rules work together to style the table. The table rule makes the table take
up the full width (width: 100%) and collapses the borders. The th (table header) and td (table
data) rules add a border, padding, and text alignment. The th rule also gives the table
headers a bold background color and white text.

Using this method, you can easily change the look of your entire website by simply editing the CSS
rules in one place, which is much more efficient than changing styles on every single HTML tag.
Create a multimedia web page showcasing a cultural event using images,
videos, and formatted content with appropriate layout.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The Annual Harvest Festival</title>

</head>

<body>

<!-- Header Section -->

<h1>The Grand Annual Harvest Festival</h1>

<p><strong>Celebrating our community's heritage and abundance.</strong></p>

<hr>

<!-- Image Gallery Section -->

<h2>A Glimpse of the Festivities</h2>

<p>Here are some photos from the event:</p>

<img src="https://placehold.co/600x400/8d6e63/ffffff?text=Parade" alt="A vibrant parade.">

<img src="https://placehold.co/600x400/6a1b9a/ffffff?text=Dancers" alt="Traditional dancers.">

<img src="https://placehold.co/600x400/ffb74d/ffffff?text=Food+Stalls" alt="A bustling food


stall.">

<img src="https://placehold.co/600x400/4db6ac/ffffff?text=Musicians" alt="Musicians playing


instruments.">

<hr>

<!-- Video Section -->

<h2>Experience the Celebration</h2>

<p>Watch this video to get a sense of the lively atmosphere.</p>


<video controls width="640" height="360">

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

<hr>

<!-- Formatted Text Section -->

<h2>History and Significance</h2>

<p>

The Harvest Festival is a very old tradition that celebrates our community and its history.

</p>

<blockquote>

"Culture is the way we live, the way we celebrate, and the way we connect with our past."

</blockquote>

<p>

We celebrate with a big parade, local markets, music, and lots of food. It's a fun day for
everyone!

</p>

</body>

</html>

List and explain different types of CSS selectors with examples


A CSS selector is a pattern used to select the HTML elements you want to style. It tells the browser
exactly which parts of your webpage to apply a rule to. Think of it like a search query for your
webpage's content.
Here are the most common types of CSS selectors, with examples from simple HTML code like the
one in your Canvas.

1. Element Selector (or Type Selector)

This is the most basic selector. It targets HTML elements directly by their tag name.

• How it works: You just write the name of the HTML tag.

• Example: If you want all your paragraphs to be red, you'd write:

CSS

p{

color: red;

This would select every <p> tag on your page.

2. Class Selector

This selector is used to select all HTML elements with a specific class attribute. Classes are super
useful because you can apply the same style to multiple elements, even if they're different types of
tags.

• How it works: You start with a period (.) followed by the class name.

• Example: Let's say you want to style a specific group of photos. You'd give them a class like
gallery-image:

HTML

<img class="gallery-image" src="..." alt="...">

<img class="gallery-image" src="..." alt="...">

Then, you can style them all at once with this CSS:

CSS

.gallery-image {

border: 2px solid blue;

3. ID Selector

The ID selector is used to target a single, unique element. An ID should only be used once on a
webpage.

• How it works: You use a hashtag (#) followed by the ID name.


• Example: If you have one main title that you want to style differently, you'd give it an ID like
main-title:

HTML

<h1 id="main-title">The Grand Annual Harvest Festival</h1>

Then, the CSS would be:

CSS

#main-title {

font-size: 48px;

4. Universal Selector

The universal selector does exactly what it sounds like: it selects every single element on the page.

• How it works: You use an asterisk (*).

• Example: If you want to change the font for everything on your page, you can use this:

CSS

*{

font-family: sans-serif;

This is often used for broad, general rules.

5. Attribute Selector

This selector targets elements based on the presence of a specific attribute or the value of that
attribute.

• How it works: You put the attribute and its value inside square brackets ([]).

• Example: To select all links that open in a new tab, you would use this:

CSS

a[target="_blank"] {

color: green;

This will select any <a> tag that has a target attribute with the value _blank.
Classify the three ways to create CSS with an example and output. 11. Define
the CSS Box Model. What are its four components? Show how
The three main ways to add CSS to an HTML document are inline, internal, and external. Each
method has a different use case, and they can all be used in the same project.

1. Inline CSS

Inline CSS is used to apply a style to a single HTML element. You add the style attribute directly to the
tag you want to modify. This method is the fastest way to apply a style, but it's not very flexible
because you have to add the style to every single element you want to change. It's often used for
quick fixes or when a style is truly unique to one element.

Example:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Inline CSS</title>

</head>

<body>

<h1 style="color: blue; font-size: 24px;">This is a blue heading.</h1>

<p style="color: green;">This is a green paragraph.</p>

</body>

</html>

Output:

• A heading with the text "This is a blue heading." that is blue and has a font size of 24 pixels.

• A paragraph with the text "This is a green paragraph." that is green.

2. Internal CSS

Internal CSS is defined in a <style> tag within the <head> section of an HTML document. This is useful
for styling a single HTML page when you don't need to link to an external stylesheet. You can apply
styles to multiple elements at once using selectors.

Example:
HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Internal CSS</title>

<style>

h1 {

color: purple;

p{

font-style: italic;

</style>

</head>

<body>

<h1>This is a purple heading.</h1>

<p>This is an italic paragraph.</p>

</body>

</html>

Output:

• A heading with the text "This is a purple heading." that is purple.

• A paragraph with the text "This is an italic paragraph." that is in italics.

3. External CSS

External CSS is the most common and recommended method for styling websites. The styles are
written in a separate file with a .css extension, and you link to it from your HTML document using a
<link> tag in the <head> section. This is great for managing styles across a large website, as you can
change the look of your entire site by editing a single file.

Example:

index.html
HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External CSS</title>

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

</head>

<body>

<h1>This is a red heading.</h1>

<p>This paragraph has a border.</p>

</body>

</html>

styles.css

CSS

h1 {

color: red;

p{

border: 2px solid black;

Output:

• A heading with the text "This is a red heading." that is red.

• A paragraph with the text "This paragraph has a border." that has a black border around it.
Define the CSS Box Model. What are its four components? Show how total
width and height of an element is calculated with a sample CSS rule.
The CSS Box Model is a fundamental concept that describes how all HTML elements are rendered as
rectangular boxes on a webpage. Every element, regardless of its content (text, image, etc.), is
treated as a box with four distinct parts. When you apply styles, you're essentially changing the
dimensions of these four parts.

The Four Components

1. Content: This is the innermost part of the box. It holds the actual content of the element,
such as text, images, or a video player. Its dimensions are determined by the width and
height CSS properties.

2. Padding: This is the transparent space directly surrounding the content. It acts as a buffer
between the content and the border. You can set the padding on all sides or individually
(e.g., padding-top, padding-right).

3. Border: This is a line that goes around the padding and the content. You can style the border
with different colors, widths, and styles (e.g., solid, dashed).

4. Margin: This is the transparent space on the outside of the border. It creates a gap between
the element and other elements on the page, helping to prevent them from touching.

Total Width and Height Calculation

The total space an element occupies on a page is the sum of its content, padding, border, and
margin. This is a common source of confusion for beginners because the width and height properties
only affect the content area.

The total width and height are calculated as follows:

• Total Width = width + padding-left + padding-right + border-left + border-right + margin-left


+ margin-right

• Total Height = height + padding-top + padding-bottom + border-top + border-bottom +


margin-top + margin-bottom

Here's an example to show this in practice:

Sample CSS Rule:

CSS

.box {

width: 100px;

height: 50px;

padding: 10px;

border: 5px solid black;


margin: 20px;

Let's break down the calculation for this element:

• Total Width: 100px (width) + 10px (left padding) + 10px (right padding) + 5px (left border) +
5px (right border) + 20px (left margin) + 20px (right margin) = 170px

• Total Height: 50px (height) + 10px (top padding) + 10px (bottom padding) + 5px (top border)
+ 5px (bottom border) + 20px (top margin) + 20px (bottom margin) = 120px

So, even though the content box is defined as 100px by 50px, the entire element will take up a space
of 170px by 120px on the webpage.
Differentiate between content-box and border-box models in CSS. Create a
styled HTML layout to illustrate the difference.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Basic Box Model</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

.box {

width: 200px;

padding: 25px;

border: 25px solid black;

margin: 20px;

background-color: #eee;

.content-box {

box-sizing: content-box;

background-color: #ffcccc; /* Light red */

.border-box {

box-sizing: border-box;

background-color: #cceeff; /* Light blue */

</style>

</head>

<body>
<h1>CSS Box Model</h1>

<p>This example shows the difference between <b>content-box</b> and <b>border-box</b>.</p>

<div class="box content-box">

<h2>Content-Box</h2>

<p>Width is 200px. Total width is 270px.</p>

</div>

<hr>

<div class="box border-box">

<h2>Border-Box</h2>

<p>Width is 200px. Total width is exactly 200px.</p>

</div>

</body>

</html>
Scenario: A product page displays items in a 3-column grid. Each item has a
title, image, and price, enclosed in a box with shadows.
Question: Write external CSS rules for the class .product-card to:
a. Set width to 30%
b. Add margin between items
c. Add box-shadow
d. Align text to the center
/* This is a simple CSS file for a product page. */

.product-card {

/* Set the size to be 30% of its container */

width: 30%;

/* Add space around each card */

margin: 15px;

/* Add a small shadow to make it look 3D */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

/* Center all the text */

text-align: center;

You might also like