In this article, I will be showing you how to add or change css styling. You will be able to add or remove class in HTML elements.

VIEW DEMO

Here is my html code:

<div>
	<span>Sample text!</span>
	<br />
	Testing!
</div>
<br />
 
<div>Click me</div>

As you can see above, I have a div with id ‘content’. I have ‘Sample text!’ inside span. And I have a div with id ‘clickme’.

Here is CSS class to be used:

.hover {
	text-decoration: underline;
	cursor: pointer;
	color: #003399;
	font-weight: bold;
}

Here is the magical jQuery function :)

$("#clickme").hover(function(){
	$(this).addClass("hover");
}, function(){
	$(this).removeClass("hover");
});

Here, ‘hover’ function is used. It means that, when we hover on ‘Click me’ div then the CSS class ‘hover’ is added to the ‘clickme’ div. The ‘hover’ class will change the color, font-weight, etc. of the div text ‘Click me’.

Now, when we click the ‘Click me’ text, then the CSS styling is added to the div ‘content’. The new styling will change the text of div ‘content’ to green in color and it also increases the font size. The following jQuery code is used:

$("#clickme").click(function(){
	$("#content").css({"color":"green","font-size":"20px"});
});

VIEW DEMO

Cheers,

.

If you want to develop great looking websites and want that to be easy to maintain you must follow certain rules in writing markup and CSS. Those sites requires high quality markup and styling. The most fundamental principle to remember while designing is separating presentation and the content or style & markup. Separation is the key a good designer need to build a good markup to produce good CSS.

1. Treat Markup and CSS as development objects
Good markup and CSS is time consuming to produce and minor changes or mistakes can do serious damage to you work. Like any other development artifacts, CSS files should start with a well structured header. Both markup and CSS files should contains a title, a revision, a time stamp, and a description or any other information the designer wants to keep like copyright and license terms.

	/************************************/
	 My Site THEME
	 Copyright 2010, DesignGala
	 URL: www.designgala.com
	 AUTHOR: Mr. S@R0Z
	 DATE: 31 Jan. 2010
	 REVISION: 1.0
	/************************************/

2. Build up a library of most used designs
Starting with a blank page every time would not be very effective. It a time consuming process and it would cost a lot. Rather starting from the scratch you can create certain layouts which can be used time and again like:
• 2-column layout
• 3-column layout
• blog layout
• print layout etc.

3. Define basic guidelines and naming conventions.
Having a set of basic guidelines for how to write your CSS is recommended because it will make your code more logical and standardized. Basic guidelines can consist of any rule you find valuable for you and your team. I would recommend considering the following:

– Hyphens Instead of Underscores: Use lowercase characters to define your class and use “-” or uppercase letters to separate multiple-words classes (e.g. “main-container”, or “mainContainer).

– Use structural naming: Properly name your page segments and avoid at all cost to use presentational naming. (E.g. Use sidebar and not right-column). Presentational naming prevents you from having names in your markup that actually describe what the elements are.

4. Use whitespace carefully but have proper indentation
Whitespace, including spaces, tabs, and extra line breaks, is important for readability of your CSS code. However, whitespace does add to page weight and you should be careful not to add whitespace that is not needed.

To make your code easy to read while you work on it and if you provide it for others to maintain use proper indentation. Code that is not well structured can be almost impossible to read so it is worth the effort to maintain some kind of formatting.

Unmanaged CSS

.div #container { width: 780px; background: #FFFFFF; margin: 0 auto;
border: 1px solid #000000; text-align: left; }

Managed CSS

.div #container
{
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

5. Use Optimized CSS Code
You can optimize the CSS by grouping selectors that have the same properties. Each selector should be separated with a comma rather than writing same code separately.
E.g.

h2, h3, p, .block {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 url(bkg.gif) no-repeat 5px 10px;
}

6. Use Shorthand properties
Like grouping elements to re-use styles makes you write less code you should always use shorthand properties. Several key CSS properties that you use over and over again support use shorthand: margin, border, padding, background, font, list-style, and even outline.
E.g.

/* CSS */
p {
margin-top: 5px;
margin-right: 10px;
margin-bottom:  15px;
margin-left: 20px;
}

//Should be replaced by:
p { margin: 5px 10px 15px 20px; }

7. Set up typography in CSS
It should be clear to anyone that applying style (fonts, size, color alignment etc.) directly in the markup is bad practice and not a durable solution. It may look right but it’s a pain to maintain. Typical Typographic effects in CSS are: Size, Case, Style, Color, Alignment etc.

E.g.

/* Having only CAPs in headers or menus is typography
and should be left to CSS. */
 
<a href="/">FRONT</a> /* Not Directly in HTML like this */
 
<a href="/">Front</a> /* Just content in HTML and Design on CSS */
 
/* css */
a
{
	text-transform:uppercase;
}

8. Validate & fix the bugs

Before putting a new design live you should validate that your CSS is OK and get rid of any mistakes you may have made because even small mistakes in markup and CSS results different outputs in different browsers. A designer should eliminate those bugs to make the product final and perfect. You can use relevant validation tools.

Tools
- The W3C Markup Validation Service
- XHTML-CSS Validator

9. Document your work
First thing you should take serious is in-line comments in the CSS code. A designer can also make separate documentation of the template s/he is developing.

<!-- markup -->
 
<!-- This is how you insert documentation in the code -->
<!-- css -->
/* In CSS this is how you insert documentation in the code */
 
/***** Initialize to 0 *****/
*{
 border: 0;
 margin: 0;
 padding: 0;
}
 
/***** Style for the page header *****/
 
Header{
	…
	}
 
/***** Style for the displaying Menu *****/
menu{
	…
	}

Website is the best online platform for the promotion of business or services. So the greatest necessity of website is its design. Design needs to be eye catchy and attractive enough so that the visitors stop by to browse through your site. A visitor hardly stays on a website for less than 5 seconds or so if the design is not catchy. So a web designer has to be careful enough to turn the first impression of the site into a good one. Acquiring designing skill is very important for a beginner which can be developed and polished with rigorous practice.

The web layouts, the look and feel of the website as well as many other things are taken into consideration for website designing. A proper knowledge and skill to use the web designing tools are essential for any web designer.

First simple technique

We can create a pagination style similar to flicker with the following CSS .

<!--
<html>
<style>
 
ul{border:0; margin:0; padding:0;}
 
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}
</style>
<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>
 
-->

Example:
code:

<!--
<p class="tborder"><br />"Man and MOON"<br /><br />
<style>
.tborder{
    border-style:solid;
    border-top-color:rgb(170, 204, 255);
    border-bottom-color:rgb(16, 92, 182);
    border-left-color:rgb(128, 182, 42);
    border-right-color:rgb(128, 182, 149);
    border-width:20px;
    border-top-width:10px;
    border-left-width:10px;
       }
</style>
-->

1. Using span tag to style the first letter
2. Using pseudo element :first-letter

1. Using span tag to style the first letter

.firstletter {     display:block;     float:left;     margin: -0.63em 0.5em 0 -0.56em;     height : 4.5em;     color:#aaa;   }
.firstletter span {     font-size:200%;     line-height:1.0em;   }
.firstletter + span{     margin-left  : -0.5em;   }

You might be interested to know about + sign in above CSS code. It is adjacent-sibling selector that was introduced in CSS 2. Adjacent-sibling targets an element directly after another element with the same parent.

How to Use it?

<span class="firstletter">
  <span>W</span>
</span>hen was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.

You can view Live Demo here.

2. Using pseudo element :first-letter

Most of the sites use span technique for the drop cap first letter. With invent of CSS 2, the :first-letter pseudo-element was introduced for this purpose. It’s easy creating drop caps with :first-letter. Most of the latest browsers supports :first-letter pseudo element.

p:first-letter {
font-size:400%;
display:block;
float:left;
margin: 0.06em 0 0;
height:3.5em;
color:#ccc;
}

How to Use it?

When was the first time drop caps first letter introduced in newspaper, magazine? But its been a quite while the trend of drop cap used in web business. First letter drop cap can be achieved in many ways.

You can view Live Demo here.

Inside the STYLE tag, we added style for paragraph, and suffix it with the code :first-letter, and whatever declarations that follow will be applied to the first letter of that paragraph.

Some fix might be needed for cross browser compatibility.

Below are list of one line CSS. One line CSS mentioned below may or may validate web standards and web accessibility rules.

1. Set default margin and padding to all elements

* {margin: 0; padding: 0}

Every element that have not assigned margin or padding will have default value of above.
Some CSS designers argue that this is not necessary at all because all CSS element at the end will have their assigned value.

2. Set image border to zero

img, a img { border: 0; }

This can be used to prevent any linked images from displaying borders.

3. Remove Firefox’s link border

a:active, a:focus { outline: 0; }

This removes dotted outline from focused or active links on firefox.

4. Scrolling Render IE

html { background : url(null) fixed no-repeat; }

5. Prevent line breaks in links, over sized content to break

a{ white-space:nowrap;}
element { overflow:hidden; }

This trick prevents line breaks on links.

6. Centering block elements horizontally

element { margin:0 auto; }

This one line CSS horizontally centers a block level element.

For IE less than 7, following line should be added though.

element { text-align: center; }

7. Show Firefox scrollbar

html{ overflow:-moz-scrollbars-vertical; }

8. Remove textarea scrollbar in IE

textarea{ overflow:auto; }

<style type="text/css">
.iframe_class{
    height:150px;
    width:300px;
    overflow:auto;
    color:#fff;
    background:#369;
    border:1px solid #33a;
    padding: 3px;
}
</style>

Somewhere in body, we can use above created iframe_class selector in following way.

<span class="iframe_class">Some Text Goes Here.. Dummy Text.</span>

Download Example:
Example of Creating Iframe in CSS

Why are we being like an ostrich? Is it because, we just wanted to earn money and forget all the things behind? Or Is it because clients here are unaware of the web standards? Or no one knows about the benefits that we could achieve with building web with web standards? Or there are other factors or reasons?
Even most popular and mostly viewed site do not follow web standards. For example
1. eKantipur, claims oneself as number one news site uses frame and heavy graphics.
2. Cyber Sansar, a popular entertainment site has heavy graphics and is built with HTML 4.0 transistional.

There are numerous other popular sites that does not even passes the W3C validation. A lot of work is yet to be done. These site has to come with as an example for others. Other follows these popular sites.
So, lets not use deprecated features. Lets upgrade and update ourselves. Lets build web applications that meet web standards.
What is Web Standards?

The W3C along with other groups and standards bodies, established a framework for creating and interpreting web-based content. These framework are web standards. These are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web. Designing and building with these standards simplifies and makes site accessible to more people and more types of Internet devices.

We should follow the basic guidelines of W3C. Its not compulsory that you should build sites with XHTML Strict and CSS 2.0. But make sure to follow primary rules to build pages.
Most of us Ignores

1. Declaration of doctype at the beginning of page
2. capitalizing of HTML tags
3. missing of proper alt and longdesc attribute in image tag.
4. Improper nesting of HTML tags

and other follows………. (if you know please state others mistakes we commit as well)