3. Normal Flow
• Browsers will normally displays block-level
elements and inline elements from left to
right and from top to bottom
• Block level elements such as <div> <table> etc
are contained on their own line
• Inline elements do not form their own blocks
but instead are displayed within lines such as
<em> <a> <span>
4. Block-level Elements
• A block-level element always starts on a new
line and takes up the full width available
(stretches out to the left and right as far as it
can).
• The <div> element is a block-level element.
5. Inline Elements
• An inline element does not start on a new line
and only takes up as much width as necessary.
• This is an inline <span> element inside a
paragraph.
6.
7. Positioning Elements
• The position property specifies the type of
positioning method used for an element.
• The types of positioning elements are
• relative
• fixed
• Absolute
• Static
8. Static Positioning
• This is the default for every single page element.
• Different elements don't have different default values for
positioning, they all start out as static.
• Static doesn't mean much; it just means that the element will
flow into the page as it normally would.
• The only reason you would ever set an element to position:
static; is to forcefully remove some positioning that got
applied to an element outside of your control.
9. Fixed Positioning
• A fixed position element is positioned relative to the viewport,
or the browser window itself.
• The viewport doesn't change when the window is scrolled, so a
fixed positioned element will stay right where it is when the
page is scrolled
• The top, right, bottom, and left properties are used to position
the element.
• A fixed element does not leave a gap in the page where it
would normally have been located.
10. Relative Positioning
An element with position: relative; is positioned relative to its
normal position
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away
from its normal position.
If you set position: relative; on an element but no other
positioning attributes (top, left, bottom or right), it will no
effect on it's positioning at all, it will be exactly as it would be
if you left it as position: static; But if you do give it some other
positioning attribute, say, top: 10px;, it will shift its position 10
pixels up from where it would normally be.
11. Absolute Positioning
• An element with position: absolute; is positioned relative to
the nearest positioned ancestor
• This is a very powerful type of positioning that allows you to
literally place any page element exactly where you want it.
• You use the positioning attributes top, left, bottom. and right to
set the location.
• If an absolute positioned element has no positioned ancestors,
it uses the document body, and moves along with page
scrolling.vwport, like fixed).
12. Z-index
• The z-index property specifies the stack order of an element.
• An element with greater stack order is always in front of an
element with a lower stack order.
• z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
13. Floating Elements
• The CSS float property specifies how an element should
float.
• The CSS clear property specifies what elements can float
beside the cleared element and on which side.
The float property can have one of the following values:
• left - The element floats to the left of its container
• right- The element floats to the right of its container
• none - The element does not float (will be displayed just
where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent
• In its simplest use, the float property can be used to wrap
text around images.
14.
15. Clear Property
• The clear property specifies what elements can float beside
the cleared element and on which side
• The clear property can have one of the following values:
• none - Allows floating elements on both sides. This is
default
• left - No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both - No floating elements allowed on either the left or the
right side
• inherit - The element inherits the clear value of its parent
17. Clearfix
• If an element is taller than the element
containing it, and it is floated, it will "overflow"
outside of its container:
• Then we can add overflow: auto; to the
containing element to fix this problem:
• The overflow: auto clearfix works well as long as
you are able to keep control of your margins and
padding
• The new, modern clearfix hack however, is safer
to use, and the following code is used for most
webpages:
19. Overlaying and hiding elements
• Hiding an element can be done by setting
the display property to none. The element will
be hidden, and the page will be displayed as if
the element is not there
20. • <!DOCTYPE html>
• <html>
• <body>
• <h2>What Can JavaScript Do?</h2>
• <p id="demo">JavaScript can hide HTML elements.</p>
• <button type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
• </body>
• </html>
22. Multi Column Layouts
• There are two different ways to move items
out of the normal top-down flow, namely,
• Positioning
• Floats
• A typical layout may use both positioning and
floats for multicolumn layouts
23. Using floats to create columns
• The most common way to create a column of
content is with the help of floats
• The first step is to float the content ,container
that will be on the left hand side.
24. Using positioning to create columns
• Positioning can also be used to create multi
column layouts
• First step is to position the floated elements.
25. Approaches to CSS layout
The table-layout property defines the algorithm
used to lay out table cells, rows, and columns.
Syntax:
table-layout: auto | fixed | initial |inherit;
Two basic models
Fixed Layout
Liquid Layout
Other layout approach(hybrid)
26. Fixed Layout
• In fixed layout, the basic width is set by
designer
• Fixed layout are created using pixel units
typically with entire content within <div>
container
Advantage:
• Easier to produce and generally have a
predictable visual result
27. Disadvantage:
• For larger screen, there may be an excessive
amount of blank space to the left & right of
the content
• When browser window shrinks below the
fixed width; the user will have to horizontally
scroll to see all the content
29. Liquid Layout
• Second approach dealing with the problem of
multiple screen sizes is to use fluid (liquid)
layout
• Width are not specified using pixels, but
percentage values
Advantage
• Adapt to different browser sizes, neither
wasted white space nor ant need for
horizontal scrolling
30. Responsive Design
• In responsive design ,the page “responds” to changes
in the browser size that go beyond the width scaling
of a liquid layout
• Responsive Web Design is about using HTML and CSS
to automatically resize, hide, shrink, or enlarge, a
website, to make it look good on all devices
(desktops, tablets, and phones):
32. Key Components
a. Liquid Layout
b. Scaling images to the viewport size
c. Setting viewport via the <meta> tag
d. Customizing the CSS for different viewports
using media queries
img{
Max-width: 100%;
}
33. Setting viewports
• When making responsive web pages, add the
following <meta> element in all your web pages:
<meta name="viewport" content="width=device-
width/">
• This will set the viewport of your page, which will
give the browser instructions on how to control the
page's dimensions and scaling.
• Here is an example of a web page without the
viewport meta tag, and the same web
page with the viewport meta tag:
34.
35. Media Queries
• Media query is a CSS technique introduced in
CSS3.
• It uses the @media rule to include a block of CSS
properties only if a certain condition is true.
• In addition to resize text and images, it is also
common to use media queries in responsive web
pages.
• With media queries you can define completely
different styles for different browser sizes.
36. • Example: resize the browser window to see
that the three div elements below will display
horizontally on large screens and stacked
vertically on small screens:
37. Browser Features with media query
• Width- width of the viewport
• Height- height of the viewport
• Device-width –width of the device
• Device-height- height of the device
• Orientation- Whether the device is portrait or
landscape
• Color- the number of bits per color
39. Grid System
• The CSS Grid Layout Module offers a grid-
based layout system, with rows and columns,
making it easier to design web pages without
having to use floats and positioning
• Easy to create multicolumn layout
• Most popular are Bootstrap's grid system,
blueprint etc.
• To achieve visual uniformity in a design
40. CSS Preprocessors
• CSS Preprocessors are tools that allow the
developer to write CSS that takes advantage of
programming ideas such as variable,
inheritance, calculations and functions
• It Can provide additional functionalities that
are not in CSS
