ProblemYou want to know about the different ways of adding styles to a web page. SolutionYou can apply styles in three ways: external, internal, and inline. An internal style sheet appears near the top of the HTML document within the head. <style> <!-- #header { width: 100%; height: 100px; font-size: 150% } #content { font-family: verdana, arial, sans-serif; margin-left: 20px; margin-right: 20px } .title { font-size: 120% } --> </style>
External style sheets are stored in a separate file, which become associated with the HTML file through linking. The following code is saved in its own file: /* CSS Document */ h1 { font-size: 150%; } h2 { font-size: 120%; } p { font-family: Verdana, Arial, Helvetica, sans-serif; }
In the web page, add the following line between the head tags to link to the external style sheet that contains the above styles: <link href="screen.css" rel="stylesheet" type="text/css" media="screen" /> Inline styles work similarly to font in that they appear with the markup they affect. <h1 style="font-family: verdana, arial, sans-serif; font-size: 150%; color: blue;">Page Title</h1> <p style="font-family: sans-serif; font-size: 90%;">Hello, world!</p> DiscussionThe three different types of style sheets are:
External and inline style sheets save time spent over inline styles on maintaining web sites. For example, you inherit a web page where all the text is blue and use font to control the size. You receive orders to make change the text to black, so you search for every instance of <p> to change it from blue to black like the following: <p><font size="2" color="blue">Text goes here</font></p> To change all p from blue to black in an external style sheet takes two steps. Open the CSS file and change the color. p { color: blue; } In an internal style sheet, changing the text from blue to black takes one step. Search for the style at the top of the page and replace blue with black. <style> <!-- p { color: blue } --> </style> When to use inline stylesHowever, with inline styles, changing the color takes as much time as fixing the original file with font tag: <p style="font-color: blue">Test goes here.</p> Why would anyone want to use inline styles considering it's time-consuming to make changes? It's rare, but you may have content that appears once in the whole web site that is in need of a special style. Rather than cluttering the external style sheet with the style for one item, you use inline styles instead. When to use internal style sheetsAs for internal and external style sheets, most sites use external style sheets. However, when starting to write CSS code for a web page design, it's best to start out with an inline style sheet. When you reach the point where the design is complete or starts to get a little unwieldy, move the style sheet to a separate file. Then make edits to the external style sheet as needed. Also, you may have a special page that's not related to the web site or uses a special style. In this case, an internal style sheet could be easier to use as opposed to adding more clutter to the external style sheet. See AlsoThe Style Sheets section in HTML 4.01 specification at http://www.w3.org/TR/html401/present/styles.html; W3Schools' "CSS How to Insert a Style Sheet" at http://www.w3schools.com/css/css_howto.asp. |