Scribd
Upload
12 views10 pages

Lecture 1.3.2

Uploaded by

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

Lecture 1.3.2

Uploaded by

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

UNIVERSITY INSTITUTE OF

ENGINEERING
DEPARTMENT OF COMPUTER SCIENCE
AND ENGG.
Bachelor of Engineering (Computer Science & Engineering)
Web Development(CSO-483)
Prepared by: Amanpreet Kaur(E7596)

Chapter-3 DISCOVER . LEARN . EMPOWER


1
introduction to box model, browser support, creating an
overall look: font and text
Course Objectives
● To enable researchers in developing most appropriate methodology for their
studies
● To gain familiarization with different research methods and techniques.
● To provide knowledge about systematic process of collecting and analysing
data.
CO1 Understand various technologies and basics with fundamentals web standards such as HTML, CSS.

CO2 Students will apply and diagnose issues within web applications like java script by analysing code, identifying bugs, and
employing debugging techniques to ensure functionality.

CO3 Analysis the strength and weaknesses of different frontend frameworks like java scripts and different webs graphics.

CO4 Evaluate and design java script DOM, web graphics formats with media concepts & HTML documents.

CO5 Implement XML on the web graphics with different XML applications.
Introduction

• The CSS Box Model is a fundamental concept in web development that defines the layout and structure
of HTML elements on a webpage. It conceptualizes each HTML element as a rectangular box, consisting
of several components that influence its appearance and spacing within the document.
• The main components of the CSS Box Model include:
1. Content:
1. Represents the actual content or data of the HTML element, such as text, images, or other media.
2. Padding:
1. The transparent area around the content, providing space between the content and the element's border. Padding contributes to
the overall size of the box.
3. Border:
1. A visible or invisible boundary that surrounds the padding. The border can have a specified width, style, and color, defining the
outer edge of the box.
4. Margin:
• The transparent area outside the border, creating space between the element's border and adjacent elements. Margins contribute
to the spacing between elements.
Exploring Box Model Components:

• Content Area: Represents the actual content of the element.


• Padding: Space between the content and the element's
border.
• Border:A visible or invisible boundary around the element's
padding.
• Margin:Clear space outside the element, creating separation
from adjacent elements.
Creating an Overall Look in CSS

Importance of Overall Look:

• Cohesive design contributes to a positive user experience.

• Application of Box Model:

• Creating well-organized layouts using padding, borders, and margins.

• Examples of various box model configurations. ne styles have the highest specificity.
Font Properties in CSS

• font-family:
• Specifying the font family for text.
• font-size:
• Controlling the size of the text.
• font-weight:
• Adjusting the thickness or boldness of the text.
• font-style:
• Setting the style of the font (italic, oblique).
Text Properties in CSS

• color:
• Defining the color of the text.
• line-height:
• Adjusting the space between lines of text.
• text-align:
• Aligning text within its container.
• text-decoration:
• Adding or removing underlines, overlines, and line-
throughs.
References
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_m
odel/Introduction_to_the_CSS_box_model
https://www.scaler.com/topics/css/css-box-model/

You might also like