/* Jean's First CSS File 

HTMLDog Tutorials 
CSS Beginner
                          - Applying CSS - 3 different ways: inline, external, internal
						  - Selectors, Properties and Values  -   selector {property:value; property:value} 
			                                HTML has 'tags',   CSS has 'selectors' - the names given to styles 
						                    HTML selectors are the names of HTML tags and are used to change the style of a specific tag
							Lengths and Percentages  units  em, %, aslo px, pt, pc, cm, mm, in
						  - Colours -   rgb or hex
						                properties -  color, background-color
						  - Text - properties -  font-family, font-size font-weight, font-style, 
						                                text-decoration, text-transform, text-spacing
						  - Margins and Padding - margin and padding properties for page or for the 4 sides of an element
						  - Borders - can be applied to most HTML elements within the body
CSS Intermediate  
                          - Class and ID Selectors
						  - Grouping and Nesting
						  - Pseudo Classes
						  - Shorthand Properties
						  - Background Images
CSS Advanced 
                          - Display - Defining the display type of an element  -- inline, block-line and none 
						                  also  list-item, run-in, compact, marker
										  also  table-related display property values offering table-column, table-row-group, table-column-group,  
										  table-header-group, table-footer-group and table-caption as values -all self-descriptive.   
										  The obvious benefit of these values is that you can construct a table 
										  by columns, rather than the row-biased method used in HTML.
										  
										  
                          - Page Layout - look at each part of the page as an individual chunk that you can 
						                         shove wherever you choose...place these chunks absolutely or relative to another chunk.
									Positioning - The position property  defines whether an element is absolute, relative, static or fixed.
									Floating  an element shifts it to the right or left of a line, with surrounding content flowing around it
												 
                          - At-Rules - Importing style sheets, styles for different media types, 
						                    specifying the character set of a stylesheet and embedded fonts. 
                          - Pseudo Elements -  Styling first letters, first lines and placing content before and after elements. 
                          - Specificity - How a browser will deal with conflicting CSS rules
*/


/*  ELEMENTS     -------------tags and elements are the same----------------------------*/


h1{
		font-size: 1.5em;
		color: green;
}


h2{
		font-size: 1em;
		color: green;
}

h3{
		font-size:0.75em;
		color:blue;
		font-family:verdana;
		text-transform: uppercase;
}

h4{
		font-size:1.5em;
		font-style: italic;
		color:black;
		text-transform:lowercase;
		margin-top: 1em; 
		margin-left: 1em;
		/*padding:1em;*/
		/*padding-top:3em;*/
		border-style: dashed;
		border-width: 2px;
		border-left-width: 2px;
		border-right-width: 2px;
		border-color: red;
}
h5{}
h6{}



/*   IDs     -------------------preceeded by hash character (#)----------------------------- */

#top {
	background-color: #ccc;
	padding: 1em
}




/*  CLASSES      --------------preceeded by full-stop character (.) --------------------------- */

.title{
	color: brown;
	font-weight: bold;
	font-size:2em;
}

.secondclass, .thirdclass {
	color:red;
}