This chapter is from the book
This chapter is from the book
This chapter is from the book
Q&A
Q. Say I link a style sheet to my page that says all text should be blue, but there’s a <span style="font-color:red"> tag in the page somewhere. Will that text display as blue or will it display as red?
A. Red. Local inline styles always take precedence over external style sheets. Any style specifications you put between <style> and </style> tags at the top of a page will also take precedence over external style sheets (but not over inline styles later in the same page). This is the cascading effect of style sheets that I mentioned earlier in the chapter. You can think of cascading style effects as starting with an external style sheet, which is overridden by an internal style sheet, which is overridden by inline styles.
Q. Can I link more than one style sheet to a single page?
A. Sure. For example, you might have a sheet for formatting (text, fonts, colors, and so on) and another one for layout (margins, padding, alignment, and so on)—just include a <link /> for both. Technically speaking, the CSS standard requires web browsers to give the user the option to choose between style sheets when multiple sheets are presented via multiple <link /> tags. However, in practice, all major web browsers simply include every style sheet. The preferred technique for linking in multiple style sheets involves using the special @import command. Following is an example of importing multiple style sheets with @import:
@import url(styles1.css); @import url(styles2.css);
Similar to the <link /> tag, the @import command must be placed in the head of a web page. You learn more about this handy little command in Chapter 25, “Creating Print-Friendly Web Pages,” when you learn how to create a style sheet specifically for printing web pages.