With all the diff erent kinds of style combinations you may have to consider — including diff erent formats for desktops, laptops, and small mobile screens — the work involved in creating a good style sheet or set of style sheets can be considerable. By saving your CSS3 work to a text fi le, you can reuse your style sheet as oft en as you want. Plus, you can copy your embedded CSS and easily paste it into a text fi le and save it as a .css fi le.
For example, let’s take a color scheme with a set of colors that a corporate client, Mighty Smite Web Development, has described as the corporate palette. (Th at means you can use only the set of colors provided.) You start with the following company colors:
#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205
Th e background color must be #F2CC6E. You don’t have to know what the color is — you just have to know that the company has decided that it’s going to be the background color. You’re told that the designers can fi gure out the rest.
Further, you’re told that they’d like a version that looks good on a phone and a diff erent one that looks good on a desktop. So, that means you’re going to need two diff erent CSS3 style sheets. Later on, you’ll worry about how the browser is going to know whether the user is viewing from a desktop with a screen the size of a drive-in theater or viewing from a Droid phone.
All that’s required is the following tag:
<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” />
Th is tag goes in the <head> container where the <style> tag had gone along with the CSS3 code. Now the CSS3 code goes into a separate fi le. Notice that the <link> tag contains an href attribute assigned the value mightySmiteSmall.css. Th at’s the name of the CSS3 fi le in this chapter’s folder at www.wiley.com/go/smashinghtml5. Th e
Small indicates that it’s designed for mobile devices. Another CSS3 fi le will be created called
mightySmiteLarge.css for non-mobile devices.
To create a CSS3 fi le, all you have to do is enter the CSS3 code in a text editor or Web develop- ment application minus the <style> tags. Th e following shows the example to be used here:
@charset “UTF-8”;
/* CSS Document */
/*3C371E,8C5F26,BCA55F,F2CC6E,F26205 */
body {
background-color:#F2CC6E;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
color:#8C5F26;
font-size:11px;
56
}
h1 {
color:#BCA55F;
background-color:#3C371E;
font-family:”Arial Black”, Gadget, sans-serif;
text-align:center;
}
h2 {
color:#F26205;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif }
h3 {
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}
Th e top line lets the browser know that it’s a UTF-8 character set, and the second two lines are comment lines. Th ey’re diff erent from the comment lines in HTML5, but they work the same. Th e second comment line is a handy way to keep track of the color palette and can save time in setting up the style sheet.
To test this mobile version of the CSS3 code, the following HTML5 fi le (ExternalSmall. html in this chapter’s folder at www.wiley.com/go/smashinghtml5) is used:
<!DOCTYPE HTML> <html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” /> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Mighty Smite Sofware Test Sheet</title>
</head> <body>
<h1>Mighty Smite Software Conglomorate</h1> <h2>This is an h2 head</h2>
<h3>Here’s an h3 head</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.
</body> </html>
All the styles in the CSS3 fi le are used to test their appearance, and the body text beginning with Lorem ipsum is fi ller text, used to get an idea of what a text block looks like. (It’s been used since the 16th century, so it must be good.)
57 In setting up the CSS3 fi le, the only setting that specifi cally targeted mobile devices is the
width setting in the body element. It’s set to 480px because that’s the width of the iPhone used in testing. However, depending on how users hold their mobile devices, they’ll get diff erent results. Figures 3-9 and 3-10 show what the page looks like when the phone is held at diff erent angles.
Figure 3-9: Style set for mobile device vertical.
58
A unique feature of many mobile devices is that they allow Web pages to be viewed from diff erent aspects — vertical or horizontal. So, when I’m preparing a CSS3 fi le for a mobile device, I tend to set the width to the horizontal. However, you’ll quickly fi nd that diff erent mobile browsers work diff erently. At the time of this writing, the Apple Safari browser on the iPhone displayed the page in a tiny, unreadable page that had to be expanded, but the Opera Mini browser (as shown in Figures 3-9 and 3-10) on the same iPhone using the same size screen displayed the page immediately in an optimum viewing size, whether viewed horizon- tally or vertically.