Basics of

Page Layout
<p> CSS Concepts,
CSS Techniques </p>
 OBJECTIVES.
01 02 03
CSS Concepts: Box Model, Responsiveness and Overview: JavaScript
Negative Margin, Display, Breakpoints
Position, Float, Z-Index
 CSS
0 Concepts?
1
<p> Box Model, Negative Margin, Display, Position,
Float, Z-Index </p>
The Box Model?
<p> In CSS, the term "box model" is used when talking
about design and layout. The CSS box model is essentially a
box that wraps around every HTML element. It consists of the
following: content, padding, borders and margins. </p>
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
The Box Model?
1. All HTML elements are boxes.
2. Every element on your web page
is treated as a box.
3. Nested, Stack on top of each other
depending on their properties.
Negative Margin
Display
<p> The display property in CSS determines just how that
rectangular box behaves </p>
Inline Display
<p> The default value for elements. Think of elements like
<span>, <em>, or <strong> and how wrapping text in
those elements within a string of text doesn’t break the flow
of the text. </p>
Inline Block Display
<p> An element set to inline-block is very similar to inline in
that it will set inline with the natural flow of text. </p>
Block Display
<p> A number of elements are set to block by the browser
UA stylesheet. They are usually container elements, like
<div>, <section>, and <ul>. Also text “blocks” like <p> and
<h1>. Block level elements do not sit inline but break past
them.</p>
Position
<p> A positioned element is an element whose computed
position value is either relative, absolute, fixed, or sticky.
</p>
Static Position
<p> The default position value of any box. This results in the
box being laid out in normal flow and the properties of top,
bottom, left and right (also known as box offset values) will
have no effect because the box is considered not positioned.
</p>
Relative Position
<p> The top and bottom properties specify the vertical
offset from its normal position; the left and right properties
specify the horizontal offset. </p>
Absolute Position
<p> An element whose computed position value is absolute
or fixed. An absolutely positioned box is explicitly offset with
respect to its containing block, and the box does not
participate in the normal flow at all. Its later siblings will not
know about its existence in the greater layout.</p>
Sticky Position
<p> A sticky positioned box works similarly to that of a
relatively positioned box. The difference is that the offset is
computed to the nearest ancestor with a scrolling box, or
the viewport if no such ancestor exists. </p>
Float
<p> Floated elements remain a part of the flow of the web
page. This is distinctly different than page elements that use
absolute positioning. Absolutely positioned page elements
are removed from the flow of the webpage, like when the
text box in the print layout was told to ignore the page wrap.
</p>
Float
<p> Floats can be used to create entire web layouts. </p>
Float
<p> Float’s sister property is clear. An element that has the
clear property set on it will not move up adjacent to the float
like the float desires but will move down past the float. </p>
Float
#footer { clear: both; }
Float
<p> Clear has four valid values as well. Both are most
commonly used, which clear floats coming from either
direction. Left and Right can be used to only clear the float
from one direction, respectively. </p>
Float
<p> One of the more bewildering things about working with floats is
how they can affect the element that contains them (their “parent”
element). If this parent element contained nothing but floated
elements, its height would literally collapse to nothing. </p>
Z-Index
<p> The z-index property can be specified with an integer
value (positive, zero, or negative), which represents the
position of the element along the z-axis. </p>
Z-Index
<p> If several elements
share the same z-index value
(i.e., they are placed on the
same layer), stacking rules
explained like this. </p>
Z-Index
1. The Background and borders
of the root element
2. Descendant non-positioned
blocks, in order of
appearance in the HTML
3. Descendant positioned
blocks, in order of
appearance in the HTML
 Responsiveness and
0 Breakpoints

2
<p> Media queries, types, breakpoints </p>
Introduction:
Responsiveness
<p> Each device has a different screen size, it's important to
adjust the layout accordingly for the best user experience.
</p>

</p> One of the popular methods to adjust your screen

layout for different devices is using Media Query. </p>
Media Query
<p> Media queries are a way to target browser by certain
characteristics, features, and user preferences, then apply
styles or run other code based on those things. </p>
Anatomy of a Media
Query
Media Types
• all: Matches all devices

• print: Matches documents that are viewed in a print

preview or any media that break the content up into
pages intended to print.

• screen: Matches devices with a screen

• speech: Matches devices that read the content audibly,

such as a screenreader.
Media Features
Display Quality
Color
Interaction
User Preferences
Using min- and max-
Nesting and Decision
Making

<p> If you have a set of queries, any of which could match, then
you can utilize logic by using commas to separate these queries.
</p>

</p> You can negate an entire media query by using the not
operator. </p>
Choosing Breakpoints
<p> There are far too many devices, with a huge variety of
sizes, to make it feasible to create style rules for each specific
device. </p>
 Choosing Breakingpoints

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

Responsive Images
<p> it's very costly (bandwidth, speed) to load
images bigger than the size you need. We should load
smaller size images for smaller screen resolution.
</p>
 Overview
0 JavaScript

3
<p> Next Presentation </p>
THANK
YOU!
Do you have any questions?
😁