SlideShare a Scribd company logo
1 of 33
Download to read offline
CSS : Cascading Style Sheets
Presented By:
Sayanton Vhaduri Dibbo
Roll : 37
1
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
What is CSS
3
Cascade
4
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
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
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
External Style Sheets
8
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
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
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
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
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;
}
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
Example(Relative Positioning)
15
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
17
Example(Absolute Positioning)
The Box Model
18
total box width =
content area width +
left padding + right
padding +
left border + right border
+
left margin + right margin
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
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
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
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.
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;
}
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;
}
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
Example of Clear Property
26
Example of Clear Property
27
Overflow Property(Visible)
 The overflow is not clipped.
 The content flows out of the box.
.box{ overflow : visible; }
28
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
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
Overflow Property(Auto)
31
Overflow Property(Auto)
32
? ? ?
33

More Related Content

What's hot

What's hot (20)

Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Web Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTMLWeb Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTML
 
Intro to HTML + CSS
Intro to HTML + CSSIntro to HTML + CSS
Intro to HTML + CSS
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
 
Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)Web Development 1 (HTML & CSS)
Web Development 1 (HTML & CSS)
 
CSS
CSSCSS
CSS
 
Css ppt
Css pptCss ppt
Css ppt
 
Css
CssCss
Css
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 
Web Design Course: CSS lecture 2
Web Design Course: CSS  lecture 2Web Design Course: CSS  lecture 2
Web Design Course: CSS lecture 2
 
Css
CssCss
Css
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Html and css
Html and cssHtml and css
Html and css
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 

Viewers also liked

Market insight: In Context of the Bangladesh Power Sector
Market insight: In Context of the Bangladesh Power SectorMarket insight: In Context of the Bangladesh Power Sector
Market insight: In Context of the Bangladesh Power SectorLightCastle Partners
 
Power and energy sector of bangladesh abdullahil mamun, dba, iiuc
Power and energy sector of bangladesh  abdullahil mamun, dba, iiucPower and energy sector of bangladesh  abdullahil mamun, dba, iiuc
Power and energy sector of bangladesh abdullahil mamun, dba, iiucAbdullahil Mamun
 
Power Sector In Bangladesh
Power Sector In BangladeshPower Sector In Bangladesh
Power Sector In BangladeshSayanton Vhaduri
 
Power generation and demand in bangladesh
Power generation and demand in bangladeshPower generation and demand in bangladesh
Power generation and demand in bangladeshGalib Ghani
 
Student result mamagement
Student result mamagementStudent result mamagement
Student result mamagementMickey
 
Power genaration in bangladesh
Power genaration in bangladeshPower genaration in bangladesh
Power genaration in bangladeshMd. Atiqur Rahman
 
Design Patterns
Design PatternsDesign Patterns
Design Patternssoms_1
 

Viewers also liked (9)

Market insight: In Context of the Bangladesh Power Sector
Market insight: In Context of the Bangladesh Power SectorMarket insight: In Context of the Bangladesh Power Sector
Market insight: In Context of the Bangladesh Power Sector
 
Memento
MementoMemento
Memento
 
Power and energy sector of bangladesh abdullahil mamun, dba, iiuc
Power and energy sector of bangladesh  abdullahil mamun, dba, iiucPower and energy sector of bangladesh  abdullahil mamun, dba, iiuc
Power and energy sector of bangladesh abdullahil mamun, dba, iiuc
 
Memento pattern
Memento patternMemento pattern
Memento pattern
 
Power Sector In Bangladesh
Power Sector In BangladeshPower Sector In Bangladesh
Power Sector In Bangladesh
 
Power generation and demand in bangladesh
Power generation and demand in bangladeshPower generation and demand in bangladesh
Power generation and demand in bangladesh
 
Student result mamagement
Student result mamagementStudent result mamagement
Student result mamagement
 
Power genaration in bangladesh
Power genaration in bangladeshPower genaration in bangladesh
Power genaration in bangladesh
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 

Similar to CSS_Dibbo

Similar to CSS_Dibbo (20)

CSS
CSSCSS
CSS
 
Css advanced – session 4
Css advanced – session 4Css advanced – session 4
Css advanced – session 4
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01
 
CSC PPT 9.pptx
CSC PPT 9.pptxCSC PPT 9.pptx
CSC PPT 9.pptx
 
Advanced CSS.pptx
Advanced CSS.pptxAdvanced CSS.pptx
Advanced CSS.pptx
 
Chapter6
Chapter6Chapter6
Chapter6
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
Web Design & Development - Session 3
Web Design & Development - Session 3Web Design & Development - Session 3
Web Design & Development - Session 3
 
HTML and CSS part 3
HTML and CSS part 3HTML and CSS part 3
HTML and CSS part 3
 
Web Programming Basic topic.pptx
Web Programming Basic topic.pptxWeb Programming Basic topic.pptx
Web Programming Basic topic.pptx
 
css.pdf
css.pdfcss.pdf
css.pdf
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
CSS tutorial chapter 3
CSS tutorial chapter 3CSS tutorial chapter 3
CSS tutorial chapter 3
 
Css layout
Css layoutCss layout
Css layout
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
CSS
CSSCSS
CSS
 
Cascading Style Sheets CSS
Cascading Style Sheets CSS Cascading Style Sheets CSS
Cascading Style Sheets CSS
 

CSS_Dibbo

  • 1. CSS : Cascading Style Sheets Presented By: Sayanton Vhaduri Dibbo Roll : 37 1
  • 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
  • 26. Example of Clear Property 26
  • 27. Example of Clear Property 27
  • 28. Overflow Property(Visible)  The overflow is not clipped.  The content flows out of the box. .box{ overflow : visible; } 28
  • 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