Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

Ch 10HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach

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.

Web_page.html

The order of your CSS rules is important

The BOX model

Source: http://www.w3.org/TR/CSS21/box.html

Applying margins, borders and padding

Applying margins, borders and padding

Using CSS shorthand for margins, borders and padding

Using CSS shorthand for margins, borders and padding

Work clockwise from top-top-right-bottom-left

Applies to margins, borders and padding

Summarized as margin: 1, 2, 3, 4 sequence

1 -top

2 -right

3 -bottom

4 -left

Using CSS shorthand for margins, borders and padding

<div> and <span> elementsHelp to group information into logical clusters

Often referred to as Content AreasGeneric holders of informationNo inherent meaning whereas <ul> has a definite meaning

Should contain meaningful elements such as <p>, <h1>, etc

<div> - block-level<span> - inline

Controlled byid (identification) and class (classification) attributes

<div id=“content”>unique – so can only apply to

the one place<div class=“entry”>

Can be applied uniformly across many <div>

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.

Each div in a layout can be given a: width, height, colour and position.

A one-column CSS layout

auto;

Centering text

Using Descendant or Contextual Selectors to Minimise Markup

Look for any <p> within a <div> called footer

<span class=“entry”>Can be applied uniformly across many <span>Can be located within a Block-level element

<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" />

Background images in CSS Body

Other elements can also have images in their background

Background images in CSSbody {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 #containerselector */color: #666666;}

Other elements can also have imagesin their background