Cascading Style Sheets (CSS)

CCS is used to change the layout, colors, and fonts of a web page when rendered in the browser
1. Separates the presentation of the page from the document's structure and content
2. CSS 1 first developed in 1996
3. Most of CSS 3 is currently implemented by all major browsers but not always consistently, so cross-browser testing is necessary
4. W3C CSS Validator or CSS Lint can catch errors
Inline styles
1. An inline style applies only to a specific element (and its children) in a web page
2. Use the style attribute with any tag; value uses CSS syntax with property:value pairs separated by semicolons
3. Create a red paragraph:
```
<p style="color:red">This text is <em>red</i>
```
  This text is red
4. Separate multiple properties with semicolon:
```
Hello, <strong style="color:blue; font-size:18pt">blue text</strong>!
```
  Hello, blue text!
5. Colors
  1. 147 pre-defined color names like green or burlywood
  2. Use rgb to specify red, green, blue decimal values (0-255)
```
<p style="color: rgb(0, 255, 0)">green</p>
<p style="color: rgb(255, 0, 255)">purple</p>
<p style="color: rgb(255, 255, 255)">white</p>
<p style="color: rgb(0, 0, 0)">black</p>
```
  3. Use #RRGGBB to specify red, green, blue using hexidecimal values (00-FF)
```
<p style="color: #FF00FF">magenta</p>
```

Embedded style sheets

Embedded style sheet is defined with <style> in the <head> section of a web page
Styles apply to selected elements in the web page
A selector specifies HTML elements that CSS should be apply to
1. An element selector selects elements. Ex: h1 selects <h1> tags
2. A class selector selects elements that use the class. Ex: .className styles apply to elements with class="className" attribute
3. An ID selector select an element that uses the id. Ex: #idName styles apply to the element with id="idName" attribute

Example embedded style sheet

<head>
	<style type="text/css">
		/* h1 and p are element selectors */
		h1 { color: red; }               
		p { background-color: blue; }
		
		/* Class selector */
		.special { 
			font-size: small; 
			font-family: arial, sans-serif; 
		}
		
		/* ID selector */
		#email { text-decoration: none;	}
					
		/* Apply same styles to h2 AND h3 */
		h2, h3 { text-decoration: underline; }   
		
		/* Descendant selector: only em used in li is bold */
		li em { font-weight: bold; }   
	</style>
	<!-- etc... -->
</head>

All <h1> tags in the page will appear red
```
<h1>I'm red</h1>
```

Any tag can use the special class by using the class attribute

<p class="special">I've got a blue background and use a small, Arial font</p>

Tag using the #email ID is not underlined

<a id="email" href="mailto:admin@gmail.com">System Administrator</a>

A class may be defined for use on only a particular type of element

h5.coolGreen { color: rgb(10, 200, 200) }

The coolGreen class can only be used with <h5> tags:

<h5 class="coolGreen">I'm green</h5>
<h1 class="coolGreen">I'm NOT green!</h1>

Multiple classes can be applied to the same element

<h5 class="coolGreen special">I'm green with small text</h5>

A pseudo-class is used to add special effects to some selectors
1. Syntax: selector:pseudo-class or selector.class:pseudo-class
2. Pseudo-class names are not case-sensitive
3. Example where ordering of pseudo-classes is important
```
a:link    { color:red     }   /* unvisited link */
a:visited { color:green;  }   /* visited link */
a:hover   { color:orange; }   /* mouse over link */
a:active  { color:blue;   }   /* selected link */
```
4. More info here

External style sheets
1. An external style sheet is a separate file (with .css extension) that contains a CSS style sheet, and it can be imported into any web page
2. Used to give a website a consistent look and make it easier to change styles that affect multiple web pages
3. Example styles.css (note: no HTML in the file):
```
body 		{ font-family: arial; }
a			{ text-decoration: none; }
h1.cool		{ color: blue; text-align: center; }
```
4. Import into a web page:
```
<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
```
Inheritance
1. Child elements inherit their parent's properties
```
<p style="color: blue">This is a <strong>test</strong></p>
```
  <strong> inherited properties from its parent <p>, so "test" is blue
  
  This is a test
2. A child may override its parent's properties
```
<p style="color: blue">This is a <strong style="color: green">test</strong></p>
```
  <strong> overrides its parent and makes "test" green
  
  This is a test
3. CSS styles can override default properties applied by the browser
```
<b style="font-weight: normal;">Text is NOT bold</b>
```
  Text is NOT bold
4. Although most properties cascade down to child elements, some like background-image do not
```
<body style="background-image: url(bison.png)">
```
  Only the <body> uses the bison.png image for its background, none of its children do

Conflicts

A conflict arrises when competing style properties are assigned by external style sheets, embedded style sheets, and inline styles.

Inline styles have the highest precedence

<style>
  p { color: red; }
</style>	

<!-- inline beats embedded style -->
<p style="color: blue">I'm blue</p>

More specific selectors have higher precedence over less specific selectors

<style>
  #mypar { color: purple; }
  p { color: red; }
</style>		

<!-- specific id beats general paragraph -->
<p id="mypar">I'm purple</p>

Rules that appear last override earlier rules

Later embedded style overrules earlier external style sheet

<!-- p { color: yellow; } -->
<link href="styles.css" rel="stylesheet">

<style>
p { color: green; }
</style>

<p>I'm green</p>

Later external style sheet overrules ealier embedded style

<style>
p { color: green; }
</style>

<!-- p { color: yellow; } -->
<link href="styles.css" rel="stylesheet">

<p>I'm yellow</p>