Close   

Admin and announcement forums

    30 Mar 2008
Understanding Cascading Style sheets and  Basics of CSS  
kumar rakesh
create and manage free online surveys with unlimited responses
Online surveys are now basic requirement of everyone who want to review there products or to make studies about anything. But finding a solution who can provide esurveys efficiently is really a big pain. creating an online survey with inefficient tool as irritating and getting survey conducted with limitations on responses is even worse.
cont..
    30 Mar 2008
Understanding Cascading Style sheets and  Basics of CSS  
kumar rakesh
practice interviews and prepare for interviews
in todays changing world every one want to increase there salaries very quickly.
Changes your employer is an very efficient solution for this. But changing employer and company is not so easy.

cont..

Viewed 172 times
Total posts : 3

    06 Feb 2008
Understanding Cascading Style sheets and  Basics of CSS  
Ernie Kent
His other forums
Understanding Cascading Style sheets and Basics of CSS
Hey friends, it's for beginners only and describes basics of style sheets !

You must be knowing that Style sheet is used to display content on html page in good format.
It is is also used to give good navigation on html page, in combination with javascript. So, together javascript and css provides good look and feels and easy navigation to the user. To know CSS is must for any web designer and web programmer.  CSS can make lot of  difference in rendering/placing html elements on page. A wrong CSS can make garbage out of an html page. Let's now read basic properties of CSS for any html elements.

PADDING : it is to give space around the elements. This property behaved differently in different browsers mainly in IE and MOZILLA. So, if you placed border around a container element and put text in this box then, padding will add space around text and before border. Syntax for padding is
style="padding:10px;" // for inline styles

element{
    padding:10px;
}
// for writing in external css file


now in this example a 10pixel padding will be added around text. you can write it in different ways like 10px, 10pt,2% etc..

border : As this name says everything, it will make a border around the element. There is no need to explain this. Syntax for this is

style="border:1px solid #ff0000;" // for inline styles

element{
    border:1px solid #ff0000;
}
// for writing in external css file

border has three elements that can be defined
first is : border size ( 1px )
second : border style ( solid ) options are "double, solid, dotted, dashed, ridge, groove, inset, outset"
third is : border color ( #ff0000), color can be written by color name ( red, yellow, white ) or by color code

Margin : Margin will put space around the element, in this case space will be added outside of the element and will not add space around the text placed in the box.  Margin will be behaved differently in different browsers. You can add margin around an html element in following way
style="margin:1px;" // for inline styles

element{
    margin:1px;
}
// for writing in external css file


description for margin is similar to padding.

going for now, i will add rest of the tags in my next post.
bye.
enjoy.
07 Feb 2008
 
Ernie Kent
His other forums
Float : it is the default alignment of the element. Means this property tells browser where to place the element on left, right, top, bottom etc. it's possible values are



left

top

right

bottom

code for writing float is :

style="float:left;" // for inline styles



element{

    float:left;}
// for writing in external css file



This property is very important and used most of the times. Any mistake in this property can make your elements placement a garbage. So, practice for this properly.



text : You can decorate and format your text on page by css. There are various properties to set for text. You can play with them, i'm listing them here.



text-decoration:none; // underline,italic,overline,none,line-through

font-weight:bold; // 100-800,bold,normal

font-family:Arial,georgia,verdana; //any font you want to render ( arial, georgia, verdana ..)

color:#aaaaaa; //color name or hex color code

letter-spacing:1px; //Spacing between letters rendered

line-height:20px; //Height of each line rendered

text-align:center; //alignment of the text in the container

text-indent:50px; //it will leave a spacing of 50px before text in first line

text-shadow:3px 3px red




  • This property accepts shadow effects to be applied to the text of the element.



  • Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.



  • A shadow offset is specified with two length values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. The second length value specifies the vertical distance below the text.



  • The color value may optionally be specified before or after the length values of the shadow effect.



text-transform:none;//it will effect on the letters rendered. possible values are

none, capitalize,lowercase,uppercase

word-spacing:2px//this is the space between words in container



Rest we will do in next post.

bye

Login to participate in forums
22 Apr 2008
 
Ernie Kent
His other forums
Classes and ids identifiers for styles



Styles can be attached with html elements in two ways



 1. class

 2. id



class : css Class can be created by syntax



class_name{

       /*style code here */

}



this class will be applied to any element where it is called. it can be applied by calling it in following way

<div class='class_name'>matter</div>



if you want to be more specific about classed declared that which element can act on it, then, you can declare class in the way



class_name.element_name{

    /* style code */

}



now this class will affect only html elements "element_name"

Class is a general style which can be applied to multiple elements in same page. so, you can apply any class,  to any number of elements in same page.



 id : Style can also be applied to an html element by using id of that element. style for an id can be defined as



#element_id {

    /* style code here */

}



now this style will be applied to any html element with id= element_id.

as you know there can be only one html element of one id so, this style can be applied to only one html element in html page. This style can be applied to any html element with id=element_id without any restriction, but , if you want to apply this style to some specific html element then you can do this in the way



element_name#element_id{

    /* style code here */

}

now this style will be applied to only element_name with id = element_id

Login to participate in forums
22 Apr 2008
 
Ernie Kent
His other forums
css - cascading style sheet



you can be very specific to apply a style to an html element. element can be reached to any inner level to apply styles,

for example, if you have following html structure



<div class="one">one

    <div> two

       <div>three</div

    </div>

</div>



you can directly apply style to the div three by simply defining class only for this div. for example



div.one div div{

    /* this class will be applied to a div which is third child of the div with class "one"

}

so, in this way, you can define many styles specific to some elements without defining class names for each.



similarly it can be achieved by defining styles by id
Login to participate in forums

Login to participate in forums
jump to :
Post reply on this forum

1

Comment on this forum
Name :
Email :
Comments :
Legends
Understanding Cascading Style sheets and  Basics of CSS Forums tagged Understanding Cascading Style sheets and  Basics of CSS Forums tagged. But locked for further reply
="Understanding Forums locked. can not accept further replies Understanding Cascading Style sheets and  Basics of CSS General forum