Thursday, May 15, 2014

CSS Background

CSS Tutorial Tutorials


CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • The background-color property is used to set the background color of an element.
  • The background-image property is used to set the background image of an element.
  • The background-repeat property is used to control the repetition of an image in the background.
  • The background-position property is used to control the position of an image in the background.
  • The background-attachment property is used to control the scrolling of an image in the background.
  • The background property is used as shorthand to specify a number of other background properties.
Background-color:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color:#999;
width:400px;
height:250px;
}
p{
text-align:center;
top:45%;
position:relative;
}
</style>
</head>
<body>
<div>
<p>Hello this is div background color</p>
</div>
</body>
</html>
Background-Image:

<!DOCTYPE html>
<html>
<head>
<style>
body { background-image:url('bg.png'); }
</style>
</head>
<body>
<h1>background Image</h1>
</body>
</html>
Background Image repeat Horizontally or Vertically:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If the image is repeated only horizontally (repeat-x), the background will look better:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If the image is repeated only vertically (repeat-y), the background will look better:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Background Image - Set position and no-repeat

Note: When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
The position of the image is specified by the background-position property:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>

Background - Shorthand property

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>
</html>
When using the shorthand property the order of the property values is:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Read More

How to include CSS

CSS Tutorial Tutorials

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
  1. Inline Style
  2. Internal Style Sheet
  3. External Style Sheet
  4. Import Style Sheet
External Style Sheet:
An external style sheet is ideal when the style is applied to many pages.
External style sheet include using <link> tag. The <link> tag goes inside the head section.

<head>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>
Your style sheet should be saved with a .css extension Example: style.css
Internal Style Sheet:
An style sheet should be used when a single document has a unique style. Internal style sheet using inside head section.
Example:
<head>
<style type=”text/css”>
.paragraph{ color:red: text-align:center; }
</style>
</head>
Inline CSS
Inline Style use the style attribute in the revelant tag.
Example:
<h1 style=”color:blue; font-size:20px”>Hello world!</h1>

Imported CSS - @import Rule:

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
<head>
<@import "URL";
</head>
Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:
<head>
<@import url("URL");
</head>

Example:

Following is the example showing you how to import a style sheet file into HTML document:
<head>
@import "mystyle.css";
</head>
Read More

CSS Class & Id Selector

CSS Tutorial Tutorials

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="heading":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#heading
{
color:red;
}
</style>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Do NOT start an ID name with a number!

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:
<!DOCTYPE html>
<html>
<head>
<style>
.heading
{
text-align:center;
color:#FF0000;
}
.para{
text-align:center;
color:#777;
}
</style>
</head>
<body>
<h1 class="heading">Center-aligned heading</h1>
<p class="para">Center-aligned paragraph.</p>
</body>
</html>
Do NOT start a class name with a number!

Other CSS Selectors:

The Universal Selectors:

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type :
* { 
  color: #000000; 
}
This rule renders the content of every element in our document in black.

The Descendant Selectors:

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {
color: #000000;
}
Read More

CSS Syntax

CSS Tutorial Tutorials


CSS Syntax:

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts:
  • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.
  • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.
  • Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:#FFC000;
text-align:center;
}
p{
color:#CCF;
text-align:center;
font-family:'arial';
font-size:'20px';
}
</style>
</head>
<body>
<h1>this is heading styled with CSS</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Read More

CSS Introduction

CSS Tutorial Tutorials


What You Should Already Know

Before you continue you should have a basic understanding of the following:
  • HTML / XHTML
If you want to study these subjects first, Here are the tutorial link Html Tutorial.

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS:

  • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
  • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.
  • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.
  • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
  • Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

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!
Read More

Tuesday, May 13, 2014

HTML Iframes

HTML-Tutorial Tutorials

An iframe is used to display a web page within a web page.
Sytax for adding an Iframe:
<iframe src=”url”></iframe>
Url using for display website or webpage in Iframe.
Iframe attributes:
Height and Width attribute:
Set height and Width of the iframe.
Example:
<iframe src=”google.com” height=”200” width=”400”></iframe>
Border attribute:
<iframe src=”google.com”  frameborder=”0”></iframe>
Target attribute:
The target attribute of a link must refer to the name attribute of the iframe.
<iframe src=”demo.html” name=”iframe_a”></iframe>
<a href=”http://google.com” target =”iframe_a”>google.com</a>

Read More

HTML Forms

HTML-Tutorial Tutorials

Forms are used to collect data input by a user. They can be used as an interface for a web application for example or to send data across the web.
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>
Input elements:
Text fields:
<form>
<input type=”text” name=”firstname” /> : First Name <br />
<input type=”” name==”lastname” />: Last Name
Note: the form itself is not visible. Also note that the default width of a text field is 20 characters.
Password field:
<form>
<input type=”password” name=”pwd” />: Password
Note: the characters in a password field are masked(shown as asterisks or circles).

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.

Read More

Copyright 2013 WebCodeMaster

designed by WebCodeMaster | WebCodeMaster Published..WebCodeMaster