Professional Documents
Culture Documents
pseudo-classes
Rules of thumb:
Use external style sheets to define site-wide style
Prefer style sheets (either external or embedded)
to style attributes
XML special characters
Must use references in embedded style sheets and
style attribute
Must not use references in external style sheets
HTML 4.01 specification suggests enclosing
the content of a style element within an SGML
comment
Eg:
<style type="text/css">
<!--
h1, h2 { background-color:aqua }
-->
</style>
The use of style sheets is recommended
over the use of style attributes, for a number
of reasons.
ease of coding
it is generally much easier to modify the style of
a document that uses style sheets to define style
than it is to modify one that uses style attributes.
Generally best to keep all style information out
of the body of an HTML document.
CSS Rule Cascade
Step 4:
Sort by order specified: if two rules have the same weight,
origin and specificity
the latter specified wins.
Rules in imported style sheets are considered to be before
any rules in the style sheet itself.
CSS Inheritance
Property values:
Specified: value contained in declaration
Absolute: value can be determined without reference to
context (e.g., 2cm)
Relative: value depends on context (e.g., larger)
character cell
(content area)
CSS Font Properties
A font is a mapping from code points to glyphs
glyphs do not necessary stay inside cells!
CSS Font Properties
generic
CSS Font Properties
generic
fonts are
system-
specific
CSS Font Properties
Computed value
of font-size
property
CSS Font Properties
Inheritance of line-height:
Specified value if normal or unit-less number
Computed value otherwise
CSS Font Properties
background-color
Specifies background color for content, padding,
and border areas
Margin area is always transparent
Not inherited; initial value transparent
background-image
Specifies (using url() function) image that will
be tiled over an element
The image found at the specified URL will
be tiled over the padding and content areas of
the element to which this property is applied
Tiling simply means that if an image is too
small to cover the element, either from left to
right or from top to bottom or both, then the
image is repeated as needed.
Backgrounds
<body style="background-image:url('CucumberFlowerPot.png')">
Normal Flow Layout
In normal flow processing, each displayed
element has a corresponding rectangular box
The browser generates a box corresponding to this
element, which is called the initial containing
block.
if the browser’s horizontal and vertical scrollbars
are not active,
then the box coincides with the browser’s client area,
and therefore has the same dimensions.
if either scrollbar is active,
then the outer edges of the initial containing block are
located at the edges of the underlying area over which
the browser can be scrolled.
It is as if the document is drawn on an
imaginary canvas.
The browser client area acts as a viewport
through which all or part of the canvas is
viewed.
The initial containing block’s height is
the total height of this canvas,
or the height of the browser’s client area if that is
greater than the canvas height.
normal flow processing
if one HTML element is part of the content
of a second HTML element,
then the box corresponding to the first element
will be contained within the content area of the
box for the second element.
Eg:
the body element is contained within the html
element,
the box corresponding to the body element is placed
within the initial containing block box
Boxes of child elements are contained in boxes
of parent
Sibling block elements are laid out one on top of
the other
Sibling inline elements are one after the other
Normal Flow Layout
(body)
(html)
Normal Flow Layout
Block
elements
only
Normal Flow Layout
html
body
div d1
div d2
div d3
div d4
Top edges of
block boxes are
in document order
Normal Flow Layout
Heights
based on
content
initial
value of
vertical-
align
Beyond Normal Flow
elements
Primary values are auto (initial value) or CSS length
Relative positioning
Specifying positive value for right property of
relatively positioned box moves it to left
<span style="background-color:red">
</span><span class="right">Red</span>
span
containing
text moves
left
Beyond Normal Flow
Relative positioning
Specifying negative value for left property
also moves box to left
<span style="background-color:red">
</span><span class="right">Red</span>
same
effect as
before
Beyond Normal Flow
Float positioning
Specify value for float property
Beyond Normal Flow
Float positioning
Specify value for float property
Absolute positioning
Specify location for corner of box relative to
positioned containing block
p elements are positioned (but don’t move!)
margin area
padding area
containing This second paragraph has a
block note.
Beyond Normal Flow
Absolute positioning
Specify location for edges of box relative to
positioned containing block
Beyond Normal Flow
Absolute positioning
10em padding top
edge
padding left
edge
Beyond Normal Flow
Absolute positioning
8em
Beyond Normal Flow
Second absolutely
positioned box
obscures first
CSS Position-Related Properties