Wednesday, October 24, 2012

CSS Sheats


Chapter 8


Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. 
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

Multiple Styles Will Cascade into One

Styles can be specified:
  • inside an HTML element
  • inside the head section of an HTML page
  • in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order

What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1.    Browser default
2.    External style sheet
3.    Internal style sheet (in the head section)
4.    Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

CSS Sheats



Chapter 7

Three Ways to Insert CSS
There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

E-g:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

E-g:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

E-g:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

CSS Class Selector


Chapter 6

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:

Example :4

<!By using class selector >

<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

Output is:

Center-aligned heading

Center-aligned paragraph.

CSS Id


Chapter 5

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".



The id Selector

The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":

Example :3

<!By using ID >

<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Output is:

Hello World!
This paragraph is not affected by the style.


CSS Link




Chapter 4



Example :2

<html>
<head>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>This is a header 1</h1>
<hr>

<p>You can see that the style
sheet formats the text</p>

<p><a href="http://atoz4tutorials.blogspot.in/"
target="_blank">This is a link</a></p>

</body>
</html>

Output is:

This is a header 1

You can see that the style sheet formats the text


CSS Head



Chapter 3



Example :1

<head>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

Output is:

This header is 36 pt

This header is blue

This paragraph has a left margin of 50 pixels

CSS Syntax


Chapter 2


CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:




The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.

CSS Introducation


Chapter 1



CSS


What You Should Already Know
Before you continue you should have a basic understanding HTML.

What is What You Should Already Know
Before you continue you should have a basic understanding of the following:
  • HTML

What is CSS?
  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files


Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium created CSS.
In HTML , all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.


CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

HTML Colors

Chapter 18

Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.

The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette.



0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF



HTML Form Creation


Chapter 17


HTML Forms
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>



HTML Forms - The Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.



Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>


How the HTML code above looks in a browser:
First name: 
Last name:
 



Password Field

<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>


How the HTML code above looks in a browser:
Password: 


Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:


<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

How the HTML code above looks in a browser:
Male
Female


Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
 
</form>

How the HTML code above looks in a browser:
I have a bike
I have a car


Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:


<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>


How the HTML code above looks in a browser:
Username: 

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

HTML Layout


Chapter 16




HTML List Tags

Tag
Description
<ol>
Defines an ordered list
<ul>
Defines an unordered list
<li>
Defines a list item
<dl>
Defines a definition list
<dt>
Defines an item in a definition list
<dd>
Defines a description of an item in a definition list



HTML Layout - Using <div> Elements



Example :17


<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © AtoZ4tutorials</div>

</div>

</body>
</html>

Output is:

Content goes here

Saturday, October 20, 2012

HTML Nested list and Definition list


Chapter 15


Example 15:

<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea
      <ul>
      <li>China</li>
      <li>Africa</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>


Output is:

A nested List:

  • Coffee
  • Tea
    • Black tea
    • Green tea
      • China
      • Africa
  • Milk

HTML Definition Lists


A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):


Example :16


<html>
<body>

<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>


Output is:

A Definition List:

Coffee
- black hot drink
Milk
- white cold drink

HTML Unordered List


Chapter 14



An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).


The UnOrdered list Output like
  • Coffee
  • Milk
There are different types in UnOrdered list

  1. Disc Bullet list
  2. Circle Bullet list
  3. Square Bullet list
Example :14

<html>
<body>


<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

Output is :

Disc bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges

Circle bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges

Square bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges



HTML Order list


Chapter 13


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.


The Ordered list Output like
  1. Coffee
  2. Milk
There are different types in Ordered list

  1. Numbered list
  2. Letters list
  3. Lowercase letters
  4. Roman numbers
  5. Lowercase Roman  numbers

Example :13

<html>
<body>

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

Output is:

Numbered list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges


HTML Table Tag 4


Chapter 12


HTML Table cellpadding & cellspacing

For cellpadding 

Example 11:

<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Output is:

Without cellpadding:

FirstRow
SecondRow

With cellpadding:

FirstRow
SecondRow

For cellspacing

Example :12

<html>
<body>

<h4>Without cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" 
cellspacing="20">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

Output is:

Without cellspacing:

FirstRow
SecondRow

With cellspacing:

FirstRow
SecondRow