Scribd
Upload
15 views

Lecture 1.3.3

Uploaded by

ishanbhandari2003
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Lecture 1.3.3

Uploaded by

ishanbhandari2003
Copyright
© © All Rights Reserved
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
Basic Box Properties, Colors, and Backgrounds, Floating and Positioning
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 foundational structure of HTML elements represented as boxes is a fundamental concept in web
development known as the CSS Box Model. This model provides a systematic way to understand and
control the layout of elements on a webpage. Here's a breakdown of the key components within this
foundational structure:
1. Content:
2. The actual content or data of the HTML element, such as text, images, or other media. It occupies the space inside the box.
3. Padding:
4. The transparent area around the content inside the box. Padding provides space between the content and the element's border.
5. Border:
A visible or invisible boundary that surrounds the padding. The border defines the outer edge of the box and can have specified
width, style, and color.
Margin:
The transparent area outside the border, creating space between the element's border and adjacent elements. Margins contribute to
the spacing between elements on a webpage.
Basic Box Properties

• Block-level Elements:

• Create a new block or box, starting on a new line.

• Examples include <div>, <p>, <h1>.

• Inline Elements:

• Flow within the content, not starting on a new line.

• Examples include <span>, <a>, <strong>.

• Colors and Backgrounds:

• Color Types:

• Named Colors: Keywords like red, blue.

• Hexadecimal Colors: #RRGGBB format.

• RGB Colors: rgb(255, 0, 0) format.


Basic Box Properties

• Background Types:

• Solid Color Backgrounds: background-color property.

• Image Backgrounds: background-image property.

• Floating and Positioning:

• Floating Elements:

• Float Property: float: left or float: right.

• Clearing Floats: Ensuring elements below a floating element are not affected.
Floating and Positioning:

Floating Elements:

• Float Property: float: left or float: right.

• Clearing Floats: Ensuring elements below a floating element are not affected.

Positioning Elements:

• Relative Positioning: position: relative.

• Absolute Positioning: position: absolute.

• Fixed Positioning: position: fixed.

• Static Positioning: Default positioning.


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/float
https://developer.mozilla.org/en-US/docs/Web/CSS/float

You might also like