Lecture 5: CSS: Relative, Absolute, and Floating Positioning, Cascading Style Sheet

Lecture 5: CSS
RELATIVE, ABSOLUTE, AND FLOATING POSITIONING,

CASCADING STYLE SHEET
Beyond The Normal Flow
Normal flow is the default way in which a browser will format an HTML
document.
Three CSS alternatives to normal flow. They are used to control the position of
boxes in a browser window
Relative position
Float position
Absolute position
Relative Position
Relative position: the position is altered relative to its normal flow position.
For example,
Blue Red
If .right{ position: relative; right: 10px }
Blue Red
Relative Position
The type of positioning for an element is defined by specifying two style
properties.
Position:
◦ static (initial value): indicate normal flow
◦ relative: indicate relative positioning
◦ Absolute: indicate absolute positioning
Four properties apply to positioned elements: left, right, top, bottom.

Relative Position
The value for left, right, top, bottom is either a length or a percentage. The value auto
means the default value.
.left { position: relative;

left: 10px;
}
Note: a positive value for the left property moves the box to the right by the specified
amount.
What does “top: -20px” do to its box?
Float Positioning
Float positioning is often used when embedding images within a paragraph.
It often produces a visual effect of text wrapping around the floated block.
A floated inline box becomes a block box for display purposes, which means you
can specify width and height for the box.
Absolute Positioning
Absolute positioning offers total control over the placement of boxes in the
browser window. It is useful to be able to place a box exactly where you want it.
You can use left, right, top, and bottom properties to place the box relative to a
containing block (A containing block is the nearest positioned ancestor. A
positioned element has position value other than static)
If the box of an inline element is positioned absolutely, the box becomes a block
box, and therefore can have its width set explicitly
External CSS
An external style sheet is ideal when the style is applied to many pages.
How to link a HTML file to a given .css file?

<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head>
Relative Address VS Absolute Address
C://CGS3066/Lecture1/HelloWorld.html
◦ This is an absolute address
A relative address is a short address relative to a base address.

◦ Its relative address is HelloWorld.html, if the base address is C://CGS3066/Lecture1/
Base address is C://CGS3066/Lecture1/
AbsoluteAddress = BaseAddress + RelativeAddress

Cascading of Style Sheet Rules
Cascading Rules
* { font-weight: bold }, which applies to every element of the HTML document.

#p1, #p3{ background-color: yellow}
Now I specify #p3{ font-weight: normal}, which rule would apply to the font-
weight property of id=“p3”?
The general question is: which rule applies to a given element when there are
multiple style declarations apply to the property of that element?
Rule Cascading: a multistage sorting process that selects a single declaration that
will supply the property value.
First Rule: deciding which external style sheets apply to the document.
Second stage: associate an origin and weight with every declaration that applies to
a given property of a given element.
The origin of a style sheet declaration is who wrote the declaration.

◦ Author: If the declaration is part of an external or embedded style sheet or is part of the
style attribute of the given element, then the author of the HTML document is the origin
◦ User Agent: Browser
◦ User: browsers allow users to provide a style sheet or indicate style preferences that are
treated as style rules.
Besides to origin, every author and user style declaration has one of two weight
values: normal and important
A declaration has important weight if it ends with an exclamation mark (!)

followed by the word “important”
◦ E.g., p{ font-size: 12pt; color: red !important}
Once the origin and weight of all declarations applying to an element property
have been established, they are prioritized (from high to low) as follows:
1. Important declaration with user origin.
2. Important declaration with author origin
3. Normal declaration with author origin
4. Normal declaration with user origin
5. Any declaration with user agent
If one bin has a single declaration, the declaration is applied to the element
property and we are done!
If the top nonempty bin of the weight-origin sort has multiple style declarations for
a single element property, then sort the declarations according to their specificity.
If a declaration is part of the value of a style attribute, then it is given the highest
possible specificity value.
If a declaration is a ruleset, then its specificity is determined by the selector(s) for

the ruleset.
What is rule set?
h1, #head5, .big{font-size: 12pt} is treated as the equivalent three rulesets:
◦ h1{font-size:12pt}
◦ #head5{font-size: 12pt}
◦ .big{font-size: 12pt}
From highest to lowest specificity:
◦ ID selectors
◦ Class selectors
◦ Descendant and type selectors
◦ Universal selectors (*)
We select a ruleset from the first nonempty bin.

If two rulesets appears in the same bin, we search lower bins for the first
recurrence of either ruleset. If one of the ruleset recurs before the other, then it is
chosen.
e.g., li.special, *.special
Final step is to chose the declaration corresponding to the rule that appears farthest
down in the list is chosen.
styleCascade.html
For example:
<title>StyleCascadingRule</title>
<style type=“text/css”>
Style.css p{color : red}
</style>
<link rel=“stylesheet” type=“text/css” href=“style.css”/>
p{ color: green } <style type=“text/css”>
p{color: yellow}
</style>
Forms
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select> <option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select> <textarea name="comment" rows="60" cols="20"></textarea>
Frames
<FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>
The next example creates three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the
remaining space and the third 75% of the remaining space.
<FRAMESET cols="1*,250,3*">
</FRAMESET>
The next example creates a 2x3 grid of subspaces.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
</FRAMESET>
<HTML> <FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</FRAMESET>
</HTML>
Iframe
An iframe is used to display a web page within a web page.
Syntax:
<iframe src=“demo iframe.htm” width=“200” height=“200” frameborder=“0” name=“iframe
a”></iframe>
An iframe can be used as the target frame for a link.
<p><a href=“http://www.google.com” target=“iframe a”>Google </a></p>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Media
Multimedia comes in many different formats.
It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
Web pages often contains multimedia elements of different types and formats.
Common audio formats include .midi, .wma, .wav, .mp3, .mp4 etc.
Common video formats include .mpg, .wmv, .avi, .flv, .mp4, .mov, etc.
HTML Video Tags
<video>: Defines a video or movie.
<source>: Defines multiple media resources for media elements, such as <video>and <audio>.
<track>: Defines text tracks in media players.
<video width=“320” height=“240” controls> <source src=“movie.mp4” type=“video/mp4” > Your browser does
not support the video tag. </video>
The controls attribute adds video controls, like play, pause, and volume.
Text between the <video>and </video>tags will only display in browsers that do not support the <video>element.
Multiple <source>elements can link to different video files. The browser will use the first recognized format.
To start a video automatically use the autoplay attribute.
Plug ins
<object>and <embed>elements are used to add helper applications.
Examples are java applets for maps, virus scans, etc.
<object>is supported by all browsers. <embed>by most later versions, and doesn’t have a
closing tag.
Youtube elements are usually embedded into iframes, objects or embed elements.
The other attributes for the video tags work here.
<embed width="100%" height="500px" src="snippet.html">

Lecture 5: CSS: Relative, Absolute, and Floating Positioning, Cascading Style Sheet

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 5: CSS: Relative, Absolute, and Floating Positioning, Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Lecture 5: CSS

RELATIVE, ABSOLUTE, AND FLOATING POSITIONING,

If .right{ position: relative; right: 10px }

Four properties apply to positioned elements: left, right, top, bottom.

.left { position: relative;

How to link a HTML file to a given .css file?

A relative address is a short address relative to a base address.

Base address is C://CGS3066/Lecture1/

AbsoluteAddress = BaseAddress + RelativeAddress

* { font-weight: bold }, which applies to every element of the HTML document.

The origin of a style sheet declaration is who wrote the declaration.

A declaration has important weight if it ends with an exclamation mark (!)

If a declaration is a ruleset, then its specificity is determined by the selector(s) for

We select a ruleset from the first nonempty bin.

...the rest of the definition...

...the rest of the definition...

The next example creates a 2x3 grid of subspaces.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">

...the rest of the definition...

<embed width="100%" height="500px" src="snippet.html">

You might also like