Your site on mobile
June 29, 2007
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
June 16, 2007
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
A Friend
June 16, 2007
Header Banners
June 16, 2007
Draw cartoon step by step.
June 6, 2007
Hey, here is nice tutorial to learn to draw cartoon step by step.
http://www.cartooncritters.com/learntodraw.htm
Introduction to CSS
June 5, 2007
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
- Browser Default
- External Style Sheet
- Internal Style Sheet
- 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)
