It is identification name of an element .

But What's New with html 5 id attribute ?

Well we all know that html 4.01 was  pretty restrictive regarding what values are allowed for id attributes

There is some good news :-

In html5 you can enter almost anything in the id attribute.

That means you can insert (. , : anything in id attribute)

But it is recommended to keep your coding clean and understadable.

Html5 id is a post from: IdealProgrammer.com

Related posts:

1. Subquery ALL SQL Server Example: Subquery ALL modifier Example Subquery ALL SQL Server Example: Subquery ALL modifier Example...
2. css advanced selectors Combinators The advanced combinators allow you to define styles that...

Related posts brought to you by Yet Another Related Posts Plugin.

But it is important to keep in mind some basic things about images when it comes to designing webpages using images

#Tip1 Never use absolute paths for images because incase that link is dead your webpage will look awful instead use relative paths .

Note: We have done a tutorial on relative and absolute paths

#Tip2 Never resize image using height and width properties of image tag because these attributes do resize the images but first the browser has to load the original image completely then browser resizes them so if the image is large webpage takes time to load . So you can resize them in photo editing tools and then upload them to your website.

#Tip3 Always give descriptions to images incase if your image dosnt work or if some one is facing problems to retrieve big images in mobiles etc they can see the small description (alt attribute)

If you have more tips and suggestions do tell us at idealprogrammer forums !!

How to use images correctly in html is a post from: IdealProgrammer.com

Related posts:

1. How can you style your html content area If you are deciding to make your own website or...
2. Absolute and Relative path for beginners When you're creating links to documents and images on the...
3. Images Example JavaScript (JS): HTML DOM Object Collections – Images Example JavaScript (JS) Images Example JavaScript (JS): HTML DOM Object Collections - Images...

Related posts brought to you by Yet Another Related Posts Plugin.

First thing is to select a good background color.

Note: That if select the  background-color you may also need to change the color(fore color) so that it can be viewed .

Second thing is to give your body a little margin . Giving margin is a nice idea which makes the webpage look so great .

Third thing is to select an background image which is optional but it enhances your website's background . You can also set the position of your background image by using background-image property .

Note:If you use background image and background color (both) you will still see background color . But if your background-image is too large then you need to resize it to make the background-color visible.

The next thing that comes in is to give the text(default text) a style and font style which can include different fonts , font effects etc.

These are some basic things you should keep in mind to design good webpages .

Please provide us feedback and suggestions at idealprogrammer forums

How can you style your html content area is a post from: IdealProgrammer.com

Related posts:

1. Style Attribute Example – HTML Syntax – HTML Style Example Style Attribute Example - HTML Syntax - HTML Style Example...
2. How to make buttons in css using links I Discovered a new way to create buttons in webpage...
3. create a social network menu using html In this tutorial, we will show you how to...

Related posts brought to you by Yet Another Related Posts Plugin.

So what we will do in this tutorial is that we will make a link and style it as a button .

So first create a link

<code>

<a href=http://www.idealprogrammer.com > Idealprogrammer </a>

</code>

Now we will style this a tag with css

<code>

a {

padding:5px;

 text-decoration:none;
    

 background-color:#0CF;
 border:1px solid #F00;

</code>

Note that you can also sue background-image isntead of background-color to enhance your button .

We used the text decoration:none; to remove that underline which is enabled by default in links in html document .

Then we also made a 1px red color border and we gave it padding 5px too .

If you liked this article please provide us feedback and give suggestions at idealprogrammer forums

How to make buttons in css using links is a post from: IdealProgrammer.com

Related posts:

1. Links Example JavaScript (JS): HTML DOM Object Collections – Links Example JavaScript (JS) Links Example JavaScript (JS): HTML DOM Object Collections - Links...
2. create a social network menu using html In this tutorial, we will show you how to...

Related posts brought to you by Yet Another Related Posts Plugin.

In this tutorial, we will show you how to create a social media share menu using CSS and jQuery. We are going to create the menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Create the HTML
1 Let’s create the HTML first. Here is our markup.

Style the HTML with CSS
This is how our menu looks without any CSS.

Notice that there is a CSS class added to each link in our HTML. For example: delicious, facebook, and so on. We use different classes so that we can give the links their own icons on the left (more on this later).

2 We will make the list items display side by side by using the float property. Also, we have added some padding to the link elements (#social_nav_horizontal ul li a), including 28px padding on the left so that when we add the background, there is enough space for the social media icons.


#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8e9090;
}
#social_nav_horizontal h3 {
display:inline;
padding: 0px 10px;
border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top:20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}


Here’s how our menu looks with the above CSS style declarations.

3 After that, we add the CSS background to each class. You can use your own social media icon sets or check out the Freebies section here on Six Revisions to find free social media icons. Note that you will have to adjust the background-position and the left padding of #social_nav_horizontal ul li a depending on the sizes of the social media icons you use.

Here is the CSS for the first social media link (Delicious).

.delicious {
background:url(images/delicious.png) no-repeat;
background-position:0px -1px;
}


Here is the visual representation of this code:

4 We add a CSS declaration for each of the social media links.

.delicious {
background:url(images/delicious.png) no-repeat;
background-position:0px -1px;
}
.facebook {
background:url(images/facebook.png) no-repeat;
background-position:0px -1px;
}
.stumbleupon {
background:url(images/stumbleupon.png) no-repeat;
background-position:0px -1px;
}
.twitter {
background:url(images/twitter.png) no-repeat;
background-position:0px -1px;
}


If everything is right, here is how it should look.

credit goes to sixrevisions

create a social network menu using html is a post from: IdealProgrammer.com

Related posts:

1. Integrate joomla with facebook Do you want to integrate joomla with facebook for things...
2. Photoshop – create cs3 icons Step 1 When I want to create an effect that...

Related posts brought to you by Yet Another Related Posts Plugin.

I am assuming you already know html and learning html is important for learning css .

From where to start ?

First you might ask what is css ?

css is basically a language which is used to control the look and presentation of the html content or webpage.

we first write the basic content like parragraphs,headings etc and then we use css to design them .

You might also ask so why do we need 2 different languages for webpages one for basic content (html) and one for presentation(css).

Well for this you may want to know about browser wars .
see here – http://en.wikipedia.org/wiki/Browser_wars

After reading that i am sure you will know the answer .

So now that you know 1% about the css . You can learn new things about it but before that you will need

A simple text editor (notepad is recommended but if you use a text editor which highlights the syntaxes will be better)

A latest webbrowser (you can choose any)

And Idealprogrammer forums if you want to discuss about css and other languages also tell us if you are facing any problems while learning css

After this you can see some this website for all css properties but remember do it one by one and if you are facing any problem stop there only and free feel to post your problem in idealprogrammer forums .

http://webdesign.about.com/od/csstutorial/CSS_Tutorial.htm

Beginning css is a post from: IdealProgrammer.com

Related posts:

1. Best posts on Visual Studio, Visual Basic.NET, C# Database, SQL Server, and ASP.NET Video Tutorials from Jul 2009 Too many posts to handle? If you missed out on...
2. Process Explorer Do you want to see if your file or program...
3. Update : Idealprogrammer forums We are upgrading idealprogrammer forums so please be patient ....

Related posts brought to you by Yet Another Related Posts Plugin.

p em {font-size: larger; }

This rule will affect all em elements inside paragraphs. This is very useful, but also relatively simplistic. Combinators allow you to state the required relationship between two elements.

Adjacent Sibling CombinatorThe adjacency combinator (a plus sign, +) allows you to style an element if it has been directly preceded by another specified element. This comes in very handy when working out margins and such. For instance, you may give your headings large margins so they stand out from normal text, but if two headings come one after the other, you may want to control the margin between them as a special case, like so:

h1, h2 {margin: 3em 0; }
h1 + h2 {margin-top: 1em; }

Child CombinatorThe child combinator (denoted by the greater-than symbol, >) can be used to combine two elements, and will only be applied if the second element comes directly after the first. It looks like this:

p > em {font-size: larger; }

This will affect all elements which occur as children of paragraphs, but not those that have another parent element in-between (which would make the em a grand-child or more). In the example below, the first em element would be styled, but the second would not, as it is inside an a element — and therefore not directly below the p element:

Do not visit this page!

Universal SelectorThe universal selector (denoted by a star, *), affects every element on a page.

* {color: #bb0; }

IE6 supports the universal selector. In most cases it can be omitted as it is implied by inheritance. The two rules below are equivalent:

* p {text-indent: 2em; }
p {text-indent: 2em; }

However, it does become useful when used in concert with the child combinator, as it can take the place of any element which may occur in between two others, as in

p > * > em {font-size: larger; }

A rule like this would allow the second em element in our example above to be styled, but not an em which was inside a further element, as in a case like

Seriously, do not visit this page!

It should be apparent that you can chain any of these rules together into a single complex rule.

Attribute Selectors
CSS2 also allows you to apply styling to an element based on the attributes it has defined in it, or even based on the values of these attributes. Firstly, to select the elements with an attribute defined, you infix the attribute name surrounded by square brackets:

abbr[title] {border-bottom: 1px dashed #0c0; }

This would apply styling to all abbr elements which have the title attribute, whatever its value. Taking this a step further, you can select an element that has a precise value specified:

a[href="http://www.yourhtmlsource.com/"] {font-weight: bold; }

This rule will match a link with the exact href of ‘http://www.yourhtmlsource.com/’. Note that the value is wrapped in double-quotes.

While this could quickly make your CSS file very big and clumsy-looking, it’s undoubtedly a useful power to have at your disposal. This selector comes into its own when you’re styling an XML document, where much of an element’s information may be written in as an attribute value.

There’s also a basic pattern-match selector which can look for a single word in an attribute’s value. If the value is a space-separated list (a sentence, in other words), you can write a rule to look out for certain words.

a[title~="Mail"] {text-decoration: none; }

The operator in use here is a tilde (~) followed by an equals. It would match something like

Send me title="Mail me">email.

You can link many attribute selectors into a single rule to find a specific element:

p[align="right"][class="intro"] {line-height: 1.8em; }

Pseudo-classes
Despite all the different elements you can get to with the selectors above, there are parts of a document that don’t exist as elements by themselves — they are merely parts of elements, or elements in a particular state, like the first line of a paragraph, or a form field that has been focused on. CSS pseudo-classes and pseudo-elements allow access to these otherwise inaccessible things.

You may have already seen the link pseudo-classes, :link, :visited, :active and :hover. These serve as a good introduction as to how pseudo-classes work — a link becomes classed with a:active when it is clicked on, but there is nothing in the HTML document that makes it so.

Dynamic Pseudo-classesWhile :hover has been seen before on links, the specifications allow this class to be applied to any element. This means you can highlight a paragraph or quotation when the user mouses over it. There are many interesting applications for this property. Set it up like this:

p:hover {border: 1px solid #0c0; }

The :focus class is activated when a user clicks on or tabs to an element, usually a form field or link. Highlighting a form field while the user is filling it in is a nice interface effect.

input:focus {background: #ffe; border-color: #c00; }

These pseudo-classes are not what’s called ‘mutually exclusive’ — that is, an element can have one or more of these classes activated at once. To style an input that is focused and being hovered on, write

input:focus:hover {background: gold; }

Structural Pseudo-classesCSS allows access to child elements based on their position inside a parent. CSS2 included the :first-child class, which was added to an element if it was the first tag inside another element. The selector below would add style to the first paragraph in the example HTML, but not to the second one:

div#intro p:first-child {font-size: 110%; }

CSS3 took this two steps further, by adding the :last-child and :nth-child classes. The former is simply the last element to occur within its parent. The :nth-child element is more complex — allowing access to either a numbered element, or allowing you to cycle through multiples of a number. This means you could style every third row of a table differently, for instance.

In the examples below, first I style the fifth paragraph in a blockquote. The second selector will match every second row in a table. Remember that the :first-child is numbered 1.

blockquote p:nth-child(5) {color: gold; }
table tr:nth-child(2n+1) td {background: silver; }

To simplify the calculation, you can use the values odd and even: p:nth-child(odd).

Pseudo-elements
Pseudo-elements allow you to style fictional elements which don’t actually exist in the HTML code, like the first line of a paragraph. Pseudo-elements can only be the subject of the selector (the right-most element).

Textual Pseudo-elementsThe ::first-line element can be used with any block-level tag, and applies to the first line of text running across the screen. If the window gets smaller and some words drop down onto the next line on the screen, they are no longer part of the ::first-line. This element is useful to bring in the commonly-used practice of capitalising the first few words of an opening paragraph:

div#content p:first-child::first-line {text-transform: uppercase; }

Similarly, the ::first-letter pseudo-element gives access to the opening letter of any element. This is useful in creating ‘drop-caps’ — the large letters normally seen at the start of newspaper stories. If the first character in the element is an opening-quote mark, it is counted as part of the ::first-letter, along with the letter that comes after it.

p::first-letter {font-size: 200%; padding: 3px; border: solid black; border-width: 1px 0 0 1px; }

Original article at http://www.yourhtmlsource.com/stylesheets/advancedselectors.html

css advanced selectors is a post from: IdealProgrammer.com

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

So what is actually fixed positioning

Well you may have noticed that mosft often footer are seen at the bottom of the page . But if they are positioned using fixed positioning they will be in that position no matter you scroll or not . They will be at the same position as you mentioned .

So is fixed positioning good ?

Yes why not ? it can help us in many situtations and footers are common examples .

what is fixed positioning in css ? is a post from: IdealProgrammer.com

Related posts:

1. String.Fixed Example – JavaScript Syntax – JS String.Fixed Example String.Fixed Example - JavaScript Syntax - JS String.Fixed Example...
2. Maths and programming Well This may sound little bit silly but cartesian plane...

Related posts brought to you by Yet Another Related Posts Plugin.