Rounded Corners by CSS

Getting bored by doing rounded corners with the images, then here is css property for the rounded corners.

For that we need border-radius.htc file.

Follow the below steps:

1. Make class for the div. for eg: rounded_corner

2. Give following css properties.

.rounded_corner{
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(Script/border-radius.htc);
border:1px #c0c0c0 solid;
background:#FFFFFF;
}

3. Use this class for which you wanted rounded corners.

This will help you to reduce the images and also to download the page faster.

Transparent PNGs in Internet Explorer 6

Hello friends,

We always find issues of PNG in Internet Explorer 6. But Internet Explorer 7 resolves this issue completely. Then also some times we have to fight with Internet Explorer 6.

So here is the css style for the same:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/transparent.png’, sizingMethod=’scale’);

For example:

<div style=”filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/transparent.png’, sizingMethod=’scale’)”>

Your site on mobile

Are you aware of mobile display?
We can see our site on mobile device also!!!
Today’s world is most probably mobile users’ world. Everyone is carrying mobile.
So it’s easy to us to look site on mobile, no need of your computer….

So it is a warning bell to wed developer to make their site in manner that can be accessed by potential customers using this device. We don’t know what will be device of our customers? So developer has to prepare for this also.

Developer has to take care about their site as following manner:-

• Is your site is W3C (World Wide Web Consortium) validated?
• Is your site carrying heavy images and heavy flash banners?
• Does it take maximum time to download?
• And last but not the least navigation is proper or not?

If developer wants to see their site on mobile then there is site “http://www.skweezer.net” which converts your current site into a mobile device format. Enters your website’s URL , and it will display your web site in a mobile display format by removing large images, CSS styles and page elements that will not display properly.

To proper look on mobile device we have to add following code in a head tag of the html document:
<link href=”/css/global.css” rel=”stylesheet” type=”text/css” media=”handheld” />

Ready made CSS

Hey, give a look on this site. It will give you ready made CSS style.
Here we can control on style.
Here are various options on which we can apply style control.
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Introduction to CSS

Css ( Cascading Style Sheet )
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language.

• Styles define how to display HTML elements.
• Styles are normally stored in Style Sheets.
• Styles were added to HTML to solve a problem.
• External Style Sheets can save you a lot of work.
• External Style Sheets are stored in CSS files.
• Multiple style definitions will cascade into one.

How styles solve a Common Problem?

• Styles sheets define HOW HTML elements to be displayed.
• Styles are normally saved in External file, so changes can apply to all the pages.

Style sheets specified in many ways.
Cascading Order

1. Browser Default
2. External Style Sheet
3. Internal Style Sheet
4. Inline Style

CSS Syntax
Selector {property : value}
For example: -

P { Text-align: center;
Text-color: black;
Font-family: arial;
}

Css group selector
You can write group selector with a comma.
For example: -

h1, h2, h3, h4, h5, h6{
Color: black;
}

CSS Class Selector
The Class Selector :-
You can define different style for the same type of HTML elements.
Class is defined as a “.”
For example :-

p.right{
text-align: right;
}

CSS ID Selector
ID Selector :-
The ID is defined as a #.
Do NOT start an ID name with a number!
For example :-

#yellow{
Color: yellow;
}

How to insert Style Sheet?
1. External Style Sheet

• It is ideal way when the style is applied for many pages.
• Each page must link to style sheet using by “<link>” tag in head section.
  <head>
  <link rel=”stylesheet” type=”text/css” href=”mystyle.css />
  </head>
• Style sheet can be written in any text editor.
• Style sheet should be saved with a .css extension.

2. Internal Style Sheet

• It is used when a single document has a unique style.
• You can define in head section using <style> tag.<head>
  <style type=”text/css”/>
  Hr{color: blue}
  Body { background-image: url(“images/bg.gif”)}
  </style>
  </head>

3. Inline Style Sheet

• This style sheet loses many of advantages by mixing content with presentation.
• Use this style sheet when it applied for a single document.
• Normally used for Newsletter pages.
  <p style=”color: red; margin-left:20px”>
  This is a paragraph.
  </p>

CSS Length and Percentages
Property-specific units for value :-

• em : calculated size of font (font-size : 2em)
• px : unit for pixcel (font-size : 2px)
• pt : unit for points (font-size : 2pt)
• % : unit for percentages ( font-size : 2%)
• Other units are : pc (picas), cm (centimeters), in (inches)