Transcript Chapter 10 ppt slides

Ch 10
HTML and CSS Web Standards Solutions
A Web Standardistas’ Approach
A ONE-COLUMN CSS LAYOUT
CASCADE IN CASCADING STYLE SHEETS

What exactly is the cascade ?
 This
is how the browser resolves conflicts of which
CSS rule to apply when there is more than one CSS
rule applied to the same element.
CASCADE IN CASCADING STYLE SHEETS
Combined
“Virtual”
Style Sheet
Inline Style
– 1st
Internal
Style Sheet
– 2nd
Web_page.html
External
Style Sheet
3rd
Browser’s
Style Sheet
– 4th
CASCADE IN CASCADING STYLE SHEETS

The order of your CSS rules is important
MARGINS, BORDERS AND PADDING
The
BOX model
Source: http://www.w3.org/TR/CSS21/box.html
MARGINS, BORDERS AND PADDING
Applying
margins, borders and padding
MARGINS, BORDERS AND PADDING
Applying
margins, borders and padding
MARGINS, BORDERS AND PADDING
Using
CSS shorthand for margins, borders and
padding
MARGINS, BORDERS AND PADDING
Using
CSS shorthand for margins, borders and
padding
1 -top
Work
clockwise from top
-top
-right
-bottom
-left
Applies
4 -left
2 -right
3 -bottom
to margins, borders and padding
Summarized
as margin: 1, 2, 3, 4 sequence
DIVIDING UP YOUR DOCUMENT
Using
CSS shorthand for margins, borders and
padding
DIVIDING UP YOUR DOCUMENT
<div>
and <span> elements
Help to group information into logical clusters
Often referred to as Content Areas
Generic holders of information
No inherent meaning whereas <ul> has a definite meaning
Should
contain meaningful elements such as <p>, <h1>, etc
<div>
- block-level
<span> - inline
Controlled
id
by
(identification) and class (classification) attributes
<DIV>
<div
id=“content”>
unique – so can only apply to the one place
<div class=“entry”>
Can be applied uniformly across many
<div>
DEFINING RULES FOR IDS OR CLASSES
<div id=“content”>
<div class=“entry”>
#content
.entry
{
{
/* property : value pairs */
}
/* property : value pairs */
}
CHOOSING THE IDENTIFIERS FOR IDS AND
CLASSES

Choose the names for the identifiers carefully
 Have
meaning
 Use a-z/A-Z/0-9,-_
 Start with a letter and be careful as Header is
considered different from header by the browsers.
USING DIV ELEMENTS TO CREATE CSS LAYOUTS

Each div in a layout can be given a:
 width,
 height,
 colour
and
 position.
USING DIV ELEMENTS TO CREATE CSS LAYOUTS

A one-column CSS layout
USING DIV ELEMENTS TO CREATE CSS LAYOUTS
auto;
USING DIV ELEMENTS TO CREATE CSS LAYOUTS

Centering text
USING DIV ELEMENTS TO CREATE CSS LAYOUTS
A ONE-COLUMN CSS LAYOUT

Using Descendant or Contextual Selectors to
Minimise Markup
 Look
for any <p> within a <div> called footer
STYLING DETAILS WITH THE SPAN ELEMENT
<span
class=“entry”>
Can be applied uniformly across many
<span>
Can be located within a Block-level element
STYLING WITH CLASS ATTRIBUTES
<img src="images/king_kong.jpg" width="500" height="350" alt="The mighty King Kong, a
fearsome giant ape." title="King Kong contemplates scaling yet another tall building."
class="portrait" />
STYLING WITH CLASS ATTRIBUTES

Background images in CSS
 Body
 Other
elements can also have images in their
background
STYLING WITH CLASS ATTRIBUTES

Background images in CSS
body {
background:url(../images/darkblueGrad2.gif) repeat-x;
background-color:#01A9EA;
font-family: Verdana, Arial, Helvetica, sans-serif;
//font-size:0.7em;
font-size:62.5%;
text-align: center; /* this centers the container in IE 5* browsers.
The text is then set to the left aligned default in the #container
selector */
color: #666666;
}
 Other
elements can also have images
in their background