Cascading Style Sheets
Cascading Style Sheets
Cascading Style Sheets
H1 {background-color: rgb(204,102,255)}
• background-image : url(file.jpg)
• examples\css\style-background.html
• http://www.w3schools.com/css/css_backgr
ound.asp
Comment
• /* This is a CSS comment. */
mystyle.css
OR @import or multiple LINK
tags allow you to use
<style> more than one style sheet
@import url(“mystyle.css”) in the same document
</style>
Cascading Order
• If a property has been set for the same
selector in different style sheets, the value
will be inherited from the more specific
(innermost) style sheet.
• (next slide)
Cascading Order
• We say that all the styles will "cascade"
into a new "virtual" style sheet by the
following rules, where number four has
the highest priority:
1. Browser default
2. External style sheet (.css file)
3. Internal style sheet (inside the <head>)
4. Inline style (inside an HTML element)
Style Inheritance
• If a style is not specified for an
element, it inherits the style of its
parent element; This is called style
inheritance.
CSS
• http://www.w3schools.com/css/css_border
.asp
• http://www.w3schools.com/css/css_text.as
p
• http://www.w3schools.com/css/css_text.as
p
The id Selector
• The style rule below will match any
element that has an id attribute with a
value of "green":
#green {color: green}
output????
The <span> tag
styles.html