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 stylesheet 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 red?
A. Red. Local inline styles always take precedence over external stylesheets. Any style specifications you put between <style> and </style> tags at the top of a page also take precedence over external stylesheets (but not over inline styles later in the same page). This is the cascading effect of stylesheets that I mentioned earlier in the hour. You can think of cascading style effects as starting with an external stylesheet, which is overridden by an internal stylesheet, which is overridden by inline styles.
Q. Can I link more than one stylesheet 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, the CSS standard requires web browsers to give the user the option to choose between stylesheets when multiple sheets are presented via multiple <link /> tags. However, in practice, all major web browsers simply include every stylesheet unless it has a rel="alternate" attribute. The preferred technique for linking in multiple stylesheets involves using the special @import command. The following is an example of importing multiple stylesheets 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 Hour 20, “Creating Print-Friendly Web Pages,” when you learn how to create a stylesheet specifically for printing web pages.