Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Saturday, August 15, 2009

Floating element using CSS Float

Using CSS you can float an element either left or right using property float. Suppose you have a box and now using float property you can place the box either left or right. By using a simple example we see the effect of float.
The code is,

<p style="font-size:1.5em"><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px; color:rgb(200,0,0);border-color:rgb(100,0,0); border-style:ridge; width:20em; height:8em; float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>

And the output is,

An example to demonstrate float:right



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.


And now we see the effect of float:left.
Code is,

<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px; color:rgb(200,0,0);border-color:rgb(100,0,0);
border-style:ridge; width:20em; height:8em; float:left">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>


And output is,

An example to demonstrate float:left



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.


Combining together,

<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:20em;
height:8em;
float:left">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>
<p style="font-size:1.5em"><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:20em;
height:8em;
float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>

output,

An example to demonstrate float:left



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.

An example to demonstrate float:right



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.

We can also divide a webpage into several columns. Like we can divide a page into 4 columns. The CSS then look like,

<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left " >
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>
<div style="border-width:5px;
color:rgb(200,0,0);
border-color:rgb(100,0,0);
border-style:ridge;
width:22%;
height:3em;
float:left">
This is a simple text.
</div>


This is a simple text.

This is a simple text.

This is a simple text.

This is a simple text.


In the example of left and right example we see the right elements are moved up to fill the available space which is freed from the left box. This is default behaviour. In CSS float, by default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. We can change this behaviour by using property clear.

The property clear can have the values left, right, both or none. The principle is, if clear is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

Below is the example,

<p style="font-size:1.5em"><u> An example to demonstrate float:left</u></p>
<div style="border-width:5px;
 color:rgb(200,0,0);
 border-color:rgb(100,0,0);
 border-style:ridge;
 width:33%;
 height:8em;
 float:left " >
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.
</div>
<p style="font-size:1.5em; clear:both; "><u> An example to demonstrate float:right</u></p>
<div style="border-width:5px;
 color:rgb(200,0,0);
 border-color:rgb(100,0,0);
 border-style:ridge;
 width:33%;
 height:8em;
 float:right">
This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.
</div>

output is,

An example to demonstrate float:left



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:left effect.

An example to demonstrate float:right



This is a simple text; just for an example to demonstrate the float attribute. In this example we are seeing the effect of float:right effect.







Posted by at No comments:
Labels:

Wednesday, August 12, 2009

Position an element in CSS

With the position property in CSS you can place an element exactly wherever you want inside an HTML page. With using of float you can have almost every combination of positioning an element.

The positioning an element is based on the coordinates of the system. Suppose if we want to position word "ARJU" 200px from the top of the document and 300px from the left of the document with an addition attribute of red color and twice font size, then our CSS code will be,

<div style="
position:absolute;
top:200px;
left:300px;
color:red ;font-size:2em" >Arju</div>

the output is,
Arju

Note that where Arju word now positioned? In fact we have the control to put it anywhere as we want. Is not it interesting? :) Positioning an element with position parameter is really a good technique.

The position can have a value of absolute or relative. The difference between absolute and relative is, how the position value is calculated.

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.

The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.

Following example should clear your idea,

<div style="position:absolute; top:500px; left:300px; color:red ;font-size:2em" >Arju</div>
<span style=" ">T1</span>
<div style="position:relative; top:500px; left:300px; color:red ;font-size:2em" >Arju2</div>
<span style=" ">T2</span>
<div style="position:absolute; top:500px; left:305px; color:red ;font-size:2em" >Arju</div>
<span style=" ">T3</span>

If you run above CSS code, you will see after "position: relative" whenever you like to display T2 it is not in the same line as in T1. But after "position:absolute" it is displayed on the same line as T2. Also we displayed both "position: relative" and "position: absolute" in the top and left value. But relative one is slightly to the right, to the left, up or down.

Arju
T1
Arju2
T2
Arju
T3

Here is more example about positioning of different boxes with top, left, right, bottom property.

#box1 {
position:absolute;
top: 550px;
left: 550px;
}

#box2 {
position:absolute;
top: 350px;
right: 350px;
}

#box3 {
position:relative;
bottom: 250px;
right: 350px;
}

#box4 {
position:relative;
bottom: 350px;
left: 650px;
}

Related Documents
Posted by at 1 comment:
Labels:

Monday, August 10, 2009

CSS borders with example

Border in CSS is used frequently to separate group of elements. Let's look about some border attributes that enhances CSS border as well. The CSS border properties are,

1)border-width
2)border-color
3)border-style
4)border

Each one is discussed below.
1)border-width:
The border-width defines the width of the border. The value of broder width can be defined as,
- thin
- medium
- thick
- a numeric value, indicated in pixels (px)
- based on screen width (em).

Following is an example.

<div style="border-width:1.2em;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>

<br/>
<div style="border-width:1px;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>

<br/>

<div style="border-width:medium;
border-color: rgb(120,120,120);
border-style:solid;
width:100px;">
<center>Test</center>
</div>

<br/>

And output is,


Test




Test




Test



2)border-color:
In above example border-color also is mentioned. You can define border-color through several ways.
- Define color as by name. Like, border-color: blue, border-color: red.
- Color in rgb notation. Like, border-color: rgb(11,11,11).
- Hexadecimal value. Like, border-color: #aa00ee.

3)border-style:
There are different types of border styles which is defined by border-style.

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:dotted;
width:100px;">
<center>Dotted</center>
</div>

<br/>
<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:dashed;
width:100px;">
<center>Dashed</center>
</div>

<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:solid;
width:100px;">
<center>solid</center>
</div>

<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:double;
width:100px;">
<center>double</center>
</div>
<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:groove;
width:100px;">
<center>groove</center>
</div>
<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:ridge;
width:100px;">
<center>ridge</center>
</div>
<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:inset;
width:100px;">
<center>inset</center>
</div>

<br/>

<div style="border-width:.5em;
border-color: rgb(20,120,20);
border-style:outset;
width:100px;">
<center>outset</center>
</div>


Output is,


Dotted




Dashed




solid




double




groove




ridge




inset




outset



For border-width, border-color and border-style there are foure special properties top-, bottom-, right- and left- which can be added. Like,

border-top-width: 10px;
border-top-style: solid;
border-top-color: red;

border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: 10px;
border-right-style: solid;
border-right-color: green;

border-left-width: 10px;
border-left-style: solid;
border-left-color: orange;

4)border:
You can use border-width, border-style and border-color together by simply using border property.

So,
p {
border-width: 1.3em;
border-style: solid;
border-color: red;
}

Can be written into:


p {
border: 1.3em solid red;
}

Posted by at No comments:
Labels:

CSS DIV and SPAN tag

With usage of <p>, <ul>, <h1> you can distinguish a group of page elements. But in many cases you want to distinguish an element or a group of elements or parts of a document which can't be described in any HTML tags. In those cases SPAN and DIV are used to descrive parts of element.

Difference between DIV and SPAN
The element <span> is called a neutral element which does not add anything to the document itself. But the CSS part within span adds visual style to the document.

On the other hand <div> tag adds a newline/line break after the block.

DIV is called a block-level element whereas a SPAN is called an inline element.

The <div> tag is wrapped around a whole section of content, or block and <span> is wrapped around content which is on just one line.

With an example I am trying to make you understand the differences between these two.
<div style="BACKGROUND-COLOR: #cccccc; padding-left:2em; padding-top:1em; padding-bottom:1em;" >This is a div example
</div>Now starting span example.
<span style="BACKGROUND-COLOR: #cccccc; padding-left:2em; padding-top:1em; padding-bottom:1em;" >This is a span example
</span>Span example is finished.

This is a div example

Now starting span example.This is a span exampleSpan example is finished.

We see here, after <div> block is finished there is a line break but after <span> there is no line break.
And background span over whole <div> block which indicates <div> is block level. And <span> spans within
line.
Related Documents
Posted by at No comments:
Labels:

Saturday, August 8, 2009

Class and ID in CSS with examples and differences

If you ever want to describe content of an HTML/XHTML document, then basic elements like , <h1>, <p>, </p><ul>, <li> will do the job. For example, if you like all <p> will have certain design then within CSS define the layout and all that will be appkied to all </p><p> tags.

But think about an example, in your database you have two </p><p> and you want to give two different layout for these two sections. With basic set of tags you can't cover every possible type of page element or layout choice. In order to define every possible type of page element or layout choice we must need to use ID and CLASS attribute. Like, </p><ul id="navigation1"> or <ul id="navigation2"> etc.

Then we define the style of these elements inside our CSS.

So, we can use both ID and CLASS inside html in order give style to them. But what is the difference between ID and CLASS? When we should use ID and when not? What is the advantages or differences between them? The following discussion will help you.

ID
- The most important concept of ID is IDs are unique.
- Each element can have only one ID.
- Each page can have only one element with that ID.

CLASS
- The most important concept of CLASS is CLASSes are not unique.
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.

If you want to apply same style to different elements then assign same class to those elements.

Like you want all <ul> element has same class named Listed. Then write as,
<ul class="Listed">..... </ul>
<ul class="Listed">..... </ul>
<ul class="Listed">..... </ul> etc.

You can also assign multiple classes to an element. In that case put every classes as space delimited. For <ul> you can assign three classes named Listed, MyList, List1 as below.
<ul class="Listed MyList List1">..... </ul>

Now let us look into detail about ID and CLASS.
ID and CLASS tagging does not do anything by default
If you simply assign ID or CLASS tag to an element there will be no changes in the element style unless you have CSS to target them and apply styling. So, Classes and ID’s don’t have any styling information to them.

Which to choose ID or CLASS
The rule is - style that to be reusable should be kept in a class and style that is totally unique should be kept in an ID.

Special browser functionality of IDs
CLASS does not have any special abilities in the browser, but ID has one very important functionality. That is the "hash value" in the URL.
Suppose if you have the following lines
<b>There are 33 visitors online</b> inside your http://localhost/testing_id.html
and now you added an id element with it like below.
<b id="test">There are 33 visitors online</b>
Now whenever in the browser you type http://localhost/testing_id.html#test the browser will attempt to locate the element with an ID of "test" and will automatically scroll the page to show that element. This is another important concept of why ID needs to be unique in an HTML page because your browser need to know where to scroll!

Elements can have both ID and CLASS
There is no restriction to add both ID and CLASS. Sometimes it is very good idea to assign both ID and CLASS to an element. A good example is using comments.
Like,
<li id="comments-1123" class="item">
It has a class applied to it that is for styling all comments on the page, but it also has a unique ID value (which to be dynamically generated by your web language). This ID value is useful for direct linking.

CSS does not care about ID or CLASS
To CSS ID and CLASS are same. There is nothing you can do with CLASS but not with ID and vice-versa in CSS.

JavaScript cares about ID or CLASS
In case of JavaScript there is difference between these two. It depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. But there is no such function exists for ID’s.

Case Sensitivity
ID and CLASS are both case sensitive in their name. So myid and MyID is different.

CSS syntax for ID and CLASS
Class is specified by including a period (.) before the selector name.
For example, we have HTML element like <p class="box1">
To apply red colour into box1 class write your CSS entry as,

.box1 {
color:red;
}

Specifically you could use,
p.box1 {
color:red;
}

To render ID into CSS you need to include a number sign (#) before the selector name.
For example, we have HTML element like </p><p id="footer">
To apply red colour to footer ID write your CSS entry as,

#footer {
color:#red;
}

</p></li></ul></ul></ul></ul></li></ul></h1>

Posted by at No comments:
Labels:

Wednesday, August 5, 2009

CSS links with example

If you ever notice the HTML links, you will see most of the HTML links are underlined inside my blog, which is default option. You can change those links colors, fonts, underline of HTML links. You can also define color based on whether the link is unvisited, visited, active, or whether the cursor is on the link. In this post I will discuss those with examples.

Before going into real part let's have an idea about pseudo-class. A pseudo class allows you to take into account different conditions or events when defining a property for an HTML tag.

You can define a link by using <a href=""> attribute.
The link property can have different states like,
-Link is visited.
-Link is not visited.
-Link is active.
-Cursor is over the link.
and you can represent these states by pseudo class a:visited, a:link, a:active, a:hover respectively.

Let's now see example of each type of pseudo class CSS links.
1)Pseudo-class: link
The :link is for unvisited links. Suppose we want unvisited links will be displayed as green color. Then, do it inside CSS file as
a:link {
color: green;
}

2)Pseudo-class: visited
The :visited is used for links leading to pages that the user has visited. If you want that all visited page link will have color yellow. Then within CSS file write as,
a:visited {
color: yellow;
}

3)Pseudo-class: active
The :active is used for links that is active. If we want all active links will be displayed as background colored purple then write as,
a:active {
background-color: purple;
}

4)Pseudo-class: hover
The :hover is used when the mouse pointer goes over a link. If you want whenever mouse pointer goes over a link, link's color will be pink. Then write it as,
a:hover {
color: pink;

}

Finally, we can use http://arjudba.blogspot.com/2009/08/css-text-property-with-examples.html to add diversity of displaying links.

I tried to add some diversity in the following CSS and HTML. You run these in your environment to see effect.

Here is my mycss.css file.

a:link {
color: green;
text-decoration:none
}
a:visited {
color: yellow;
text-decoration:line-through;
}
a:active {
background-color: purple;
}
a:hover {
color: pink;
letter-spacing:40px;
text-transform:uppercase;
text-decoration:none;
}

And here goes a simple HTML,

<html>
<title>Links diversity with CSS
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<body>Here goes the links of
<a href="http://Arjudba.blogspot.com">Arju's Blog</a>
</body>
</html>

Related Documents
Posted by at No comments:
Labels:

CSS Text property with examples.

CSS text property helps to add format and style to a text. Following CSS text properties are available.

1)text-indent
2)text-align
3)text-decoration
4)letter-spacing
5)text-transform

1)text-indent:
The property text-indent allows an indent to the first line of the paragraph. A simple example is shown below with indentation and without indentation.

<div style="text-indent:3em">
Here text-indent is set to 3em.
</div>
<div>
This text is without any indentation.
</div>


Here text-indent is set to 3em.


This text is without any indentation.


2)text-align:
Text-align can have value,
-Left :Text will be left justified.
-Right :Text will be right justified.
-Center :Text will be in center.
-justify : Text stretch in the line in such way so that both the right and left margins are straight.
Following is an example:

<div style="text-align:left">
<b>Left:</b> Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:right">
<b>Right: </b>Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:center">
<b>Center: </b>Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>
<div style="text-align:justified">
<b>Justified:</b> Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.
</div>

Output is,

Left: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.


Right: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.


Center: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.


Justified: Register, post your question,
take part in regular discussion in forum http://www.arju-on-it.com/forum for free.


3)text-decoration
Text-decoration specifies whether there will be line over the text or under the text or through the text or none. It can have following values,
-Underline
-Overline
-Line-through
-None
Following is an example.

<div style="text-decoration:underline">
Line goes under the text.
</div>

<div style="text-decoration:overline">
Line goes over the text.
</div>

<div style="text-decoration:line-through">
Line goes through the text.
</div>

<div style="text-decoration:none">
No Line over/ under /through the text.
</div>

output is,

Line goes under the text.



Line goes over the text.



Line goes through the text.



No Line over/ under /through the text.

4)letter-spacing:
letter-spacing is the width between letter.
Example is,

<div style="letter-spacing:0.1em">
Space between letter is less.
</div>
<div style="letter-spacing:0.5em">
Space between letter is more.
</div>

output is,

Space between letter is less.


Space between letter is more.


5)text-transform:
The text-transform property controls the capitalization of a text.
It can have the following values.
-capitalize: Capitalizes the first letter of each word.
-uppercase: Converts all letters to uppercase.
-lowercase: Converts all letters to lowercase.
-none: No transformations
Following is an example.

<div style="text-transform:capitalize">
<b>Capitalize:</b> My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:uppercase">
<b>Uppercase: </b>My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:lowercase">
<b>Lowercase: </b>My name is Mohammad Abdul Momin Arju
</div>
<div style="text-transform:none">
<b>None: </b>My name is Mohammad Abdul Momin Arju
</div>

output is,

Capitalize: My name is Mohammad Abdul Momin Arju


Uppercase: My name is Mohammad Abdul Momin Arju


Lowercase: My name is Mohammad Abdul Momin Arju


None: My name is Mohammad Abdul Momin Arju


Related Documents
Posted by at No comments:
Labels:

Tuesday, August 4, 2009

CSS Fonts with examples

In this post I will discuss about lists of fonts attributes/properties available in CSS along with their examples. With these properties you can control the fonts displayed in the web page.

The lists of font properties available in CSS are,

1)font-family
2)font-style
3)font-variant
4)font-weight
5)font-size
6)font

Some descriptions with examples are shown below.
1)font-family:
With font-family property it is specified several fonts so that browser can choose the text font of the element in an order. If first font in the order is not available then browser use second font in the order to display the item and so on.

There are two types of names used to categorize fonts: family-names and generic families.

Family name denotes a specific font name.

Generic family denotes a group of family name.
Family name and their generic family is displaying HTML code and result is given below.

<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of Generic family serif</div></u></b>
<div style="font-family:Times New Roman">Times New Roman</div>
<div style="font-family:Garamond">Garamond</div>
<div style="font-family:Georgia">Georgia</div>
</ul>
<ul>
<b><u><div style="font-famimy:sans-serif;padding-bottom:.2em">Following is an example of Generic family sans-serif</div></u></b>
<div style="font-family:Trebuchet">Trebuchet</div>
<div style="font-family:Arial">Garamond</div>
<div style="font-family:Verdana">Georgia</div>
</ul>
<ul>
<b><u><div style="font-famimy:serif;padding-bottom:.2em">Following is an example of Generic family Monospace</div></u></b>
<div style="font-family:Courier">Courier</div>
<div style="font-family:Courier New">Courier New</div>
<div style="font-family:Andele Mono">Andele Mono</div>
</ul>

Output is,


    Following is an example of Generic family serif

    Times New Roman

    Garamond

    Georgia



    Following is an example of Generic family sans-serif

    Trebuchet

    Garamond

    Georgia



    Following is an example of Generic family Monospace

    Courier

    Courier New

    Andele Mono



You can also specify font-family as below.
font-family: arial, verdana, sans-serif;
If Arial font is not available to browser it will try to display as font verdana. If verdana not available then it will display a font from sans-serif family.

2)font-style:
font-style can be defined as normal, italic or oblique.
Following is an example.


<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-style:italic">Times New Roman</div>
<div style="font-family:Garamond; font-style:oblique">Garamond</div>
<div style="font-family:Georgia; font-style:normal">Georgia</div>
</ul>



    Following is an example of font-style of Generic family serif

    Times New Roman

    Garamond

    Georgia



3)font-variant:
Font-variant value can be normal or small-caps. A small-caps font is a font that displays all letters like capital letters but for uppercase size is greater than lower.

Example is,

<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-variant:small-caps">Times New Roman</div>
<div style="font-family:Garamond; font-style:normal">GarAmond</div>
<div style="font-family:Georgia; font-variant:small-caps">GeoRGia</div>
</ul>



    Following is an example of font-style of Generic family serif

    Times New Roman

    GarAmond

    GeoRGia



4)font-weight:
font-weight defines how bold or heavy a font will be. It can have value normal or bold. Also it can have weight between 100 to 900 to describe the weight of a font.

Example is shown below.

<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-weight:700">Times New Roman</div>
<div style="font-family:Garamond; font-weight:bold">GarAmond</div>
<div style="font-family:Georgia; font-weight:normal">GeoRGia</div>
</ul>


    Following is an example of font-style of Generic family serif

    Times New Roman

    GarAmond

    GeoRGia



5)font-size:
font-size describes how big a font will be. It can be expressed in various unit like pixel size(px), percentage(%), adjust based on screen(em).
Following is an example,


<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-size:2.2em">Times New Roman</div>
<div style="font-family:Garamond; font-size:30px">GarAmond</div>
<div style="font-family:Georgia; font-size:120%">GeoRGia</div>
</ul>


    Following is an example of font-style of Generic family serif

    Times New Roman

    GarAmond

    GeoRGia



6)font:
The font is a short hand property. It covers all the different font properties in one single property.

Suppose you have defined you font styles as below,
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: arial, sans-serif;

Instead of writing these, you simply can use font like below.

font: italic bold 10px arial, sans-serif;

The order of values for font is:

font-style | font-variant | font-weight | font-size | font-family

Related Documents
Posted by at No comments:
Labels:

Monday, August 3, 2009

CSS color and backgrounds

In this post I will discuss about CSS color and list of background attributes.
Following is the list of foreground and background color attribute exist in CSS.
1)color
2)background-color
3)background-image
4)background-repeat
5)background-attachment
6)background-position
7)background
In the following section there is some discussions about these properties/attributes.

1)color: The color property is for foreground color of an HTML element. The color attribute can be entered through three ways.

i)Hexadecimal value: example is, color: #ff00ee; where first pair ff represents red, second pair 00 represents green and last pair ee represents blue.)

ii)Naming the color: You can name the color with color attribute. Like you can describe blue color by color:blue; red one by color:red; etc.

iii)Third way is define the color in rgb notation. Like color:rgb(100,123,233) where first one represents red, second os green and third one is blue. The measurement is between zero(0) to 255 where 255 represents fully red/green/blue and 0 represents no red/green/blue.

2)background-color: The background-color property describes the background color of an element. The value can be entered same as color attribute. To make blue background we can write, background-color: blue;

3)background-image: With background-image property we can insert background image for a web page. To do this you need to apply the background-image property to <body> and specify the location of the image.
Example is,
body {
background-image: url("myimage.jpg");
}

4)background-repeat: If you set your background image using background-image property by default the image is repeated both horizontally and vertically to cover the entire screen. However, there will be many times where you may not wish to repeat your background image. You can control this by using background-repeat property.

There is four different values for background-repeat.
i)background-repeat: repeat-x - The image is repeated horizontally
ii)background-repeat: repeat-y - The image is repeated vertically
iii)background-repeat: repeat - The image is repeated both horizontally and vertically
iv)background-repeat: no-repeat - The image is not repeated

5)background-attachment: The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

This property can have two values.

i)Background-attachment: scroll - The image scrolls with the text of the web page - unlocked

ii)Background-attachment: fixed - The image is locked. That is background image will not move with the text when a reader is scrolling the page.

6)background-position: By default, a background image will be positioned in the top left corner of the screen.

But you may want to put the background image anywhere on your screen. The property background-position allows you to do this.

There are various ways to set the values of background-position.

i)background-position:200px 300px; indicates the background image to be positioned 200px from the left side and 300px from the top of the browser window.

ii)background-position: top right; indicates that the image is positioned in the top-right corner of the page.

iii)background-position: 50% 25%; indicates that the image is centrally positioned and one fourth down the page.

7)background:
The property background is the short hand way for all the background properties that is discussed above.

With simply background attribute we can list all background properties in one lines and thus shorten the background property usage.

For example, we need to set up following attributes for our CSS.
background-color: #FF0022;
background-image: url("myimage.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Using background the same result can be achieved in just one line of code:


background: #FF0022 url("myimage.jpg") no-repeat fixed right bottom;

Remember the list of orders used in this background attribute,

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

And if any property is left out, it will automatically be set to its default value.

Related Documents
Diferent ways to apply CSS to an HTML document
Posted by at No comments:
Labels:

Sunday, August 2, 2009

Diferent ways to apply CSS to an HTML document

There is actually three different ways by which we can apply CSS to an HTML element. I will discuss here all three ways. But it is recommended the last one. That is put CSS in a file and then from HTML make a link to the style sheet. This is because in that case all CSS can be easily monitored just one file and we can easily use that file along the whole site. It is flexible too.

Way 01: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute "style". Suppose we need to set color of a text. Using CSS color we can do that. But before that put the color attribute within style like below,
<span > This is red color</span>
And it will look like,
This is red color
If we run above code we will notice color becomes red.

Way 02: Internal (the tag style)
Second way of putting CSS elements is inside title tag of HTML. Within title tag using <style type="text/css"> CSS elements can be entered and then those CSS elements will be applied to whole page HTML in the page.

<html>
 <head>
   <title>Just an CSS example</title>
   <style type="text/css">
     body {color: red;}
   </style>
 </head>
 <body>
   This is red color
 </body>
</html>

Way 03: External (link to a style sheet)
A third and good way of putting CSS things into a file. Like let's name the file as style.css and put all CSS things inside the file. Its contents are below.
body {
color: red;
}

And then the trick is to create a link from the HTML file to the style sheet (style.css). The following code inside HTML does the thing.

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

My full HTML code will look like,

<html>
 <head>
   <title>My document</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
   This color becomes red because of stylesheet.
 </body>
</html>

Related Documents
Posted by at 1 comment:
Labels:

Friday, July 17, 2009

CSS margin with example.

To understand margin let's start a general example and see how it display in the browser. Copy the following code and see from browser,

<html>
<body>
In this blog http://arjudba.blogspot.com you will
see there is some space (though a very little amount)
all around. But there is no space whenever you
will disply this html code inside your browser.
<blockquote>

But there will be some spaces all around this
blockquote. Both left, right, top, bottom side.

</blockquote>
You are recommended to join http://arju-on-it.com/forum
and discuss your problems there
</body>
</html>


If you run above html code, you will see all around of blockquote text there is space. But don't have control how much space will be all around. In CSS, this space is called "margins" and margins are controlled by four properties, margin-left, margin-right, margin-top and margin-bottom. We can minimize space around blockquote by following css code,

blockquote {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
}

We can shorthand margin property by setting all margin properties using,

blockquote{
margin: 1em 0em 1em 0em;
}

The first part 1em is for margin-top and then it goes clockwise, second part is margin-right, then margin-bottom and then margin-left.

Let's assign some background colour all around blockquote. We can do this simply by background. Like,

blockquote{
margin: 1em 0em 1em 0em;
background: #AAA;
}

We will see that the background color barely covers the quoted text. But the margin area is not affected. However if we want that background color will be there will some amount of space around quote text(element) then we have to use another property of CSS called padding.

With usage of padding css code will look like,

blockquote{
margin: 1em 0em 1em 0em;
background: #AAA;
padding:.5em .5em .5em .5em;
}

Similar to margin padding can be padding-top, padding-right, padding-bottom, padding-left.

So, our final code will look like,

<html>
<style type="text/css">
blockquote{
margin: 1em 0em 1em 0em;
background: #AAA;
padding:.5em .5em .5em .5em;
}
</style>
<body>
In this blog http://arjudba.blogspot.com you will
see there is some space (though a very little amount)
all around. But there is no space whenever you
will disply this html code inside your browser.
<blockquote>
But there will be some spaces all around this
blockquote. Both left, right, top, bottom side.
</blockquote>
You are recommended to join http://arju-on-it.com/forum
and discuss your problems there
</body>
</html>

Final output is in,




Posted by at No comments:
Labels: ,

Monday, July 13, 2009

CSS Tutorial- Starting with CSS, how to use and integrate it.

CSS stands for Cascading Style Sheets. CSS is the very simple mechanism for adding style (this is fonts, colors, spacing) to Web pages. This post is about how to use css into an html documents and how these two can be work together. Step by step it is discussed of using css into html documents.

Step 1: Create a Html file.
Simply you can use notepad on windows or vi on unix to write a simple html file. You can use third party open source program like notepad++. But never use wordprocessor, such as Microsoft Word or OpenOffice. Because their outcome comes in different format and browser can't read it.

Note that in html comment starts with <!-- and ends with -->
My content of index.html is below.

<html>
<head>
<title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navigation_bar">
<li><a href="index.html">Home page</a>
<li><a href="products.html">Our Products</a>
<li><a href="contact_us.html">Contact us</a>
<li><a href="about_us.html">About us</a>
</ul>

<!-- Main content -->
<h1>This topic is one is for learning css</h1>

<p>Welcome to http://arjudba.blogspot.com

<p>It is just an example.
You can enhance it as you go on.
The style does not look so good.

<p>More learning materials
are coming soon.

<!-- Just publishing today's date with signature -->
<address>14th July, 2009.<br>
by Mohammad Abdul Momin Arju.</address>

</body>
</html>

In the example the tag <ul> introduces an "Unordered List", which means a list in which the items are not numbered. The <li> is the start of a "List Item." Note that <ul>, <p> does not need closing tags.

Step 2: Add some colours:
If you run codes of step1 you will see black text within white background. So with css we want to add some colours to background as well as to text. For css style we should make another file named style.css so that we can use that style for another html file. But in this post to make it easier, I am placing css styles in the same html file index.html. To do it we need to add a <style> element to the HTML file.

Let's see my style looks like,

<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: green;
background-color: #ededed }
</style>
</head>

<body>
etc...

Note that in case of adding css element there is followed by rules and each rule contains three part..

selector{
property:value;
}

1. The selector (in the example: "body"), which tells the browser which section of the web page will be affected by css style.

2. The property (in the example, 'color' and 'background-color' are both properties), which tells the browser what aspect of the layout is being set.

3. And the third one is value (in the example 'green' and '#ededed'), which gives the value for the style property.

Step 3: Add fonts
For good design and good look and feel you can add different fonts to different section of the page. For body Georgia font is used, if it is not available, Times New Roman or Times will be there, and if all else fails, the browser may use any other font with serifs.

For heading section Helvetica will be used. If not available Arial will be there, if both unavailable any fonts with sans-serif.

<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
      Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
</style>
</head>

Step 4: Add a navigation bar
We already have navigation menu at top of the page. But we want to move menu bar on left. This is done by css position property with a value of absolute. Also we need to position of body to the right so that menu and body does not overlap. We can move the body to the right by using padding-left property. So our css code now stands,

<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left:14em;
font-family: Georgia, "Times New Roman",
      Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
position: absolute;
top: 2em;
left: 1em;
width: 9em }

</style>
</head>
<body>

Here measure 2em means 2 times the size of the current font. E.g., if the menu is displayed with a font of 14 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use.

Step 5: Style the links
Still now navigation menu looks like list. Using list-style-type property we will remove bullet. And we will make background as green of all menu items so that it looks like menu. To make each menu separate margin property would have a value. Also we will change the colours of the links. If user has not visited yet then make it blue and if user has visited link then we will make it purple.

Now it looks,

<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
  padding-left:14em;
font-family: Georgia, "Times New Roman",
      Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
list-style-type: none;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
li{
background:green;
border:0;
padding:.5em;
margin:.3em;
}
a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }

</style>
</head>

Step 6: Add a horizontal line
To make separate address from main page I am adding a horizontal line after body.
So just adding this line within style sheet.

address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Step 7: Put the style sheet in a separate file.
Now we are separating the syle sheet in another file so that we can use this style in many other web pages. Let's name this as style.css which looks like,

body {
padding-left:14em;
font-family: Georgia, "Times New Roman",
      Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Arial, sans-serif }
ul.navigation_bar{
list-style-type: none;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
li{
background:green;
border:0;
padding:.5em;
margin:.3em;
}
a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }

Now from html file index.html reference it as,
<link rel="stylesheet" href="mystyle.css">
Our index.html looks like,

<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="style.css">

</style>
</head>


<body>

<!-- Site navigation menu -->
<ul class="navigation_bar">
<li><a href="index.html">Home page</a>
<li><a href="products.html">Our Products</a>
<li><a href="contact_us.html">Contact us</a>
<li><a href="about_us.html">About us</a>
</ul>

<!-- Main content -->
<h1>This topic is one is for learning css</h1>

<p>Welcome to http://arjudba.blogspot.com

<p>It is just an example.
You can enhance it as you go on.
The style does not look so good.

<p>More learning materials
are coming soon.

<!-- Just publishing today's date with signature -->
<address>14th July, 2009.<br>
by Mohammad Abdul Momin Arju.</address>

</body>
</html>

The output will be,







Posted by at 1 comment:
Labels: ,
Subscribe to: Posts (Atom)