News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 04 – Grouping

August 26th, 2009

To keep style sheets short and easy to edit similar rules can be grouped together. This gives several ways of specifying a set of related rules. For example, coloring the text red and the background black for two header elements can be done in basically four different ways.

Ungrouped rules

First, each rule can be written separately.

h1 { color:      #FF0000; }
h1 { background: #000000; }
h2 { color:      #FF0000; }
h2 { background: #000000; }

Grouped selectors

Second, the selectors can be grouped together by separating them with a comma. This kind of grouping will make a style apply to multiple selectors.

h1, h2 { color:      #FF0000; }
h1, h2 { background: #000000; }

Grouped declarations

Third, the declarations can be grouped together by separated them with a semicolon. All styles within the declaration block will be applied to the selector. The last semicolon is not necessary, but it’s a good practice to include it.

h1 { color:      #FF0000; 
     background: #000000; }
h2 { color:      #FF0000; 
     background: #000000; }

Grouped selectors and declarations

Fourth, both the selectors and declarations can be combined, resulting in a single rule.

h1, h2 { color:      #FF0000; 
         background: #000000; }

CSS Tutorial – 03 – Using CSS

August 26th, 2009

There are three way to insert CSS into an HTML document – either using an internal style sheet, inline styles, or an external style sheet.

Internal style sheet

An internal style sheet is useful when a single document needs to have a unique style. The style sheet is then embedded in the head of the document using the <style> header element. This element is a container for style sheet rules and should have its type attribute set to “text/css”.

<style type="text/css">
  p { color:#FF0000; }
</style>

Inline style

When styling needs to be assigned to an individual element the style attribute can be used to set an inline style. This is a generic attribute that can be included in all HTML tags. Its value is the CSS declarations that will be applied to the element. There is no need to specify a selector since the declarations implicitly belong to the current element. This approach should be used sparingly, since it mixes the style with the content.

<p style="color:#00FF00;">Example</p>

External style sheet

The most common way of including CSS is through an external style sheet. The style sheet rules are placed in a separate text file with a .css file extension. This style sheet is then referenced using the <link> header element. The rel (relationship) attribute must be set to “stylesheet” and the meta type attribute to “text/css”. The location of the style sheet is specified with the href attribute.

<link rel="stylesheet" type="text/css" href="MyStyle.css">

Alternatively, an external style sheet can be included using the CSS @import function from inside of the <style> element. This function must be placed before any other rules for it to work.

<style type="text/css">
 @import url(MyStyle.css);
</style>

Using external style sheets is often preferred since it completely separates CSS from the HTML document. This makes it possible to quickly create a consistent look for an entire website and to change its appearance just by editing a single CSS document.

Comments

Comments in CSS are created using the C-style notation (/* */). They are ignored by browsers and may span multiple lines.

/* Multi-line comment */

CSS Tutorial – 02 – Rule Structure

August 26th, 2009

Every style sheet is made up of a list of rules. For example, a rule to color all paragraph elements red looks like this:

p { color: red; }

This rule has two parts: a selector (p) and a declaration block, consisting of one or more declarations enclosed in curly braces. The selector declares which elements the style will be applied to. In this case to all paragraph elements. Following the selector comes the declarations, each of which is made up of a style property followed by a colon and a valid value for that property. Each declaration is terminated with a semicolon, although this is optional for the last one.

p { color: red; background: black }

CSS Tutorial – 01 – Introduction

August 26th, 2009

CSS stands for Cascading Style Sheets and is a stylistic language used to define how web documents are presented. It complements HTML and gives much more control over the style of web pages. Furthermore, CSS makes it possible to separate a web site’s style from its content, making the site considerably easier to edit and maintain.

JavaScript Tutorial – 07 – Loops

August 26th, 2009

The loop statements are used to execute a specific code block several times. In JavaScript, there are four kinds of loops: while, do-while, for, and for-in. As with the conditional if statement the curly brackets can be omitted if there is only one statement in the code block.

While loop

The while loop runs through the code block only if the condition is true and will continue looping for as long as the condition remains true.

var i = 0;
while (i < 10) { document.write(i++); }

Do-while loop

The do-while loop works the same as the while loop, except that it checks the condition after the code block and will therefore always execute at least once.

var j = 0;
do { document.write(j++); } while (j < 10);

For loop

The for loop is used to go through a code block a specific number of times. It takes three parameters. The first parameter is executed once before the loop starts and is commonly a counter declaration. The second parameter holds the condition for the loop and is checked before each iteration of the code block. The third parameter commonly contains an increment for the counter and is executed at the end of each iteration after the code block.

for (var k = 0; k < 10; k++) { document.write(k); }

In the for loop, either one of the parameters can be left out.

for (;;) { document.write("infinite loop"); }

For-in loop

The for-in statement gives an easy way of iterating through elements in an array or through properties in an object. On each iteration the key or index of the next property is assigned to the variable and the loop continues to iterate until it has gone through all members of the object.

var a = ["one","two","three"];
for (var p in a) { document.write(a[p]); }

Break and Continue

There are two special statements that can be used inside of loops. The break keyword ends the current loop and continue skips the rest of the current loop and continues at the beginning of the next iteration.

break;    // end loop
continue; // start next iteration

JavaScript Tutorial – 08 – Functions

August 26th, 2009

A function is a reusable code block that will execute only when it’s called. They are normally placed in the head section of the document, because this assures that the browser loads them before they’re used.

Defining functions

To create a function the function keyword is used followed by a name, an optional parameter list, and a code block.

function myFunc() 
{ 
  document.write("Hello World"); 
}

Calling functions

Calling the function is done by using the function’s name followed by a set of parenthesis in the body section of the document.

myFunc();

Parameters

The parenthesis can be used to pass parameters to the function in the form of a comma separated list.

function myFunc(x,y) 
{ 
  document.write(x + y); 
}    
myFunc("Hello", " World");

JavaScript will not complain if too few parameters are sent. The unspecified parameters will simply become undefined. Same thing if too many parameters are passed, there will be no errors. JavaScript even provides a way to access such parameters using the arguments array. This array is a built-in part of the function object and contains all arguments passed to the function.

function myFunc() 
{ 
  for (var i = 0; i < arguments.length; i++) 	 
    document.write(arguments[i]);
}

Return statement

The return keyword causes a function to exit.

function myFunc(x,y) 
{ 
  return; // exit function
}

It can optionally be given a value to return and will then make calls to that function evaluate to that value.

function myFunc(x,y) 
{ 
  return x + y; // exit function and return value
}  
document.write(myFunc("Hello", " World");

Anonymous functions

There is a second notation for creating functions, the so called anonymous function. An anonymous function is declared using the Function constructor. Each parameter in the constructor is included as a string value separated by commas and the last parameter string consists of the function statements.

var myFunc = new Function("x","y", "document.write(x+y);");
  1. 1
  2. ...
  3. 29
  4. 30
  5. 31
  6. 32
  7. 33
  8. ...
  9. 37
Ads