.NET Mixer: September 2009

Sunday, September 27, 2009

How to change CSS class name using javascript

Please visit my new Web Site https://coderstechzone.com

If you are aiming to make HTML elements and change its CSS properties without reloading the entire page then this post is for you. Most often we need to change CSS dynamically to fullfill user requirement. In this post i will show you through an example how we can achieve it. So that you can easily understand & change CSS class dynamically or runtime in your page by writing a simple javascript function.

Why you need to change CSS classname since you can change directly CSS property using javascript like:

The above javascript code will change your div background color. But think if you also need to change the font-family, font-weight, font-size, color etc. then you need to write individual line to change each property for each HTML element. So it will be better to encapsulate or keep all CSS properties in a class & then just change the CSS class name property by using javascript.

To do that first take a page then within the page body take a div to write a note on a specific issue. Then we will change the background color,font-color,font-weight etc. of this div by clicking on an input button using javascript.

Complete Example:

HTML Code:

<html>

<head>
<title>Dynamically change CSS</title>

<script type="text/javascript">

function changeCSS(sclassName)
{
document.getElementById('divTXT').className=sclassName;
}

</script>

<style>

.Aqua
{
background-color: Aqua;
font-family:tahoma;
font-weight:bold;
color:white;
}

.Crimson
{
background-color: Crimson;
font-family:tahoma;
font-weight:bold;
color:white;
}

.DarkGray
{
background-color: DarkGray;
font-family:tahoma;
font-weight:bold;
color:white;
}

.DeepPink
{
background-color: DeepPink;
font-family:tahoma;
font-weight:bold;
color:white;
}

.Fuchsia
{
background-color: Fuchsia;
font-family:tahoma;
font-weight:bold;
color:white;
}

</style>

</head>

<body>

<input class="Aqua" type="button" value="Aqua" onclick="changeCSS('Aqua');"/>

<input class="Crimson" type="button" value="Crimson" onclick="changeCSS('Crimson');"/>

<input class="DarkGray" type="button" value="DarkGray" onclick="changeCSS('DarkGray');"/>

<input class="DeepPink" type="button" value="DeepPink" onclick="changeCSS('DeepPink');"/>

<input class="Fuchsia" type="button" value="Fuchsia" onclick="changeCSS('Fuchsia');"/>
<br/><br/><br/>

<div id="divTXT" style="width:250px;">
In this article you will get tips on how to change HTML element class name property by using javascript.
To do that you must follow the complete example. Initially copy all code & paste in your page to make
exactl styles. After that try to change CSS properties & check the output. So keep trying....

</div>

</body>

</html>

Output:

Saturday, September 26, 2009

How to apply CSS styles in background

Please visit my new Web Site https://coderstechzone.com

The background of a website is the first priority, so please take your time to finalize background effects. If you are aiming for a professional website, a good rule of thumb is to use a light background with dark text. Since i am not graphics expert so that i can't suggest you graphics concept but i can give you the way, how we can apply CSS styles on a page when your graphics designer give you a home page & a child page. Your graphics designer supply you an image but your duty is to implement that image looks in your page in efficient way. Thats why CSS knowledge is required for you. Let your graphics designer provide you an image with texture from top to bottom for your page header. So what you do? Do you copy the image & paste it into your page? Nop this is not the right way. Just crop 1px width top to bottom image & think if you repeat this image horizontally then it will looks like a complete header which is provided by designer. It will faster your works, Save the page loading time which is more required. The following examples will show you how you can optimize your page loading time using CSS styles.

Focus Area:
1. CSS Background Color
2. CSS Background Image
3. CSS Background Image Repeat
4. CSS Fixed Background Image
5. CSS Background Image Positioning
5. CSS Gradient Background
6. CSS Background Shorthand Property

CSS Background Color:
The background-color property specifies the background color of an element like paragraph, div, list, header etc.

CSS Code:

div { background-color: magenta; }
p { background-color: #ff4450; }
h5 { background-color: rgb( 255,120,0); }

CSS Output:

This is the DIV block with background color "magenta".

This is the PARAGRAPH block with background color hexa code "#ff4450".

This is the HEADER block with background color rgb code ( 255,120,0).

Note: You can apply color name or hexcode or rgb in this property.

CSS Background Image:
If you want to set an image in your page background then first choose your image and copy the url path then paste the path into the element CSS properties. Keep in mind that by default the image is repeated through the entire element. You can specify your page backgound image in your body tag. Here i applied an image into a div like:

CSS Code:

div { background-image: url(bgstar.GIF); }
p { background-image: url(bgstar.GIF); }
h5 { background-image: url(bgstar.GIF); }

CSS Output:

This is the DIV block with background image.
This is the DIV block with background image.

This is the PARAGRAPH block with background image.
This is the PARAGRAPH block with background image.

This is the HEADER block with background image.
This is the HEADER block with background image.

Look at the output. I do not specify repetation but the background image has been repeated cause its a default property.

CSS Background Image Repeat:
As we knew that by default the image repitated both in horizontal and vertical direction. But sometimes you may need to repeat image either in vertical direction or in horizontal direction using CSS. Even no repetation may required. In the following example i try to cover each & every aspects.

CSS Code:

div { background-image: url(bgstar.GIF); background-repeat: repeat; }
p { background-image: url(bgstar.GIF); background-repeat: repeat-y;}
h5 { background-image: url(bgstar.GIF); background-repeat: repeat-x;}
span { background-image: url(bgstar.GIF); background-repeat: no-repeat;}

CSS Output:

THIS IS THE DIV FIRST LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV SECOND LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV THIRD LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV FOURTH LINE. SAME AS ABOVE EXAMPLE.
THIS IS THE DIV FIFTH LINE. SAME AS ABOVE EXAMPLE.

THIS IS THE PARAGRAPH FIRST LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH SECOND LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH THIRD LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH FOURTH LINE. REPEAT VERTICALLY.
THIS IS THE PARAGRAPH FIFTH LINE. REPEAT VERTICALLY.

THIS IS THE h5 FIRST LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 SECOND LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 THIRD LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FOURTH LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FIFTH LINE. REPEAT HORIZONTALLY.

THIS IS THE SPAN FIRST LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN SECOND LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN THIRD LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN FOURTH LINE. THIS IS THE EXAMPLE OF no-repeat.
THIS IS THE SPAN FIFTH LINE. THIS IS THE EXAMPLE OF no-repeat.

CSS Fixed Background Image:
When you need a scrollable element with background then the below example will help you lot. You can fix the background image. So that when user scroll vertically or scroll horizontally the image position will be fixed. You can also set the image scrollable. Look at the example below:

CSS Code:

div.bgfixed
{
background-image: url(smallPic.jpg);
background-attachment: fixed;
}

div.bgscroll
{
background-image: url(smallPic.jpg);
background-attachment: scroll;
}

CSS Output:

This is the first line with fixed image background.
This is the second line with fixed image background.
This is the third line with fixed image background.
This is the fourth line with fixed image background.
This is the fifth line with fixed image background.

This is the first line with scroll image background.
This is the second line with scroll image background.
This is the third line with scroll image background.
This is the fourth line with scroll image background.
This is the fifth line with scroll image background.

CSS Background Image Positioning:
If you look at my above example you see that the repeated same in both direction. But if you want to position an image in a specific location then you can follow my below example.

CSS Code:

div
{
background-image: url(bgstar.gif);
background-position: 100px 50px;
background-repeat: no-repeat;
}

div
{
background-image: url(bgstar.gif);
background-position: 50% top;
background-repeat: no-repeat;
}

div
{
background-image: url(bgstar.gif);
background-position: left top;
background-repeat: no-repeat;
}

CSS Output:

This is the first line with fixed image position 100*100 px.
This is the second line with fixed image position 100*100 px.
This is the third line with fixed image position 100*100 px.
This is the fourth line with fixed image position 100*100 px.
This is the fifth line with fixed image position 100*100 px.

CSS Gradient Background:
To make a gradient backgroud, first draw an image in either photoshop or any graphics tool. Then crop a portion of that gradient image & set allow repeat by applying css within HTML elements. To demonestrate the example here i am presenting you a slide:

Fig: Demonestrate how to slice a gradient image.

From above figure if you load the full image instead of sliced image then your page become heavy & will take longer time to load. Now just by applying CSS you can create long width gradient image with just a single few kb image.

CSS Code:

p
{
background-image: url();
background-repeat: repeat-x;
}

CSS Output:

This the first line to draw a gradient background.
This the second line to draw a gradient background.
This the third line to draw a gradient background.
This the fourth line to draw a gradient background.
This the fifth line to draw a gradient background.

CSS Background Shorthand Property:
I have demonestrated a lot of properties which is difficult to remember & requires more line in your CSS file. There is another way you can minimize the code to a single line by the following way:

Syntax:
div {background:background-color background-image background-repeat background-attachment background-position}

Example:
div {background:#ff4500 url('bgstar.gif) repeat top left}

Thursday, September 3, 2009

Common CSS styles for Text

Please visit my new Web Site https://coderstechzone.com

Its quite impossible to remember all CSS property to manage UI. The best way is create a css file & use it in your applications by modifying if needed. Most of the times we did this. Copy & paste. I am also can't remember thats why i am planning to enlist all common CSS properties in my blog so that i can find required properties when needed. I have almost in my project always try to use CSS to present UI instead of images. I can assure you that almost 80% time you can replace images by using CSS styles. So avoid image & try to CSS properly which will faster your page load. In this article i will concentrate on below issues:

1. CSS Text Color
2. CSS Text Decoration
3. CSS Text Indent
4. CSS Text Align
5. CSS Text Transform
6. CSS White Space
7. CSS Word Spacing
8. CSS Letter Spacing
9. CSS Line Height

CSS Text Color:
By using this property you can set the color of your text within a Paragraph or within DIV no matter. You can also define full page text color css in the body selector. Few sample usage of CSS to color your page Text is given below:

CSS Code:

body {color:white}
p {color:lightslategray}
div {color:gray}

CSS Output:

This is the body TEXT.
This is the body TEXT. Color name is "white".

This is the Paragraph. See the TEXT color lightslategray.

This is the DIV. See the TEXT. This is the paragraph TEXT & forecolor is gray.

You can also use color hex code or RGB to define CSS for your Text like:

p {color:#00CED1}
div {color:rgb(240,248,255 )}

CSS Text Decoration:
Tme main purpose of decorating text is to set underline for URL link or not. Another reason is CSS Text Decoration can apply horizontal line above, below or within the Text.

CSS Code:

a { text-decoration: none; }
span{text-decoration: line-through;}
p{ text-decoration: overline; }
div{ text-decoration: underline; }

CSS Output:

Asp.net Articles

Its span Text. See the CSS line-through effect.

Its Paragraph Text. See the CSS overline style effect.

Its Div Text. See the CSS underline effect.

CSS Text Indent:
By using CSS indentation you can easily achieve Text indent within a Paragraph or DIV or even SPAN. Its a common replacement of pre tag & white spaces.

CSS Code:

p { text-indent: 50px;COLOR: #c71585; }
div { text-indent: 100px;COLOR: #cd5c5c; }

CSS Output:

Its PARAGRAPH Text. See the CSS effect for indentation. Here i have used 50px. Did you see this effect? Its applicable within your PARAGRAPH. Whatever number of PARAGRAPH is in your page. CSS is smart enogh to apply styles in all PARAGRAPH of your page.

Its DIV Text. See the CSS effect for indentation. Here i have used 100px. Did you see this effect? Its applicable within your DIV. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

CSS Text Align:
If you didn't specify the alignment of text then bydefault text is aligned to the left. Within CSS we can use four types of alignment properties such as Left, Center, Right & Justified. Few uses of text alignment is given below:

CSS Code:

div { text-align:left; }
p { text-align:center; }
h5 { text-align:right; }
p { text-align:justify; }

CSS Output:

Its DIV Text. See the CSS effect for alignent. Here i have used LEFT Alignment.
Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

Its a paragraph. Here i used center alignment.

Its h5. Here i used right alignment.

Its PARAGRAPH Text. See the CSS effect for alignent. Here i have used justify Alignment. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enough to apply styles in all DIV of your page. Check this PARAGRAPH text with justify align. In this PARAGRAPH the TEXT is streched from LEFT to RIGHT with proper alignment.

CSS Text Transform:
Text transform is used to convert the line from upper to lower or lower to upper case. The Text-tranform also used to capitalized the first character of each line such as Nwspaper para.

CSS Code:

div { text-transform: capitalize; }
p{ text-transform: uppercase; }
span{ text-transform: lowercase; }

CSS Output:

Its DIV Text. see the CSS effect to transform Text. Here i have used Capitalized CSS style. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page.

Its DIV Text. See the CSS effect TO TRANSFORM TEXT. Here i have used UPPERCASE TRANSFORMATION. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this div text with left align div. In this div the TEXT is streched from LEFT to RIGHT with proper alignment.

Its DIV Text. See the CSS effect to transform text. Here i have used lowercase transformation for TEXT. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this div text with left align div. In this div the TEXT is streched from LEFT to RIGHT with proper alignment.

CSS White Space:
The White Space CSS property specifies how one can handle white-space inside an element. You can prevent text wrapping or not by using this CSS property. CSS for white space, just keep in mind that if you use "white-space: nowrap;" then the browser doesn't render break until br tag found. The opposite is true for "white-space: wrap;" means browser automatically render break within the specified area even if you does not write br tag within the text.

CSS Code:

p { white-space: nowrap; }
div { white-space: wrap; }

CSS Output:

Its PARAGRAPH Text. See the CSS effect for White Space. Here i have used nowrap CSS. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this PARAGRAPH text that CSS does not wrap the text until page break appeared. Whether if you look at the below section then you will found that CSS wrap the text whatever page break found or not.

Its DIV Text. See the CSS effect for White Space. Here i have used wrap as CSS. Did you see this effect? Its applicable within your DIV, Span, Paragraph & as well as as for Headers. Whatever number of DIV is in your page. CSS is smart enogh to apply styles in all DIV of your page. Check this DIV text that CSS wrap the text whether page break found or not.

CSS Word Spacing:
Here i will show you how we can specify the space between words. If you see my posts you will get a lot of example on Word Spacing. Here i will show you another example on CSS Word Spacing.

CSS Code:

p { word-spacing: -1px; }
div { word-spacing: 10px; }

CSS Output:

THIS IS A TEST TEXT WITH WORD SPACING -1 PX.

THIS IS A TEST TEXT WITH WORD SPACING 10 PX.

CSS Letter Spacing:
Here i will show you how we can specify the spacing between Letters. If you see my posts you will get a lot of example on Letter Spacing. Here i will show you another example on CSS Letter Spacing.

CSS Code:

p { letter-spacing: -1px; }
div { letter-spacing: 5px; }

CSS Output:

THIS IS A TEST TEXT WITH LETTER SPACING -1 PX.

THIS IS A TEST TEXT WITH LETTER SPACING 5 PX.

CSS Line Height:
Yes you can also control paragraph line height by using CSS line height property. Specially most of the developer use graphich tools to generate header & sub header images for a page. But most of the times i think that if anyone knows CSS power then he can reduce almost 80+% of images from a page. Which will give you the most expected faster loading.

CSS CODE:

p{line-height:50%}
p{line-height:80%}

CSS Output:

THIS IS A TEST TEXT WITH LINE HEIGHT 50%.
THIS IS A TEST TEXT WITH LINE HEIGHT 50%.

THIS IS A TEST TEXT WITH LINE HEIGHT 80%.
THIS IS A TEST TEXT WITH LINE HEIGHT 80%.

Want To Search More?

Newer Posts Older Posts Home



Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash

.NET Mixer

Sunday, September 27, 2009

How to change CSS class name using javascript

Please visit my new Web Site https://coderstechzone.com

Saturday, September 26, 2009

How to apply CSS styles in background

Please visit my new Web Site https://coderstechzone.com

This is the HEADER block with background color rgb code ( 255,120,0).

This is the HEADER block with background image.This is the HEADER block with background image.

THIS IS THE h5 FIRST LINE. REPEAT HORIZONTALLY.THIS IS THE h5 SECOND LINE. REPEAT HORIZONTALLY.THIS IS THE h5 THIRD LINE. REPEAT HORIZONTALLY.THIS IS THE h5 FOURTH LINE. REPEAT HORIZONTALLY.THIS IS THE h5 FIFTH LINE. REPEAT HORIZONTALLY.

Thursday, September 3, 2009

Common CSS styles for Text

Please visit my new Web Site https://coderstechzone.com

Its h5. Here i used right alignment.

Blog Archive

This is the HEADER block with background image.
This is the HEADER block with background image.

THIS IS THE h5 FIRST LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 SECOND LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 THIRD LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FOURTH LINE. REPEAT HORIZONTALLY.
THIS IS THE h5 FIFTH LINE. REPEAT HORIZONTALLY.