Tag Archives: css

iPhone CSS

This CSS to be used to display website nicely on iPhone. Not tested on Android and other smart phones.

Add this code on top of what ever css style you have.

1
2
3
4
5
<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/images/money.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

In iphone.css file, just write the css code. For example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,td,input,textarea,select,label { font-size: 6em;}
mainlink {font-size:3em; }
body {
background-color: #fff;
}
 
.header, .footer {
width: 100%;
}
 
.sidebar {
display: none;
}
 
.mainlink {	color:#FFFFFF; font-size:150%; }
 
.mainlink A:link {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:visited {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:active {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:hover {text-decoration: underline; color:#FFFF66; }

Create a printer-friendly page

Easiest way to create a printer friendly page is by creating another css file. What I did is just removing the heading style.

CSS (save the CSS file as style-print.css)
#header is id for your header (div or table)

1
2
3
#header {
   display: none;
}

In HTML add this line

1
<link rel="stylesheet" href="style-print.css" type="text/css" media="print" />

Basic CSS template

This CSS can be used as default css for your website. It contains most standard HTML tags. Can further edit from here. I’ll add more common tags in future. Please let me know if I missed any other important HTML tags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
margin:0;
}
 
body,p,td,input,select,div {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
 
h1 {
font-size:200%;
}
 
h2{
font-size:180%;
}
 
hr {
height:1px; border:#CCCCCC thin solid;
}
 
a:link {color: blue; text-decoration: none; }
a:visited {color: blue; text-decoration: none; }
a:hover {color: blue; text-decoration: underline; }
a:active {color: blue; }
 
.linethrough { text-decoration:line-through; }
.underline { text-decoration:underline; }
.smallfont { font-size:80%; }
.smallerfont  { font-size:70%; }
.highlight { background-color:#FFFF00; }