chapter 4a cascade style sheet css
TRANSCRIPT
Chapter 4: Client-Side Scripts Cascading Style Sheets (CSS) Client-Side Scripting with JavaScript Dynamic HTML (DHTML) The Document Object Model (DOM) Application of Client-Side Scripts
Web Programming1
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
An extension (addition) to HTML which allows us to style our web pages
Provides more detailed attributes to elements than the ones defined in standard HTML
Styles are defined once and used any number of times and in several contexts
Clearly separate content from its presentationSaves a lot of work Especially in website maintenance and upgrading
3 Web Programming
Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g.
fonts, colors, layouts) to Web documents. Styles provide powerful control over the
presentation of web pages.
Web Programming4
CSS (cont’d) CSS styles can be specified:
Inside a single HTML element (inline) Inside the <head> element of an HTML document
(internal) In an external CSS file (external)
Rules of precedence application: Inline styles Internal styles (Embedded) External styles Browser default
From highest to lowest5 Web Programming
A style sheet consists of a set of rules. Each rule consists of one or more selectors
and a declaration block. A declaration block consists of a list of
declarations in curly braces ({}). Each declaration consists of a property, a
colon (:), a value, then a semi-colon (;).
Web Programming6
CSS Syntax selector {property: value;}
Web Programming7
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides
CSS Syntax Parts of a style rule (or statement)
The selector is normally the HTML element you want to style.
p {color:red;text-align:center;} To make the CSS more readable, you can put one
declaration on each line, like this: p
{color:red;text-align:center;}
Selectors can be grouped (separated by comma)Ex. p, div, table { align: center }
Web Programming9
CSS (cont’d) Types of selectors
HTML tag names Class selectors Id selectors
HTML tag names as selectors used to override the default attributes of HTML tags
Format: tag_name {property : value}Ex. a { color: red;
text-decoration: overline }
10 Web Programming
CSS (cont’d) The class selector
define generic styles that can be applied to different HTML elements
applied to the class attribute of HTML elements The class selector is used to specify a style for
a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
11 Web Programming
Format: 1. Styles for a particular element
tag_name.style_name { property: value }Ex. p.color { color: green } <p class=“color”>some text</p>
2. Styles for all elements.style_name { property: value }Ex. .color { color: blue } <div class=“color”>some text</div>
<table class=“color”>…</table>
Web Programming12
In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center;} You can also specify that only specific HTML
elements should be affected by a class. In the example below, all p elements with
class="center" will be center-aligned: p.center {text-align:center;}
Web Programming13
CSS (cont’d) The Id selector
unlike the class selector, the Id selector always applies to only one element
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
14 Web Programming
Format: 1. Styles for a particular element
tag_name#style_name { property: value }Ex. p#color { color: green } <p id=“color”>some text</p>
2. Styles for all elements#style_name { property: value }Ex. #color { color: blue } <div id=“color”>some text</div>
<table id=“color”>…</table> possible ???
Web Programming15
CSS (cont’d) CSS comments
Format:/* comment text */
/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}
16 Web Programming
Three Ways to Insert CSS There are three ways of inserting a style
sheet: External style sheet Internal style sheet Inline style
Web Programming17
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
style information is directly attached to the HTML elements they affect
higher cascade precedence than the other specification methods
declaring an individual element’s format: Attribute style CSS (style) property
Followed by a colon and a value
Web Programming18
<tag_name style=“property:value; property: value;”> … </tag_name>
Ex. <table style=“background-color: yellow”>… </table><p style="color:sienna;margin-left:20px">This is a paragraph.</p>
inline.html(1 of 2)
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 5 <!-- Fig. 6.1: inline.html --> 6 <!-- Using inline styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Inline Styles</title> 11 </head> 12 13 <body> 14 15 <p>This text does not have any style applied to it.</p> 16 17 <!-- The style attribute allows you to declare --> 18 <!-- inline styles. Separate multiple styles --> 19 <!-- with a semicolon. --> 20 <p style = "font-size: 20pt">This text has the 21 <em>font-size</em> style applied to it, making it 20pt. 22 </p> 23
24 <p style = "font-size: 20pt; color: #0000ff"> 25 This text has the <em>font-size</em> and 26 <em>color</em> styles applied to it, making it 27 20pt. and blue.</p> 28 29 </body> 30 </html>
Internal or Embedded Style Sheets this method can only specify style information for the
current document: 1:1 relationship However, the same document may have other style definitions
applied to it 1:M relationship
embedded style sheet rule will have higher precedence than external style sheet rule, if there is a conflict between styles
embedded style sheet rule will have lower precedence than an inline style sheet rule
Internal / Embedded Style Sheets Embed an entire CSS document in an XHTML
document’s head section inside a style element Attribute type
Multipurpose Internet Mail Extensions (MIME) type describes the type of the document’s content text/css is the type for CSS document
Style properties are defined for: Existing defined elements, such as p (paragraph), h3
(header), li (Iist) or any other Style class that can be applied to either:
Any existing type of element in the body of the document or One specific element in the document
Internal or Embedded Style Sheets An internal style sheet should be used when a single document has a
unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
defined in the <head> element<style type=“text/css”>
{property:value; ...}</style>
Eg: <head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
Web Programming23
Style Sheet Syntax Explainedselector
property value rule
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: defined in a separate CSS file linked to an HTML document using the <link> tag <link rel=“stylesheet” type=“text/css” href=“url”> changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which the style is attached
Web Programming25
CSS (cont’d) An external style sheet can be written in any text
editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px
26 Web Programming
styles.css(1 of 1)
1 /* Fig. 6.4: styles.css */ 2 /* An external stylesheet */ 3 4 a { text-decoration: none } 5 6 a:hover { text-decoration: underline; 7 color: red; 8 background-color: #ccffcc } 9 10 li em { color: red; 11 font-weight: bold; 12 background-color: #ffffff } 13 14 ul { margin-left: 2cm } 15 16 ul ul { text-decoration: underline; 17 margin-left: .5cm }
external.html(1 of 2)
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4 5 <!-- Fig. 6.5: external.html --> 6 <!-- Linking external style sheets --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Linking External Style Sheets</title> 11 <link rel = "stylesheet" type = "text/css" 12 href = "styles.css" /> 13 </head> 14 15 <body> 16 17 <h1>Shopping list for <em>Monday</em>:</h1> 18 <ul> 19 <li>Milk</li> 20 <li>Bread 21 <ul> 22 <li>White bread</li> 23 <li>Rye bread</li> 24 <li>Whole wheat bread</li> 25 </ul>
26 </li> 27 <li>Rice</li> 28 <li>Potatoes</li> 29 <li>Pizza <em>with mushrooms</em></li> 30 </ul> 31 32 <p> 33 <a href = "http://www.food.com">Go to the Grocery store</a> 34 </p> 35 36 </body> 37 </html>
Some common CSS properties
Background CSS background properties are used to define the
background effects of an element CSS properties used for background effects:
background-color: color background-image: url(url)
Sets the background image for an element background-repeat: repeat_type {repeat, repeat-x,
repeat-y, no-repeat} background-attachment: attachment_type {scroll,
fixed} Sets whether a background image is fixed or scrolls
with the rest of the page (default: scroll)
30 Web Programming
Background Color The background-color property specifies the
background color of an element. The background color of a page is defined in
the body selector: body {background-color:#b0c4de;} With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red"
h1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;}
Web Programming31
Background Image The background-image property specifies an image
to use as the background of an element. By default, the image is repeated so it covers the
entire element. The background image for a page can be set like this:
body {background-image:url('paper.gif');} Background Image - Repeat Horizontally or
Vertically By default, the background-image property repeats
an image both horizontally and vertically.
Web Programming32
Example:
body{background-image:url('gradient2.png');background-repeat:repeat-x;}
Web Programming33
Background - Shorthand property To shorten the code, it is also possible to specify all the properties
in one single property. This is called a shorthand property. The shorthand property for background is simply "background":Background Image - Set position and no-
repeat The position of the image is specified by the background-position
property:body
{background-image:url('img_tree.png');background-repeat:no-repeat;
background-position:right top;}
Web Programming34
The background-position property sets the starting position of a background image. Values of background-position
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom
Web Programming35
body { background:#ffffff url('img_tree.png') no-repeat right
top; }
When using the shorthand property the order of the property values is:
background-color background-image background-repeat background-attachment background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
Web Programming36
Text color: color
The color property is used to set the color of the text. The color can be specified by:
name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector. body {color:blue;}
h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
Web Programming37
The text-decoration property Specifies the decoration added to text. Note: The color of the decoration should be set by the
"color" property. Set the text decoration for h1, h2, h3, and h4 elements:
h1 {text-decoration:overline}h2 {text-decoration:line-through}h3 {text-decoration:underline}h4 {text-decoration:blink}
Web Programming38
direction: direction {ltr, rtl} borwser issue?? letter-spacing: value text-align: alignment {left, right, center, justify} text-decoration: decoration {none, underline,
overline, line-through, blink} white-space: Sets how white space inside an
element is handlednormalprenowrap
Web Programming39
Example:<!DOCTYPE html><html><head> <style> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style></head><body><h1>CSS text-align Example</h1><p class="date">May, 2009</p><p class="main">In my younger and more vulnerable years my father gave me
some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body></html>
Web Programming40
CSS (cont’d)text-indent: value The text-indent property specifies the indentation
of the first line in a text-block. Note: Negative values are allowed. The first line
will be indented to the left if the value is negative. Value: Defines a fixed indentation in px, pt, cm,
em, etc.
(16px=1em).
41 Web Programming
text-transform: transform {none, capitalize, uppercase, lowercase}
The text-transform property controls the capitalization of text.
Capitalize: Transforms the first character of each word to uppercase Uppercase: Transforms all characters to uppercase lowercase :Transforms all characters to lowercase
Example: h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}p {text-transform:lowercase;}
Web Programming42
word-spacing: value The word-spacing property increases or
decreases the white space between words. Note: Negative values are allowed. Example Specify that the space between words in
paragraphs should be 30 pixels:p
{ word-spacing:30px;}
Web Programming43
CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.
Font Family The font family of a text is set with the font-
family property. Note: If the name of a font family is more
than one word, it must be in quotation marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Web Programming44
• Times New RomanGeorgia
• ArialVerdana
• Courier NewLucida Console
• Monospace• Sans-serif
Eg: p{font-family:"Times New Roman", Times,
serif;}
Web Programming45
Font Style The font-style property is mostly used to
specify italic text. This property has three values:
normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very
similar to italic, but less supported) p.normal {font-style:normal;}
p.italic {font-style:italic;}p.oblique {font-style:oblique;}
Web Programming46
Font Size The font-size property sets the size of the
text. Setting the text size with pixels, gives you full
control over the text size:Eg: h1 {font-size:40px;}
h2 {font-size:30px;}p {font-size:14px;}
(16px=1em)Web Programming47
d
An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.
Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt
Web Programming48
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Web Programming49
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size
Web Programming50
So, What’s the Difference? It’s easy to understand the difference
between font-size units when you see them in action. Generally,1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
Web Programming51
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Web Programming52
font-style: style {normal, italic, oblique} font-weight: weight {normal, bold, bolder,
lighter, 100, 200, …} font-size: size font-family: font_list (in order of precedence,
separated by comma)
Borders Margins Padding List properties
Web Programming53
Borders Box model describes the rectangular boxes that are
generated for elements
Web Programming54
Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
Border - A border that goes around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear
Web Programming55
Width and Height of an Element Important: When you set the width and
height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.
Web Programming56
The total width of the element in the example below is 300px
width:250px;padding:10px;border:5px solid gray;margin:10px
The total width of an element should be calculated like this: Total element width = width + left padding + right padding
+ left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom
padding + top border + bottom border + top margin + bottom margin
Web Programming57
Margin properties: margin-top margin-right margin-bottom margin-left margin
These properties set the top, right, bottom, and left margin of a box.
Eg: H1 { margin-top: 2em }
Web Programming58
The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom and margin-left at the same place in the style sheet.
(top->right->bottom->left) If there is only one value, it applies to all sides. If there are two values, the top and bottom
margins are set to the first value and the right and left margins are set to the second.
If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
Web Programming59
If there are four values, they apply to the top, right, bottom, and left, respectively.
Eg: 1) BODY { margin: 2em } /* all margins
set to 2em */ 2) BODY { margin: 1em 2em } /* top &
bottom = 1em, right & left = 2em */ 3) BODY { margin: 1em 2em 3em } /*
top=1em, right=2em, bottom=3em, left=2em */
Web Programming60
The last rule of the example above is equivalent to the example below:
BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side
(right) */ }
Web Programming61
Border properties border-top-width ={thin,thick,medium,length} border-right-width border-bottom-width border-left-width border-width Border width
These properties set the width of the top, right, bottom, and left border of a box
Web Programming62
The border's thickness has an explicit value. Explicit border widths cannot be negative
Eg:H1 { border-width: thin } /* thin thin thin thin */H1 { border-width: thin thick } /* thin thick thin thick */H1 { border-width: thin thick medium }
Web Programming63
border-top-color border-right-color border-bottom-color border-left-color border-color
Web Programming64
border-style The border-style property specifies what kind of
border to display None of the border properties will have ANY effect
unless the border-style property is set! border-style values:
none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. The width of the two
borders are the same as the border-width valueWeb Programming65
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Web Programming66
Border - Individual sides In CSS it is possible to specify different
borders for different sides: p
{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}
Web Programming67
The example above can also be set with a single property:
Example border-style:dotted solid;
Web Programming68
The border-style property can have from one to four values. border-style:dotted solid double dashed;
top border is dotted right border is solid bottom border is double left border is dashed
border-style:dotted solid double; top border is dotted right and left borders are solid bottom border is double
border-style:dotted solid; top and bottom borders are dotted right and left borders are solid
border-style:dotted; all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and border-color.
Web Programming69
Border - Shorthand property To shorten the code, it is also possible to specify
all the individual border properties in one property. This is called a shorthand property.
The border property is a shorthand for the following individual border properties: border:<border-width>|<border-style>|<color> The 'border' property is a shorthand property for setting the same width, color, and
style for all four borders of a box. border-width border-style (required) border-color
Example border:5px solid red;
Web Programming70
<!DOCTYPE html><html><head><style>p.none {border-style:none;}p.dotted {border-style:dotted;}p.dashed {border-style:dashed;}p.solid {border-style:solid;}p.double {border-style:double;}p.groove {border-style:groove;}p.ridge {border-style:ridge;}p.inset {border-style:inset;}p.outset {border-style:outset;}p.hidden {border-style:hidden;}</style></head>
Web Programming71
<p class="none">No border.</p><p class="dotted">A dotted border.</p><p class="dashed">A dashed border.</p><p class="solid">A solid border.</p><p class="double">A double border.</p><p class="groove">A groove border.</p><p class="ridge">A ridge border.</p><p class="inset">An inset border.</p><p class="outset">An outset border.</p><p class="hidden">A hidden border.</p>
Web Programming72
Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
For example, the first rule below is equivalent to the set of four rules shown after it:
P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }
Web Programming73
CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.
Syntax The syntax of pseudo-classes: selector:pseudo-class {property:value;} Anchor Pseudo-classes Links can be displayed in different ways in a CSS-supporting
browser: Example a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
Web Programming74
:first-letter The :first-letter selector is used to add a style to
the first letter of the specified selector.Example Select and style the first letter of every <p>
element:p:first-letter
{ font-size:200%;color:#8A2BE2;}
Web Programming75
Note: The following properties can be used with :first-letter:
font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if float is 'none') text-transform line-height float clear
Web Programming76
:first-line Selector :first-line selector is used to add a style to the first line of the
specified selector. Note: The following properties can be used with :first-line:
font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
Web Programming77
ExampleSelect and style the first line of every <p>
element: p:first-line
{ background-color:yellow;
color:#ff0000; font-variant:small-caps
}
Web Programming78
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:
font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
Web Programming79
CSS - The :before Pseudo-element The ":before" pseudo-element can be used to
insert some content before the content of an element.
The following example inserts an image before each <h1> element:
Example h1:before
{content:url(smiley.gif);}
Web Programming80
<!DOCTYPE html><html> <head> <style> h1:before {content:url(smiley.gif);} </style> </head><body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an
element.</p> <h1>This is a heading</h1> <p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p></body></html>
Web Programming81
CSS - The :after Pseudo-element The ":after" pseudo-element can be used to
insert some content after the content of an element.
The following example inserts an image after each <h1> element:
Example h1:after
{content:url(smiley.gif);}
Web Programming82
display property The display property defines how a certain
HTML element should be displayed.
Web Programming83
none The element will not be displayed at all
box (or flex-box)The element is displayed as a block-level flex container box
blockThe element is displayed as a block-level element (like paragraphs and headers)
flexThe element is displayed as a block-level flex container box
inlineThis is default. The element is displayed as an inline-level element (like span)
list-item
The element is displayed as a list-item, which means that it has a bullet in front of it
table The element is displayed as a table
Web Programming84
<!DOCTYPE html><html><head><style>p {display:inline}</style></head><body> <p>These two paragraphs generates inline boxes, and it
results in</p> <p>no distance between the two elements.</p></body></html>
Web Programming85
Positioning
The CSS positioning properties allow you to position an element
There are four different positioning methods. position:static Postion:relative Postion:absolut Postion:fixed
Web Programming86
position:static The default positioning for all elements is position:static,
which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.
Eg: .static { position: static; }<div class="static">static is the default value. An
element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.
</div>
Web Programming87
position:relative
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
Let's move div down 20 pixels, and to the left 40 pixels:
Eg:
Web Programming88
#div { position:relative; top:20px; left:-40px; }
.relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; }
<div class="relative1">relative behaves the same as static unless you add some extra properties.</div><div class="relative2">Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.</div>
Web Programming89
position:absolute
When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Eg: Let's move div a to the top right of the page:
Web Programming90
#div { position:absolute; top:0; right:0; width:200px; }
Web Programming91
.relative { position: relative; width: 600px; height: 400px; }
.absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }
Web Programming92
<div class="relative">This element is relatively-positioned. If this element was position: static; its absolutely-positioned child would escape and would be positioned relative to the document body.<div class="absolute">This element is absolutely-positioned. It's positioned relative to its parent.</div></div>
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:Example
Web Programming93
p.pos_fixed { position:fixed; top:30px; right:5px;}
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap with other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others)
An element can have a positive or negative stack order:Example
Web Programming94
img{position:absolute;left:0px;top:0px;z-index:-1;}
<!DOCTYPE html><html> <head> <style> img { position:absolute; left:0px; top:0px; z-index:-1; } </style> </head><body><h1>This is a heading</h1><img src="w3css.gif" width="100" height="140" /><p>Because the image has a z-index of -1, it will be placed behind the
text.</p></body></html>
Web Programming95
CSS Lists
The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker
List In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets ordered lists - the list items are marked with numbers or
letters With CSS, lists can be styled further, and images can be
used as the list item marker.
Web Programming96
Different List Item Markers The type of list item marker is specified with the
list-style-type property:Example
Web Programming97
ul.a {list-style-type: circle;}ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}
An Image as The List Item Marker To specify an image as the list item marker,
use the list-style-image property:Example
Web Programming98
ul{list-style-image: url('sqpurple.gif');}
CSS list-style-position Property
The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.
The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.
Web Programming99
ul1{ list-style-type:circle; list-style-position:inside;
}Ul2{
list-style-type:circle; list-style-position:outside;
}
sideIndents the marker and the text. The bullets appear inside the content flow
outside
Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default
Web Programming100
2 columns - right menu#Header {
margin:50px 0px 10px 0px;padding:17px 0px 0px 20px;border:1px dashed #999;background-color:#eee;
}#Content {
margin:0px 200px 50px 50px;padding:10px;border:1px dashed #999;background-color: #eee;
}#Menu {
position:absolute;top:100px;right:20px;width:150px;padding:10px;background-color:#eee;border:1px dashed #999;
}
<body><div id="Header"><h1>Header.com </h1></div><div id="Content"><h1>1. Background</h1><p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were introduced into governmental and nongovernmental institutions, the need for trained manpower in Computer Science was very vital. Realizing the growing need, a diploma program in Computer Science was launched in the evening program in 1983. In addition, the Department also started to offer Computer Science as a minor program for Physics, Statistics, and Library Science students. In 1993, a Degree program in Computer Science was launched.
</p><div id="Menu"><p><a hre="">Link 1</a></p><p><a hre="">Link 2</a></p><p><a hre="">Link 3</a></p><p><a hre="">Link 4</a></p><p><a hre="">Link 5</a></p><p><a hre="">Link 6</a></p></div></body>
Web Programming102
Example: Creating 3 columns - flanking menu
Web Programming103
Web Programming104
.content {position:relative;width:auto;min-width:120px;margin:0px 210px 20px 170px;border:1px solid black;padding:10px;z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}#navAlpha {
position:absolute;width:128px;top:20px;left:20px;border:1px dashed black;background-color:#eee;padding:10px;float:left;z-index:2;
}#navBeta {
position:absolute;width:168px;top:20px;right:20px;border:1px dashed black;background-color:#eee;padding:0px;z-index:1;
} Web Programming105
<div id="navAlpha"><p><a hre="">Link 1</a></p><p><a hre="">Link 2</a></p><p><a hre="">Link 3</a></p><p><a hre="">Link 4</a></p><p><a hre="">Link 5</a></p><p><a hre="">Link 6</a></p></div><div class="content"><h1>1. Background</h1><p>The Computer Science program was started as one of the streams
within the Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were introduced into governmental and nongovernmental institutions, the need for trained manpower in Computer Science was very vital. Realizing the growing need, a diploma program in Computer Science was launched in the evening program in 1983. In addition, the Department also started to offer Computer Science as a minor program for Physics, Statistics, and Library Science students. In 1993, a Degree program in Computer Science was launched.
</p></div>
Web Programming106
<div class="content"><p>The Computer Science program was started as one of the streams within
the Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were introduced into governmental and nongovernmental institutions, the need for trained manpower in Computer Science was very vital. Realizing the growing need, a diploma program in Computer Science was launched in the evening program in 1983.
</p></div><div class="content">
<p><a hre="">Some other links can go here..</a></p></div><div id="navBeta"><p><a hre="">Link 1</a></p><p><a hre="">Link 2</a></p><p><a hre="">Link 3</a></p><p><a hre="">Link 4</a></p><p><a hre="">Link 5</a></p><p><a hre="">Link 6</a></p></div>
Web Programming107