Wednesday, February 28, 2007

Descendant Selectors

A way of specifying a selector like "select an >h2< element, but only if it's inside an elixirs >div<.

XHTML:
<div id="elixirs">
<h2>Weekly Elixir Specials</h2>

<p>
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
</p>

<h3>Lemon Breeze</h3>

<p>
The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day and all night.
</p>

</div>


CSS:
#elixirs h2 {color: black;}

#elixirs h3 {color: red; }

What is the difference between CLASS and ID?

An id is a unique selector. You can only use a particular value for and id once on a page.

You can use the same value for a class as many times as you would like.

You can also use them together.

p.body {
font: 14px/120% arial, sans-serif;
margin: 4px auto;
color: #000;
text-indent: 6px;
}

#first-para {
font-weight: bold;
}

and then:

<p class="body" id="first-para">

You can set most all of your properties for all of your body paragraphs within p.body and just the properties that are different for the first paragraph have to be defined within #first-para.

Sunday, February 18, 2007

Chapter 4: Getting Connected

Using the <a&glt; element to create a destination


Use <a id="chai">Chai Tea $1.85</a> to set a "destination anchor" on the spot of the page you want to land on.

Use <a href="index.html#chai">Read about the buzz</a> as the link to the destination anchor


If you're using a URL, than <a href="http://buzz.headfirstlabs.com#chai">Read about the buzz<'/a>.


Link To A New Window Using "Target"


Target is an attribute tha can be used with the <a> element.

For example, <a target="_blank" href="http://buzz.headfirstlabs.com#Coffee">Buzz</a>

Wednesday, February 14, 2007

Chapter 2: Going Further with Hypertext

..

When you need to tell the browser that the file you're linking to is in the parent folder, you use the ".." to mean "move UP to the parent folder." In other words, it's browser-speak for parent.


Block Elements (i.e. <blockquote>) are always displayed as if they have a linebreak before and after them, while Inline Elements (i.e. <q>) appear "in line" within the flow of test in your page.

br adds breaks after a string of text. It also reduces the line space between lines.

The <pre> tag is for formatted text when you want the browser to show it exactly as you typed it.

Example:

And now that you've gone
and come again
what shall
I
do?