Thursday, September 24, 2009

Basic CSS (Cont.)

Class Selectors
 Let's see HTML here:

<h1 class="warning">Be careful!</h1>
<p class="warning">Every 108 minutes, the button must be pushed. Do not attempt to use the computer for anything other than pushing the button.</p>


Here, we’ve specified a class of warning to both the h1 element and the p (paragraph) element. This gives us a hook on which we can hang styles that is independent of the element type. In CSS, class selectors are indicated by a class name preceded by a period (.); for example:

.warning {
  color: red;
  font-weight: bold;
}

This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that have the class name warning. In our markup, both the h1 and the p elements would become red and bold. We can join an element selector with a class selector like this:

   p.warning {
     color: red;
     font-weight: bold;
   }


This rule will assign the red color and bold weight only to paragraph elements that have been assigned the class warning. It will not apply to other type elements, even if they have the warning class assigned. So, the h1 in our previous markup would be ignored by this style rule, and it would not become red and bold. You can use these rules in combination to save yourself some typing. Take a look at this block of CSS code. We’ve got two style rules, and each has several of the same declarations:

   p.warning {
     color: red;
     font-weight: bold
     font-size: 11px;
     font-family: Arial;
   }
   h1.warning {
     color: red;
     font-weight: bold
     font-size: 24px;
     font-family: Arial;
   }
   A more efficient way to write this is
   .warning {
     color: red;
     font-weight: bold
     font-size: 11px;
     font-family: Arial;
   }
   h1.warning {
     font-size: 24px;
   }


A more efficient way to write this is

.warning {
  color: red;
  font-weight: bold
  font-size: 11px;
  font-family: Arial;
}
h1.warning {
  font-size: 24px;
}


Class selectors can also be chained together to target elements that have multiple class names. For example:

<h1 class="warning">Be careful!</h1>
<p class="warning help">Every 108 minutes, the button must be pushed. Do not attempt to use the computer for anything other than pushing the button.</p>
<p class="help">The code is 4-8-15-16-23-42.</p>


    A .warning selector will target both the h1 and first p elements, since both have the class value warning. A .help selector will target both p elements (both have a class value of help). A chained selector such as .warning.help will select only the first paragraph, since it is the only element that has both classes (warning and help) assigned to it.

Thursday, September 10, 2009

Embedding Youtube Videos as Valid XHTML

One error caused by <embed> tag for youtube video offers me a headache when I tried to validate my html page. Then I found that this tag is not identified as HTML standard tag at all since it is created by Netscape. So, I looked all around the sites and came across an article mentioning about how to make embed youtube video as a valid XHTML. Here is an example:

Format with embed tag
<object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U"></param>
   <embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="425" height="350">
  </embed>
</object> 

Another format as a valid XHTML
<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/7_6B6vwE83U">
   <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" />
</object> 
Hope this is useful for those who care about XHTML validation.

Wednesday, September 9, 2009

Fixing Validation Error with Script inside document

When I validated my html page, I came across with an error with script inside my document (some events such as onclick or onmouseover etc.). According to the standards, it is not allowed to write any JavaScript event in your document unless you declare meta tag in the head section of the page. Please look at example below and focus on bold meta tag.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

Tuesday, September 8, 2009

Basic CSS

 Declarations
  • Declarations are property/value pairs that define visual styles.
  • Properties are things like background color, width, and font family. Values are their counterparts, such as white, 400 pixels, and Arial—or, in the proper syntax:
  • Example:
              background-color: white;
              width: 400px;
              font-family: Arial;


Selectors
Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified. Several types of selectors are available in CSS, but some of them are not suppoted by all browsers.

Element Selectors
The most basic of all selectors is the element selector (you may have heard them called tag selectors). It is simply the name of an (X)HTML element, and—not surprisingly—it selects all of those elements in the document. Let’s look again at the previous example:

h1 {
   color: blue;
}
h2 {
   color: green;
}


We’ve used h1 and h2 as selectors. These are element selectors that select h1 and h2 elements within the (X)HTML document, respectively. Each rule indicates that the declarations in the declaration block should be applied to the selected element. So, in the previous example, all h1 elements in the page would be blue and all h2 elements would be green. Simple enough, right?

Note: To be continued....