HTML and CSS Reference
In-Depth Information
External style sheets
With all the dif erent kinds of style combinations you may have to consider — including
dif 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 i le, you can reuse your style sheet as ot en as you want. Plus, you can copy your
embedded CSS and easily paste it into a text i le and save it as a .css i 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. (h at means you can use only the
set of colors provided.) You start with the following company colors:
#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205
h 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 i gure out the rest.
Further, you're told that they'd like a version that looks good on a phone and a dif erent one
that looks good on a desktop. So, that means you're going to need two dif 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.
55
All that's required is the following tag:
< link rel = ”stylesheet” type = ”text/css” href = ”mightySmiteSmall.css” />
h 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 i le. Notice that the <link> tag
contains an href attribute assigned the value mightySmiteSmall.css . h at's the name
of the CSS3 i le in this chapter's folder at www.wiley.com/go/smashinghtml5 . h e
Small indicates that it's designed for mobile devices. Another CSS3 i le will be created called
mightySmiteLarge.css for non-mobile devices.
To create a CSS3 i le, all you have to do is enter the CSS3 code in a text editor or Web develop-
ment application minus the <style> tags. h 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 ;
max - width : 480px ;
 
Search WWH ::




Custom Search