XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1...
Transcript of XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1...
![Page 1: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/1.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
1
XP
Review
• What these styles mean?
<style>
h1, h2, h3 { text-align:center}
#head {font-weight:bold}
.red {color:red}
li a {line-height: 200%; text-decoration: none}
#head a {font-family: sans-serif}
</style>
![Page 2: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/2.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
2
XPApplying a style to a class and element
![Page 3: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/3.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
3
XPSizing Elements and Floating an Element
• You can define the width of columns in a columnar layout using: width: value
• You can use CSS to set an element’s height using: height: value
• You can float a paragraph using: float: position (position = none, left,
right or inherit)
![Page 4: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/4.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
4
XP
Working with the div Element
• The div element is a generic block-level
element.
<div>
content
</div>
![Page 5: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/5.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
5
XP
Working with the Box Model
• The box model is an element composed of
four sections:
– Margin (between the element and the other
content)
– Border (of the box)
– Padding (between the element’s content and the box’s border)
– Content (of the element)
![Page 6: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/6.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
6
XP
The Box Model
![Page 7: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/7.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
7
XP
If blocks are not aligning right
• Specify both margin and padding for the
block
• For example: IE sets indentation for list items
by setting the size of the left margin, whereas
Mozilla uses left padding. For this reason
you need to change both values in order to
have them show consistently in all browsers
![Page 8: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/8.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
8
XP
Working with the Box Model
• Styles to set padding are similar to styles to set margins:– padding-top: value
– padding-right: value
– padding-bottom: value
– padding-left: value
• padding: top right bottom left
• padding: value (same value for top, right, bottom and left)
![Page 9: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/9.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
9
XP
Setting the Display Style
Some Values of the display style
![Page 10: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/10.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
10
XP
Border Styles
![Page 11: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/11.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
11
XP
Border Style Types
![Page 12: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/12.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
12
XP
Border Shortcuts
• border-top: width style color
• border-right: width style color
• border-bottom: width style color
• border-left: width style color
• border: width style color
• Ex: border-top: 3px dashed black
• Ex: border: 2px double blue
![Page 13: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/13.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
13
XPUsing Pseudo-Classes and Pseudo-Elements
• A pseudo-class is a classification of an element based on its status, position, or current use in the
document.
![Page 14: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/14.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
14
XPUsing Pseudo-Classes and Pseudo-Elements
• Rollover effects can be created using pseudo-classes.
• Pseudo-elements are elements based on information about an element’s content, use or position.
Ex: Ex: Ex: Ex: #firstp:first-letter {float: left; font-size:400%}
![Page 15: XP ReviePositioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P. ... inherit) Title: Microsoft](https://reader034.fdocuments.in/reader034/viewer/2022051814/6038d8378756e0788e2d1dfb/html5/thumbnails/15.jpg)
Tutorial 7 New Perspectives on HTML and XHTML,
Comprehensive
15
XP
Positioning Objects with CSS
• The different positioning styles in the original
CSS1 specifications were known as CSS-
Positioning or CSS-P.
• To place an element at a specific position on a page use:position: type; top: value; right: value;
bottom: value; left: value;
(type=absolute, relative, static, fixed, or
inherit)