Slide 8.6: CSS how to ... (cont.)

Slide 8.5: CSS how to ... (cont.)
Slide 8.7: CSS background
Home Print version

CSS How to ... (Cont.)

Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector as the top code.

8.css

 h3 {
  color: red;
  text-align: left;
  font-size: 8pt
 }

And an internal style sheet has these properties for the h3 selector as the middle code. If the page with the internal style sheet also links to the external style sheet the properties for h3 will be the bottom code.

 h3 {
  text-align: right; 
  font-size: 20pt
 }

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

 color: red; 
 text-align: right; 
 font-size: 20pt

Multiple Styles Will Cascade into One.
Style sheets allow style information to be specified in many ways such as inside a single HTML element, inside the <head> element, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document. What style will be used when there is more than one style specified? All the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

browser default
external style sheet
internal style sheet (inside the <head> tag)
inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <title>HTML Working Area</title> <link rel="stylesheet" type="text/css" href="http://undcemcs01.und.edu/~wen.chen.hu/course/101/8/6.css" /> <style type="text/css"> h3 { text-align: right; font-size: 20pt } </style> </head> <body> <center><h3>CSS</h3></center> <p> This is a text. This is a text. </p> </body> </html>

Review: CSS (Cascading Style Sheets)

Result:

◀
Previous

Slide 8.5: CSS how to ... (cont.)
Slide 8.7: CSS background
Home Print version

▶
Next

In every circle of friends, there’s always that one person everyone secretly hates.
Don’t have one? Then it’s probably you.
— Will Ferrell