css_dibbo
TRANSCRIPT
![Page 1: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/1.jpg)
1
CSS : Cascading Style Sheets
Presented By:Sayanton Vhaduri Dibbo
Roll : 37
![Page 2: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/2.jpg)
2
Topics OverviewThree ways to add style rules Normal flow of html elements Positioning of elements Box Model Span and Div Float Property Clear Property Overflow Property
![Page 3: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/3.jpg)
3
What is CSS
![Page 4: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/4.jpg)
4
Cascade
![Page 5: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/5.jpg)
5
Three ways to add style rulesInline Style - Add style information
to a tagEmbedded 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
![Page 6: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/6.jpg)
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>
![Page 7: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/7.jpg)
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>
![Page 8: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/8.jpg)
8
External Style Sheets
![Page 9: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/9.jpg)
9
Normal FlowThis 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 …………
![Page 10: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/10.jpg)
10
Normal FlowThis 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 …………
![Page 11: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/11.jpg)
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
![Page 12: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/12.jpg)
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
}
![Page 13: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/13.jpg)
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.
.fixed {
position: fixed;top:500px;left:200px;width:200px;}
![Page 14: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/14.jpg)
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;}
![Page 15: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/15.jpg)
15
Example(Relative Positioning)
![Page 16: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/16.jpg)
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.
![Page 17: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/17.jpg)
17
Example(Absolute Positioning)
![Page 18: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/18.jpg)
18
The Box Modeltotal box width =
content area width + left padding + right
padding + left border + right
border + left margin + right
margin
![Page 19: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/19.jpg)
19
Block and Inline BoxesEach 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.
![Page 20: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/20.jpg)
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
![Page 21: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/21.jpg)
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>
this
![Page 22: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/22.jpg)
22
Float Property 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.
![Page 23: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/23.jpg)
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.
IMG { float:left;}
![Page 24: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/24.jpg)
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.
<ul><li>Home</li><li>Products</li><li>Services</li><li>Contact Us</li>
</ul>
After applying LI {
float:left;
}
![Page 25: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/25.jpg)
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.
![Page 26: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/26.jpg)
26
Example of Clear Property
![Page 27: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/27.jpg)
27
Example of Clear Property
![Page 28: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/28.jpg)
28
Overflow Property(Visible) The overflow is not clipped. The content flows out of the box.
.box{ overflow : visible; }
![Page 29: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/29.jpg)
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; }
![Page 30: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/30.jpg)
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; }
![Page 31: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/31.jpg)
31
Overflow Property(Auto)
![Page 32: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/32.jpg)
32
Overflow Property(Auto)
![Page 33: CSS_Dibbo](https://reader035.vdocuments.mx/reader035/viewer/2022070509/589fa6351a28abc04e8b6093/html5/thumbnails/33.jpg)
33
? ? ?