2. Topics
Overview
Three ways to add style rules
Normal flow of html elements
Positioning of elements
Box Model
Span and Div
Float Property
Clear Property
Overflow Property
2
5. Three ways to add style rules
Inline Style - Add style information to a
tag
Embedded Style - Add style information
to the document at the beginning
External Style Sheet - Put all of your
style in an external file
◦ Preferred – because different pages can
use the same style sheet
5
6. Inline Styles
<h1>
<img src="appengine.jpg" width="142" height="109“ style="float:right"/>
Google App Engine: About
</h1>
<p>
Welcome to the site dedicated to learning the Google Application Engine.
We hope you find www.appenginelearn.com useful.
</p>
6
7. Embedded Style
<html>
<head>
<title>Learning the Google App Engine</title>
<style type="text/css">
body {
font-family: arial;
}
</style>
</head>
<body>
<h1> Bangladesh is a beautiful country</h1>
</body>
</html>
7
9. Normal Flow
This is a paragraph to
which I have set the width.
If the next paragraph fits next
to it on the right, it will line up.
If there is no space to fit this block element , then it shifts
down and then all other block elements places after that
…………
9
10. Normal Flow
This is a paragraph to
which I have set the width.
However, if the second paragraph is
too wide to fit the screen, it will shift
down.
This is the basic principle of Normal Flow
If there is no space to fit this block element ,then it shifts
down and then all other block elements places after that
…………
10
11. Positioning
The CSS positioning properties allow you to position an
element.
Elements can be positioned using the top, bottom, left,
and right properties. They work differently depending on
the positioning method.
There are four different positioning methods.
Static
Fixed
Relative
Absolute
11
12. Static Positioning
Static is the default value.
An element with position: static, is not positioned in any
special way.
Static positioned elements are not affected by the top,
bottom, left, and right properties.
.static{
position : static
}
12
13. Fixed Positioning
An element with fixed position is positioned relative to
the browser window.
It always stays in the same place even if the page is
scrolled.
13
.fixed {
position: fixed;
top:500px;
left:200px;
width:200px;
}
14. Relative Positioning
A relative positioned element is positioned relative to its
normal position.
Relative positioning behaves the same as static unless
we add some extra properties(top , right , bottom , left).
.relative1 { position: relative; }
.relative2 {
position: relative;
top: -20px; left: 20px;
background-color: white;
width: 500px;}
14
16. Absolute Positioning
An absolute position element is positioned relative to the
first parent element that has a position other than static.
If no such element is found, relative to document’s BODY
Absolutely positioned elements can overlap other
elements.
16
18. The Box Model
18
total box width =
content area width +
left padding + right
padding +
left border + right border
+
left margin + right margin
19. Block and Inline Boxes
Each box can contain other boxes,
corresponding to elements that are nested
inside of it.
There are two types of boxes – necessary to
specify as a property of the element (display
which takes values – block or inline)
HTML
◦ Block boxes are created by <p>, <div>, or <table>
◦ Inline are created by <b>, <em>, and <span> as
well as content, such as text and images.
19
20. Span and Div
<span> and <div> are tags that let you select a
group of elements and apply styles to them
<span> is an inline tag
◦ no breaks are added before or after <span></span>
<div> is a block tag
◦ a break is usually added by the browser before and
after the <div></div> tags
20
21. Span and Div(Cont…)
<html>
<head><title>Span and Div</title>
<style type=“text/css”>
.red {color:red; font-family: Georgia; font-weight:bold;}
</style>
</head><body>
<p>This will also appear as normal paragraph text except <span class=“red”>here
because I made the text red,bold, and Georgia font without breaking up the
paragraph.</span> Now I am back to normal... </p>
<p>
I start off as normal paragraph text here as well. However, when I use a div tag to apply
a style, my paragraph is broken like <div class=“red”>this. You can see that the
browser sets off this text from the text before and </div> after it. Now I am back to
normal again.
</p>
</body></html>
21
this
22. Float Property
22
Float is intended for wrapping text around images.
The elements after the floating element will flow
around it.
The elements before the floating element will not be
affected.
23. Float Property
Elements are floated horizontally, this means that an
element can only be floated left or right, not up or
down.
The float CSS property can accept one of four values:
left, right, none, and inherit.
23
IMG {
float:left;
}
24. Floating multiple elements
Floated boxes will move to the left or right until their outer edge
touches the containing block edge or the outer edge of another
float.
24
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
After applying
LI {
float:left;
}
25. Turning off Float -Using Clear
The clear property is important for controlling the
behavior of floats.
Elements after the floating element will flow around
it. To avoid this, use the clear property.
The clear property will clear only floated elements.
25
29. Overflow Property(Hidden)
The opposite of the default visible is hidden.
This literally hides any content that extends beyond the
box.
.box{ overflow : hidden; }
29
30. Overflow Property(Scroll)
Setting the overflow value of a box to scroll will
hide the content from rendering outside the box.
It will offer scrollbars to scroll the interior of the box
to view the content.
.box { overflow : scroll; }
30