h1 (HTML4 & HTML5)

HTML headings are defined with the <h1> to <h6> tags.

Table layout styled with CSS attributes and managed by HTML class attribute.

The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. The support for CSS3 depends on your browser and since CSS3 standard is still being drafted most browser also have support for a prefix on CSS3 properties. -moz- Mozila -webkit- Chrome/ Safari -o- Opera -ms- IE

Basic HTML tags that show how a web page can be created.

Extend the standard HTML element styles by CSS.

This example uses an Internal CSS Style Sheet to make the heading centred, along with the main text. It moves the example date to the right hand side.

jQuery selectors allows us to select HTML elements and manipute them as a group or as a single object. In jQuery it's common that selectors start with dollar sign and parentheses. Syntax:- $.(selector).methodName();

In this example, four thumbnails are floating below heading. Try to resize the browser window to see how the float to the right.

Grouping is the method to group the selectors which have same property. It minimizes the code. We write the selectors by separating them using comma.

This example sets the main background to blue, and the background of heading 1 to green. This is set using an internal Style Sheet.

HTML elements with no content are called empty elements. <br/> is an empty element without a closing tag (the <br/> tag defines a line break). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

This example uses an internal CSS Style Sheet sets the body text to blue, and changes H1 to green (#9AFE2E) and H2 to red (#FF0000).

Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.

CSS syntax is as selector{property:value;}. Here selector is the element on which we want to apply the CSS. Property may be height , width ,color etc. The value may be in percent , numbers or letters.

A basic web page with some text, paragraph, bold text and line breaks.

CSS class selector is defined using "."(dot) for example ".class1". The class selector can be used more than one in same document. The ID selector is defined using "#" (hash), for example "#id1". The id selector can only be used once in same document.

This example uses a basic internal CSS Style Sheet sets the page background to green (#9AFE2E), and then we add CSS attributes for <h1> and <p> tags.

Styling HTML elements with font-family, color, and font-size properties defines the font, color, and size of the text in an element.

CSS display block property displays the HTML elements in the block.

CSS stands for Cascading Stylesheet. This add new look to the basic HTML and manages the HTML according to our needs.

CSS pseudo-classes are used to add special effects to some selectors.

This example uses "z-index:100" to place an image above the text. Try to change z-index to -1 and see the image fall behind the text.

This will make a red dashed border around all HTML primary headers (H1)

Use CSS to set the font of a text

This example shows you three lines of text, two controlled by a class. Each class has a different font applied. The fonts are applied using an internal Style Sheet. The "Example Fonts" is using a simple <h1> tag.

Every website is built inside directories on a Web server. And each Web page is a separate file on that Web server. But sometimes, when you go to a URL, there is no file listed in the URL. For example: http://www.webgrid.com But there is still a file that the Web server needs to serve in order for that URL to display anything other than an error page. This file is the default page for that directory. On most Web servers, the default page in a directory is named "index.html".

To have the effect for bottom text we have created a master container where the position to all child elements position is relative to the master container. And we used a child container with a absolute position to bottom and left for the master container.

Using nesting of selectors we can specify the properties to selectors within selectors.

CSS display property specifies how an element is displayed. The 'none' property hides the elements.

Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

CSS position property allows us to set an absolute position to an element (relative to it's environment). We can set the position of an element using the top, right, bottom, and left properties.

The text shadow is used with the text of the page.