Web Design is easy

Friday, 13 December 2013

CSS » Table

How You know with HTML You can create simple tables by defining the borders. The new in CSS is that You can style Your tables with simple codes. You add background, different border colors and so on.

Table Borders

» EXAMPLE:

<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Notice that the table in the example above has double borders. This is because both the table and the th/td elements have separate borders.

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

» EXAMPLE:

<html>

<head>

<style>

table {

border-collapse:collapse;

}

table, th, td {

border: 1px solid blue;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>class</td>

</tr>

<tr>

<td>string</td>

</tr>

</body>

</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Defining width and height
Width and height is defined by the width and height properties.

» EXAMPLE:

<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
table {
width: 50%;
}
th {
height: 60px;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Text Aligment
You can use text-align property, like text-align: left; , text-align: right; or text-align: center;

» EXAMPLE:

<html>

<head>

<style>

table, th, td {

border: 1px solid blue;

}

td {

text-align: right;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>class</td>

</tr>

<tr>

<td>string</td>

</tr>

</body>

</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Using vertical align
The vertical-align property sets the vertical alignment, like top, bottom, or middle:

» EXAMPLE:

<html>

<head>

<style>

table, th, td {

border: 1px solid blue;

}

td {

height: 70px;

vertical-align: bottom;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>class</td>

</tr>

<tr>

<td>string</td>

</tr>

</body>

</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Table Padding
Here You have to use the padding property.

» EXAMPLE:

<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>HTML</th>
<th>CSS</th>
<th>PHP</th>
</tr>
<tr>
<td>body</td>
<td>class</td>
<td>var</td>
</tr>
<tr>
<td>head</td>
<td>id</td>
<td>string</td>
</tr>
</body>
</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Table Background
Here we will use background-color property to define background color of th elements.

» EXAMPLE:

<html>

<head>

<style>

table, th, td {

border: 1px solid blue;

}

th {

background-color: blue;

color: white;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>class</td>

</tr>

<tr>

<td>string</td>

</tr>

</body>

</html>

» Result:

HTML	CSS	PHP
body	class	var
head	id	string

Wednesday, 11 December 2013

CSS » List

As You know You can create lists in HTML, but in CSS You can set different list item markers for ordered lists(the list items are marked with bullets), different list item markers for unordered lists(the list items are marked with numbers or letters), and image as the list item marker.

Creating Different Lists Markers

» EXAMPLE:

<html>
<head>
<style>
#list1 {
list-style: square;
}
#list2 {
list-style: circle;
}
#list3 {
list-style: disk;
}
#list4 {
list-style: upper-roman;
}
#list5 {
list-style: lower-alpha;
}
#list6 {
list-style-type: decimal;
}
#list7 {
list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>
<p>Unordered lists:</p>

<ul id="list1">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>

<ul id="list2">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>

<ul id="list3">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ul>

<p>Ordered lists:</p>

<ol id="list4">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>

<ol id="list5">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>

<ol id="list6">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>

<ol id="list7">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>Java Script</li>
</ol>

</body>
</html>

» Result:

Unordered lists:

HTML
CSS
PHP
Java Script

HTML
CSS
PHP
Java Script

HTML
CSS
PHP
Java Script

Ordered lists:

HTML
CSS
PHP
Java Script

HTML
CSS
PHP
Java Script

HTML
CSS
PHP
Java Script

HTML
CSS
PHP
Java Script

An Image as The List Item Marker

» EXAMPLE:

<html>

<head>

<style>

{

padding: 0px;

margin: 0px;

list-style-type: none;

}

ul li

{

background-image:url(arrow-icon.png)

background-repeat:no-repeat;

padding-left:25px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

» Result:

HTML
CSS
PHP

Tuesday, 10 December 2013

CSS » Link

You can customize your links in different ways.

There are 4 link states:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

» EXAMPLE:

<html>
<head>
<style>
a:link {
color: #C00;
} /* unvisited link */
a:visited {
color: #33F;
} /* visited link */
a:hover {
color: #FC0;
} /* mouse over link */
a:active {
color: #000;
} /* selected link */
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>

» Result:

Result cannot be shown in our blog, but you can try it alone.

Link can be styled with color, fonts, background, etc.
We will show You these things in the below examples.

Background Color

» EXAMPLE:

<html>
<head>
<style>
a:link {
background-color:#C00;
} /* unvisited link */
a:visited {
background-color:#33F;
} /* visited link */
a:hover {
background-color:#FC0;
} /* mouse over link */
a:active {
background-color:#000;
} /* selected link */
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>

» Result:

Result cannot be shown in our blog, but you can try it alone.

Add different styles to hyperlinks

» EXAMPLE:

<html>
<head>
<style>
a:link {
background-color: #C06;
}
a:visited {
color: #FFF;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: line-through;
background-color: #3FF;
color: #333;
}
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Click On This Link</a>
</body>
</html>

» Result:

Result cannot be shown in our blog, but you can try it alone.

Link Boxes

» EXAMPLE:

<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color: #003;
background-color: #F60;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color: #C03;
}
</style>
</head>
<body>
<a href="http://easilylearnhtml.blogspot.com/" target="_blank">Link To Our blog</a>
</body>
</html>

» Result:

Result cannot be shown in our blog, but you can try it alone.

Monday, 9 December 2013

CSS » Font

In this tutorial we will show You how to use all font properties.

Font Family

The font family of a text is set with the font-family property.

» EXAMPLE:

<html>

<head>

<style>

h1 {

font-family: "Georgia";

}

h3.heading {

font-family: Verdana, Geneva, sans-serif;

}

p {

font-family: "Courier";

}

</style>

</head>

<body>

<h1>This is heading with font family Georgia.</h1>

<h3 class="heading">This is heading with font family Verdana.</h3>

<p>This is heading with font family Courier.</p>

</body>

</html>

» Result:

This is heading with font family Georgia.

This is heading with font family Verdana.

This is paragraph with font family Courier.

Font Style

This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

» EXAMPLE:

<html>

<head>

<style>

p.normal {

font-style: normal;

}

p.italic {

font-style: italic;

}

p.oblique {

font-style: oblique;

}

</style>

</head>

<body>

<p class="normal">This is a paragraph, normal.</p>

<p class="italic">This is a paragraph, italic.</p>

<p class="oblique">This is a paragraph, oblique.</p>

</body>

</html>

» Result:

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

Set Font Size With Pixels

» EXAMPLE:

<html>

<head>

<style>

p.demo {

font-size: 37px;

}

p.demo2 {

font-size: 26px;

}

p {

font-size: 10px;

}

</style>

</head>

<body>

<p class="demo">This is a paragraph.</p>

<p class="demo2">This is a paragraph.</p>

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

</body>

</html>

» Result:

This is a paragraph.

Set Font Size With Em

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

» EXAMPLE:

<html>
<head>
<style>
p.demo {
font-size: 2.2em;
}
p.demo2 {
font-size: 1.4em;
}
p {
font-size: 0.8em;
}
</style>
</head>

<body>
<p class="demo">This is a paragraph.</p>
<p class="demo2">This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

» Result:

This is a paragraph.

Set Boldness

» EXAMPLE:

<html>
<head>
<style>
p.normal {
font-weight:normal;
}
p.light {
font-weight:lighter;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>

» Result:

This is a paragraph.

Set the variant of the font

» EXAMPLE:

<html>
<head>
<style>
p.demo1 {
font-variant: normal;
}
p.demo2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="demo1">This is a paragraph with normal variant.</p>
<p class="demo2">This is a paragraph with small caps.</p>
</body>
</html>

» Result:

This is a paragraph with normal variant.

This is a paragraph with small caps.

ALL IN ONE

» EXAMPLE:

<html>
<head>
<style>
p.demo1 {
font: 15px arial;
}
p.demo2 {
font: italic bold 12px/30px Georgia;
}
</style>
</head>
<body>
<p class="demo1">This is a paragraph with normal variant.</p>
<p class="demo2">This is a paragraph with small caps.</p>
</body>
</html>

» Result:

This is a paragraph with normal variant.

This is a paragraph with small caps.

Pages

Friday, 13 December 2013

CSS » Table

Table Borders

Collapse Borders

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

Wednesday, 11 December 2013

CSS » List

An Image as The List Item Marker

Tuesday, 10 December 2013

CSS » Link

You can customize your links in different ways.

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

Monday, 9 December 2013

CSS » Font

Font Family

» EXAMPLE:

This is heading with font family Georgia.

This is heading with font family Verdana.

Font Style

» EXAMPLE:

Font Size

Set Font Size With Pixels

» EXAMPLE:

Set Font Size With Em

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

» EXAMPLE:

Contributors