GREAT HTML TABLES - FOR BLOGGER, WORDPRESS, JOOMLA, PROJECTS.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 1: Simple Table

Demo:

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100	200	300
400	500	600

CODE: Get its code

Table 2: Tables Without Borders

Demo:

This table has no borders:

100	200	300
400	500	600

And this table has no borders:

100	200	300
400	500	600

CODE: Get its code

Table 3: Table Header

Demo:

Table headers:

Name	Telephone	Telephone
Bill Gates	555 77 854	555 77 855

Vertical headers:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 4: Table with a Caption

Demo:

Monthly savings
Month	Savings
January	$100
February	$50

CODE: Get its code

Table 5: Table cells than span more than one row/column

Demo:

Cell that spans two columns:

Telephone

Name

Bill Gates
555 77 854
555 77 855

Cell that spans two rows:

Telephone:

First Name:	Bill Gates

555 77 854
555 77 855

CODE: Get its code

Table 6: Tags inside a table

Demo:

This is a paragraph
This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

HELLO

CODE: Get its code

Table 7: Cell padding (controls white space between text and borders)

Demo:

Without cell padding:

First	Row
Second	Row

With cell padding:

First	Row
Second	Row

CODE: Get its code

Table 8: Cell spacing (controls space between cells)

Demo:

Without cellspacing:

First	Row
Second	Row

With cellspacing="0":

First	Row
Second	Row

With cellspacing="10":

First	Row
Second	Row

CODE: Get its code

CSS: CSS List - Learn CSS for Free and Fun ......

CSS List

With the help of CSS list properties; you can set an image as the list-item marker and place the list-item marker.

With CSS you can prepare your list item

You can add properties like

 image

 style

Tag:ol {list-style-type: decimal;}

The CSS list property allocates you to set an image as the list-item marker and place the list-item marker. You can easily add properties like image and style.

Example:

<html>

<head>

<style type="text/css">

ul.disc {list-style-type: disc;}

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}

ul.none {list-style-type: none;}

</style>

</head>

<body>

<ul class="disc">

<li>Sun</li>

<li>Moon</li>

<li>Stars</li>

</ul>

<ul class="circle">

<li>Sun</li>

<li>Moon</li>

<li>Stars</li>

</ul>

<ul class="square">

<li>Sun</li>

<li>Moon</li>

<li>Stars</li>

</ul>

<ul class="none">

<li>Sun</li>

<li>Moon</li>

<li>Stars</li>

</ul>

</body>

</html>

CSS: CSS Outline - Learn CSS for Free and Fun

With CSS we can draw a line bounding your element. We can add properties like

 color
 style
 width

Remember this option does not work with internet explorer.

Tag: outline: green dotted thick;

The CSS outline is used to make an element “stand out’. It is a line that is drawn around the
outside the border edge. Additional properties like color, style and width can be added.

Example:

<html>
<head>
<style type="text/css">
p {
border: red solid thin;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>

CSS: CSS Padding - Learn CSS for Free and Fun .......

With CSS we can define the space between the element border and the element content. Padding can be applied at

 top of the page
 left of the page
 bottom of the page
 right of the page

Tags:

padding-top: 2cm;
padding-left: 3cm;
padding-bottom: 4cm;
padding-right: 5cm;
padding: 2cm 3cm 4cm 5cm;

The CSS padding identifies the space between the element border and the element content.
CSS padding can be applied to the top, bottom, left and right of the web page.

Example:

<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm;}
td.test2 {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm
and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>

Demo:

This is a tablecell with equal padding on each side.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.

CSS; CSS Margin - Learn CSS for Free and Fun ......

With CSS we can set Margins at the

 top of the page
 bottom of the page
 right of the page
 left of the page

Tags:

margin-top: 5cm;
margin-right: 6cm;
margin-bottom: 7cm;
margin-left: 8cm;
margin: 5cm 6cm 7cm 8cm;

A margin is a space around an object. We can set margin in web pages using CSS. Using
separate properties within margin syntax we can define space all around the element.

Example:

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>

CSS: CSS Border - Learn CSS for Free and Fun

What we can do with CSS Border?

 We can set the color of the border
 We can set the style of the border
 We can set the width of the border

The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.

The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>

The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are

<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>

The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>

CSS: CSS Font - Learn CSS for Free and Fun

What we can do with CSS Font?

 We can set the font of a text
 We can set a paragraph font using the "caption" value
 We can set the size of the font
 We can set the style of the font
 We can set the variant of the font
 We can set the boldness of the font

How CSS Font is used?

Syntax: tag1 {font: < font style> || < font-variant> || < font size> || < font-family>;}

Example: font: italic small-caps 12px Arial;

The CSS font is used to set the font of the text, and the paragraph font can be set by using the
“caption” value. It helps to set the style, variant and size of the font. The boldness of the font
can be set by CSS font. The font in the webpage varies in color, style, size and others using
CSS.

The CSS can set the font of a text by adding the syntax

<style type="text/css">
h3 {font-family: times;}
p {font-family: courier;}
p.sans-serif {font-family: sans-serif;}
</style>

To set the paragraph font by using the “caption” value, the following syntax is used

<html>
<body>
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
</body>
</html>

The size and style of the font is set by the help of the following syntaxes respectively

<style type="text/css">
h1 {font-size: 150%;}
h2 {font-size: 130%;}
p {font-size: 100%;}
</style>

and

<style type="text/css">
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
</style>

To set the variant of the font, the syntax used is

<style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>

CSS font can also set the boldness of the font, the syntax used is

<style type="text/css">
p.normal {font-weight: normal;}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}
</style>

CSS: CSS Text - Learn CSS for Free and Fun

What we can do with CSS Text?

 We can set the color of the text
 We can set the background-color of the text
 We can specify the space between characters
 We can specify the space between lines
 We can align the text
 We can add attributes to the text
 We can indent text
 We can control the letters in a text
 We can increase the white space between words
 We can disable text wrapping inside an element

How CSS Text is used?

Syntax: tag1 { color: color1;}

Example: p {color: red;}

The CSS text decorates the text of the website and sets the background color. Besides this the
CSS text also sets the space between the characters and between lines. It further incorporates
indent text, aligns the text, controls the letters in the text and increases the white space
between the words. The CSS text adds attributes to the text, changes its direction wherever
necessary and disables text wrapping inside an element.

The CSS text changes the webpage in terms of color and alignment with the following syntaxes
respectively:

<style type="text/css">
h1 {color: #00ff00;}
h2 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>

and

<style type="text/css">
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
</style>

To change the background-color of the text, the syntax used is

<style type="text/css">
span.highlight {
background-color:yellow;
}
</style>

The text specifies the space between characters and lines, through these syntaxes respectively

<style type="text/css">
h1 {letter-spacing: -3px;}
h4 {letter-spacing: 0.5cm;}
</style>

and

<style type="text/css">
p.small {line-height: 90%;}
p.big {line-height: 200%;}
</style>

It adds to the indent text by adding the syntax

<style type="text/css">
p {text-indent: 1cm;}
</style>

It controls the letter in a text by the syntax

<style type="text/css">
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>

The CSS text also increases the white space between words and disables text wrapping inside
an element by adding the following syntax respectively

<style type="text/css">
p {
word-spacing: 30px;
}
</style>
and
<style type="text/css">
p {
white-space: nowrap;
}
</style>

CSS: Group Selectors - Learn CSS for free and fun ........

Group Selectors

What are Group Selectors?
 By using Group Selectors we can assign styling for a group of text at a time
 Group selectors contain a common set of property & values, which can be combined/grouped logically for easier coding.

How Group Selectors are used?

tag1,tag2 {Property:Value;}

tag1 {Property:changed value;}

tag2 {Property:changed value;}

Example
b,p {font-family:Arial, Helvetica, sans-serif; color:black; background:yellow;}
b {font-size:14px;}
p {font-size:10px;}

group selectors are used to define the common styles at once.
.headlines, .sublines, .infotext

{
font-family:Arial, Helvetica, sans-serif; color:red; background:blue;
}
.headlines {font-size:14px;}
.sublines {font-size:12px;}
.infotext {font-size: 10px;}

With group selectors the typing time becomes less and editing becomes easy.

CSS: CSS Background - Learn CSS for Free and Fun

What we can do with CSS Background?

 We can set the background color
 We can set image as the background
 We can repeat a background image only vertically, only horizontally or display a background image only one time
 We can place the background image
 We can position a background image using % or pixels
 We can set a fixed background image

How CSS background is used?

Syntax: tag1 {background-color: color1;}

Example: body {background-color:cyan;}

CSS background enables to set the background color or the image. The image can be set as the
background of the webpage which can be repeated in vertical, horizontal form or in neither
direction. The CSS background is formulated in such a way that the background image can be
changed. Apart from this, the position of the background image can be changed by using % or
pixels or can be fixed. The CSS background helps to change the webpage on the basis of color,
gradient, image and other properties.

The webpage can be made more attractive by adding a color in the background. To change the
color of the background into cyan, the syntax added is body {background-color: cyan;}. Thus
the syntax remains same in case of any color only the shade of the color is to be replaced. The
syntax used is

<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: transparent;}
p {background-color: rgb(250,0,255);}
</style>

Similarly by adding image, the background can be made more attractive by using the syntax

p {
background-image: url(image1.jpg);}.
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
}
</style>

To repeat the background image the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat;
}
</style>

For the vertical repetition, the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-y;
}
</style>

For horizontal repetition the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-x;
}
</style>

To display the background image only once, the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To place the background image the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To change the position of the background image using %, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>

To change the position of the background image using pixel, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>

To set a fixed background image the syntax used is

<style type="text/css">
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>

CSS: Context Dependents - Learn CSS for Free and Fun

What are Context Dependents?

 By using Group Selectors we can assign styling to make selectors that will only work in
certain contexts.
 We can use context dependent and grouped selectors simultaneously.

How Context Dependents are used?

i b { color:red;}

This means the font color of those texts will be red which are bold and written in italics.
You may require to change a property of text depending on its other property. Let us suppose
we have two sentences, one written in bold and the other written in both italics and bold. You
want to change the color of the sentence written in both bold and italics and not for the
sentence written in bold. You can make this happen by context dependents.

Let us consider the example

i b { color:red;}

This means only the texts which are both bold and written in italics will appear in red.

It is possible to make selectors that will only work in certain contexts.
For example, you can define a style for the <b> tag that is only triggered if the text is not only
bold but also written in italics.

For example, the style should be in effect here:

<i><b>example</b></i>
but not here :
<b>example</b>.

CSS: Class Selectors - learn CSS for free and fun

Class Selectors

Class selectors are used for defining different styles for the same type of HTML element.

If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), you can do it with the class
selector.

The general syntax for a class selector is
tag.class attribute {Property:Value;}

Example: Consider the instructional website as given above. If you want to define two
different font colors for the alternate paragraphs, the style sheet will be written as:

p.question {color: #CC0000;}
p.answer {color: #339999;}

Class selectors apply to all the elements with the particular class attribute given in the
statement. With class selectors you can also add more than one class to a particular element.
Sometimes you will need to add different styles to a type of HTML element that appears in a
web page. With class selectors we can do it easily.

Class selectors are used for defining different styles for the same type of HTML element.
If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), we can do it with the class
selector.

In an instructional website you may have paragraphs displayed in a webpage, with “Definitions”
and “Examples” in alternate paragraphs. With class selectors we have two different styles for
the alternate paragraphs.

Let us consider the example of the instructional website as given above. If we want to define
two different font colors for the alternate paragraphs, the style sheet will be written as shown
here.

Class selectors apply to all the elements with the particular class attribute given in the
statement.
The following things must be noted about class selectors.
The class attribute for which the style is defined in the style sheet must be included in the
HTML document.

If the tag name is not given in the selector, the style will be applied to all the HTML elements
with the particular class.

For example, the following style will apply to all the HTML elements with the “text” attribute.
If you need to add more than one style to an element, we can still do it with class selectors.
With class selectors you can also add more than one class to a particular element.

CSS: ID Selector - Learn CSS for Free and Fun

ID Selectors

ID selectors are also used to define styles for an object with a unique ID. It is mostly used with
layers as layers are always defined by a unique ID. An ID selector is defined as a #. The general
syntax for an ID selector is #IDSelector{Property:Value;}. ID selectors apply to exactly one
element.

There are TWO types of ID selectors:

Solitary ID selectors

It can apply to any element with an ID matching the ID of the selector. Any element with #idname syntax will have Solitary ID selectors applied over it.

The following ID selector will apply to an element that has an id attribute with a value of "red":

#red {color: red;}

ID selectors

This ID selector is associated with a particular type of element in a page. This ID selector will have the syntax elementname# idname and will apply only to the
element with this ID.

The following ID selector will apply to a p element that has an id attribute with a value of “para1":

p#para1{
text-align: left;
color: blue;
}

ID selectors are also used for defining styles for HTML elements. These selectors are used to
define a style for an object with a unique ID. The ID selector is mostly used with layers as
layers are always defined by a unique ID.

An ID selector is defined as a # and the general syntax for an ID selector is shown here.
Hash followed by the ID selector and then the property and its value within braces. ID selectors
apply to exactly one element.

There are TWO types of ID selectors: Solitary ID selectors and ID selectors.

Solitary ID selector is a general ID selector that can apply to any element with an ID matching
the ID of the selector. Any element with #idname syntax will have Solitary ID selectors applied
over it.

The solitary ID selector in our example will apply to an element that has an id attribute with a
value of "red":

ID selector is associated with a particular type of element in a page. This ID selector will have
the syntax element-name#idname and will apply only to the element with this ID. It must be
noted here that an ID comprises only alpha numeric characters and hyphens and does not
include any other characters, underscores or spaces, nor can an ID start with a numeral.
The example shows the ID selector that will apply to a p element that has an id attribute with
a value of "para1":

CSS: Tag Selector - Learn CSS for Free and Fun ..........

What are Tag Selectors

 By using Tag Selectors we can define styling for existing HTML tags
 Often used to set the basic styles that will appear throughout a Web site

How Tag Selectors are used

HTML Selector {Property:Value;}
Eg : b {font-family:Arial, Helvetica, sans-serif; font-size:14px; color: red;}

This means Arial font of size 14 and red in color is stored within the tag b.
CSS with HTML tag selector, example:

body {
font-family: Arial;
font-size: 14px;
color: red;
text-align: left;
}

The meaning of the CSS code above is: every text inside the body tag will be appeared in Arial
font face with size 14 px, red color and left alignment. As the tag selector is defined within the
body tag only the text appearing in the body will change. However the paragraph text, header
text and others will remain unaffected.

CSS: Advantages and Disadvantages - Learn CSS for Free and Fun

Advantages of CSS

Using CSS we can keep the content of an html file and the style and layout of the file separate
from each other. This gives several advantages to CSS over the traditional HTML.

 CSS keeps the file size smaller

Unlike HTML where we need to write the code to specify the font size, color, style etc. for
every single page of a document that consists of more than one page, In CSS we need to
specify the attributes only once for each element and the specified style will automatically
be applied whenever the element occurs. Since the style and layout elements are
separated from the HTML this allows the document to be much smaller in size.

 The pages of the website loads faster

Since the HTML pages have less code after the style and layout is separated from it, the
pages will take less time to load.

 Lower bandwidth requirement

When the pages of a website take lesser time to load, the bandwidth requirement of the
server is also reduced. This also makes CSS a cost effective option.

 CSS saves time

With CSS, changing the style of a document becomes very easy and it also saves much time.
In HTML if we want to make even a small change in the entire website (such as changing
the font style), we need to open every single page and alter the font style manually, which
makes the process to time consuming. However, with We just need to open the CSS file
where the layout of the site is stored and change the font style, which in turn, will change
the font style of the entire website.

 CSS is easier to manage

As to make a change throughout a website that uses CSS, one need to make an edit only in
a single file, it is easier to manage CSS. This greatly helps when the website has several
pages.

Disadvantage of CSS

One major disadvantage of CSS is its incompatibility to different browsers. While some
browsers show partial compatibility to Style Sheets and support only some of the features
of style sheets, very few browsers such as the early versions of Internet Explorer and
Netscape show almost complete incompatibility to CSS.
However, the latest browsers versions show more standards-compliant and have largely
overcome the compatibility problem.

CSS: How to insert three types of Style Sheets - learn CSS for Free and Fun .......

There are THREE ways in which style sheets can be inserted to an HTML document.

Inline Styles within a single HTML element

When a style is intended for a single place or item on the entire website, a single tag CSS is
used. As the term suggests, a single tag CSS affects only a single tag in a HTML document
for which it is defined. Inline styles are used for this purpose. In inline style the style
attribute must be used in the relevant tag that renders the style. The style attribute may
have any CSS property.

The following example shows how a change in the color and the right margin of a paragraph
is brought which is different from the rest of the page.

<p style="color: teal; margin-right: 40px";>
This paragraph has different style
</p>

Internal Style Sheet inside the <head> element of an HTML page

When a style is intended to appear at several places on a single web page, a CSS style is
used which is defined once for the entire page. Internal style sheets (or embedded style
sheets) are used for this purpose. Internal style sheets are also called embedded style
sheets.

The following example shows how an internal style sheet is inserted.

<head>
<style type="text/css">
<!--body {font-family: verdana, Helvetica, sans-serif; color: blue;}--!>
</style>
</head>

Linking an External Style Sheet

The third and the most powerful method of inserting a style sheet is to link the HTMl
document to an external style sheet. When a style is intended to appear at more than one
page in the website, a CSS style is used which is described in an external CSS file. External
style sheets (or linked style sheets) are used for this purpose. External style sheets are also
called linked style sheets.

Inserting an external style sheet provides complete ease to the designer and also save lot
of time whereby the designer can change the look of several pages, or of the entire
website by making the necessary change in only one file. The external style sheet is linked
to each of the pages with the <link> tag which goes inside the head section.

The following example shows how an external file is linked to a document:

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

The browser will read the style definitions as given in file abcd.css and display the page
accordingly.

An external style sheet can be written in any text editor and saved with .css extension.
There should not be any HTML tags in the file.

Following is an example of a style sheet file:

body {background-color: pink;}
h1 {font-size: 30pt;}
h2 {color: black;}
p {margin-left: 20px;}

The Hierarchy

There are three types of Cascading Style Sheets

 Inline
 Embedded and
 Linked/(or) External
The above 3 styles follow a hierarchy

The “cascading” refers to the hierarchy of control

 Inline style takes preference
 Then Embedded styles rules follow
 The Linked external style sheet instructions will be used if Inline or Embedded
instructions are not present

Whenever any conflict arises as to which style rule should be used first, a style rule with higher
preference will get preference.

The following chart explains this principle. The chart is only a brief reference to resolve style
conflicts.

If multiple style rules are in conflict for a given selector, the scale shown in the chart will help
you in determining the order of style rules to be used.

A style rule with higher importance will be preferred than an identical style rule with lower
importance.

CSS: CSS Syntax - Learn CSS for Free and Fun ......

CSS Syntax

A Cascading Style Sheet, whether embedded in the head element of an HTML document or
contained in a separate .css file is comprised of one or a series statements.

A Statement is basically an instruction that does TWO things:
 Identifies the elements in the HTML document which the statement will be affecting
 Instructs the browser how to display the elements

Each statement in the style sheet must conform to the CSS syntax.

The CSS syntax is comprised of THREE parts: a selector, a property and a value.

Selector: The HTML element or tag intended toe defined.
Property: The attribute intended to be changed.
Value: It specifies the property to aid in rendering it to specific media.

A simple CSS syntax is defined as: Selector {property: value;}

selector {property: value;}
The Selector is followed by the first left curly brace ("{"); the braces have the property and value inside them and the property and value are separated by a colon.

The following example shows a selector
body {color: black;}

If the value is defined by multiple words, they are written within quotes.
p {font-family: "courier new";}

If there is more than one property, they must be separated by a semicolon.

The following example shows how a left aligned paragraph with a blue text color must be
defined.
p {text-align:left;color:blue;}

It is a convention to describe one property in one line followed by another property in another
line, which also makes the style definition more readable.

P{
text-align: left;
color: blue;
font-family: “courier new”;
}

Introduction to CSS

What is CSS?

 CSS stands for Cascading Style Sheets
 CSS is a set of instructions in a linked external file or within the source code of a page
 The CSS tells a browser how to render page elements
 A CSS file is identified by .css file extension.

Therefore, we can simply define Cascading Style Sheets (CSS) as a mechanism for adding style
(e.g. fonts, colors, spacing) to Web Documents.

What are Style Sheets?

In simple words, style sheets define styles such as fonts, color, margins, spacing, etc. that a
web browser must use while rendering a webpage.

 Style Sheets have Styles stored in them
 Styles define how HTML elements should be displayed in the browser
 Styles were added to HTML 4.0 to eliminate complexity
 External Style Sheets are stored in CSS files
 External Style Sheets can save a lot of time and work

Tutorial: Create and run Android Virtual Device :- Create Android App for free and fun ........

Create AVD

To define an Android Virtual Device (ADV) open the AVD Manager dialog via Windows → Android Virtual Device Manager and press the New button.

Enter the values similar to the following screenshot.

Ensure that the Use Host GPU option is selected. This makes the AVD use the graphical processing unit of your computer and this makes rendering on the AVD much faster.

Afterwards press the OK button. This will create the AVD configuration and display it under the list of available virtual devices.

Run AVD

To test if your setup is correct, select your your new entry and press the Start button

After some time your AVD starts. Do not interrupt this startup process, as this might corrupt the AVD.

After the AVD started, you can use the AVD via the mouse and via the virtual keyboard of the emulator.

Stopping the emulator

During development you don't stop the AVD, you just re-deploy your application.

Android virtual device - Emulator :- Create android app for free ..........

What is the Android Emulator?

The Android Development Tools (ADT) include an emulator to run an Android system. The emulator behaves like a real Android device (in most cases) and allows you to test your application without having a real device.

You can configure the version of the Android system you would like to run, the size of the SD card, the screen resolution and other relevant settings. You can define several of them with different configurations.

These devices are called Android Virtual Device and you can start several in parallel.

Google vs. Android AVD

During the creation of an AVD you decide if you want an Android device or a Google device.

An AVD created for Android will contain the programs from the Android Open Source Project. An AVD created for the Google API's will also contain several Google applications, most notable the Google Maps application.

If you want to use functionality which is only provided via the Google API's, e.g. Google Maps you must run this application on an AVD with Google API's.

Emulator Shortcuts

The following shortcuts are useful for working with the emulator.

Alt+Enter Maximizes the emulator. Nice for demos.

Ctrl+F11 changes the orientation of the emulator.

F8 Turns network on / off.

Parameter

The graphics of the emulator can use the native GPU of the computer. This makes the rendering in the emulator very fast. To enable this, add the GPU Emulation property to the device configuration and set it to true.

You can also set the Enabled flag for Snapshots. This will save the state of the emulator and will let it start much faster. Unfortunately currently native GPU rendering and Snapshots do not work together.

Android devices do not have to have hardware button. If you want to create such an AVD, add the Hardware Back/Home keys property to the device configuration and set it to false.

Android:- Using Resources

Reference to resources in code

The Resources class allows to access individual resources. An instance of Resources can get access via thegetResources() method of the Context class.

The Resources class is also used by other Android classes, for example the following code shows how to create aBitmap file from a reference ID.

BitmapFactory.decodeResource(getResources(), R.drawable.ic_action_search);

Reference to resources in XML files

In your XML files, for example your layout files, you can refer to other resources via the @ sign.

For example, if you want to refer to a color which is defined in a XML resource, you can refer to it via@color/your_id. Or if you defined a "hello" string in an XML resource, you could access it via @string/hello.

Activities and Layouts

The user interface for activities is defined via layouts. The layout defines the included Views (widgets) and their properties.

A layout can be defined via Java code or via XML. In most cases the layout is defined as an XML file.

XML based layouts are defined via a resource file in the /res/layout folder. This file specifies the ViewGroups,Views, their relationship and their attributes for this specific layout.

If a View needs to be accessed via Java code, you have to give the View a unique ID via the android:id attribute. To assign a new ID to a View use . The following shows an example in which a @+id/yourvalue Button gets the button1ID assigned.

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Show Preferences" >

</Button>

By conversion this will create and assign a new yourvalue ID to the corresponding View. In your Java code you can later access a View via the method findViewById(R.id.yourvalue).

Defining layouts via XML is usually the preferred way as this separates the programming logic from the layout definition. It also allows the definition of different layouts for different devices. You can also mix both approaches.

Pages

Ads 468x60px

dropdown

Social Icons

Learn JavaScript

Learn Android

HTML TAGS

Blogs Starters

Website Builder

Table 1: Simple Table

Demo:

One column:

One row and three columns:

Two rows and three columns:

Table 2: Tables Without Borders

Demo:

This table has no borders:

And this table has no borders:

Table 3: Table Header

Demo:

Table headers:

Vertical headers:

Table 4: Table with a Caption

Demo:

Table 5: Table cells than span more than one row/column

Demo:

Cell that spans two columns:

Cell that spans two rows:

Table 6: Tags inside a table

Demo:

Table 7: Cell padding (controls white space between text and borders)

Demo:

Without cell padding:

With cell padding:

Table 8: Cell spacing (controls space between cells)

Demo:

Without cellspacing:

With cellspacing="0":

With cellspacing="10":

CSS List

With CSS we can draw a line bounding your element. We can add properties like

With CSS we can set Margins at the

What we can do with CSS Border?

How CSS Font is used?

What we can do with CSS Text?

Group Selectors

What we can do with CSS Background?

How CSS background is used?

What are Context Dependents?

Class Selectors

ID Selectors

Solitary ID selectors

ID selectors

What are Tag Selectors

Advantages of CSS

 CSS keeps the file size smaller

 The pages of the website loads faster

 Lower bandwidth requirement

 CSS saves time

 CSS is easier to manage

Disadvantage of CSS

There are THREE ways in which style sheets can be inserted to an HTML document.

Inline Styles within a single HTML element

Internal Style Sheet inside the <head> element of an HTML page

Linking an External Style Sheet

The Hierarchy

The “cascading” refers to the hierarchy of control

CSS Syntax

The CSS syntax is comprised of THREE parts: a selector, a property and a value.

What is CSS?

What are Style Sheets?

Create AVD

Run AVD

Stopping the emulator

What is the Android Emulator?

Google vs. Android AVD

Emulator Shortcuts

Parameter

Reference to resources in code

Reference to resources in XML files