Anatomy of a Webpage 2 - Revision history

Bsandberg: note to self

2013-03-25T18:35:58Z

note to self

2013-03-20T12:52:16Z

wiki-link

2013-03-20T12:50:29Z

2013-03-20T12:49:27Z

restructure

2013-03-20T12:42:19Z

2013-03-20T12:41:01Z

!important

2013-03-20T12:39:44Z

2013-03-20T12:35:19Z

Elements

2013-03-20T12:34:42Z

more detail

2013-03-20T12:31:39Z

restructure

← Older revision		Revision as of 18:35, 25 March 2013
Line 1:		Line 1:
	This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.		This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.
		+
		+	First, discuss only HTML, and how it gets marked up for later use by CSS (ID, Class, the style tag and attribute)

	== Basic Terminology ==		== Basic Terminology ==

@@ Line 51: / Line 51: @@
 == Instructor Notes ==
 *Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.css".
-*Students should also create a new HTML file. Contents should be the Beginning HTML Structure. (see below)
+*Students should also create a new HTML file. Contents should be the [[Anatomy of a Webpage 2#Beginning HTML Structure|Beginning HTML Structure]]. (see below)
 *Double-click the HTML file to open it in the browser.
 *Begin building the CSS and altering the HTML structure, bit-by-bit, discussing things such as proper syntax.

@@ Line 102: / Line 102: @@
 Making CSS move.
 === Frameworks & Utilities ===
-**LESS
+*LESS
-**Bootstrap
+*Bootstrap

@@ Line 93: / Line 93: @@
 == Extra Credit ==
 Saving these for the future, or if there's extra time in class.
-*Pseudo and Attribute Selectors
+=== Pseudo and Attribute Selectors ===
 For selecting form types and other elements.
-*Browser Prefixes
+=== Browser Prefixes ===
 CSS which applies only to certain browsers or rendering engines.
-*Media Queries
+=== Media Queries ===
 CSS which is dependent upon the size of the browser window.
-*Transitions
+=== Transitions ===
 Making CSS move.
-*Frameworks & Utilities
+=== Frameworks & Utilities ===
 **LESS
 **Bootstrap

@@ Line 8: / Line 8: @@
 === ID ===
 Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.
-  &lt;div id="me"&gt;
+  &lt;div id="me"&gt;&lt;/div&gt;
 === Class ===
 When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes, separated by spaces.
-  &lt;div class="grn"&gt;
+  &lt;div class="grn"&gt;&lt;/div&gt;
-  &lt;div class="grn blu"&gt;
+  &lt;div class="grn blu"&gt;&lt;/div&gt;
 === Order of Operations ===
 The browser will respect the order in which CSS files are loaded in the browser.
-  &lt;link rel="stylesheet" type="text/css" href="file1.css"&gt;
+  &lt;link rel="stylesheet" type="text/css" href="file1.css" /&gt;
-  &lt;link rel="stylesheet" type="text/css" href="file2.css"&gt;
+  &lt;link rel="stylesheet" type="text/css" href="file2.css" /&gt;
 CSS in file2 can override any CSS declared in file1.
 === Specificity ===
@@ Line 23: / Line 23: @@
 This will turn the background color on all &lt;div&gt;s to blue.
   div.grn { background-color: green; }
-This will affect all &lt;div&gt;s with class="grn" (&lt;div class="grn"&gt;).
+This will affect all &lt;div&gt;s with class="grn" (&lt;div class="grn"&gt;&lt;/div&gt;).
 === !important ===
 The !important directive is added to force that style to take precedence over any CSS which follows. This is often misused, and should be used only as a last resort.

@@ Line 27: / Line 27: @@
 The !important directive is added to force that style to take precedence over any CSS which follows. This is often misused, and should be used only as a last resort.
-== Operators ==
+== Selectors ==
 === . (period) ===
 The period denotes a class name. They can be strung together:
@@ Line 92: / Line 92: @@
 == Extra Credit ==
 Saving these for the future, or if there's extra time in class.
 *Browser Prefixes
 CSS which applies only to certain browsers or rendering engines.

@@ Line 4: / Line 4: @@
 === Elements ===
 HTML elements are also knows as tags.
   &lt;div&gt;
- &lt;p&gt;
 === ID ===
 Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.

@@ Line 24: / Line 24: @@
 This will turn the background color on all &lt;div&gt;s to blue.
   div.grn { background-color: green; }
-This will affect all &gt;div&lt;s with class="grn" (&gt;div class="grn"&lt;).
+This will affect all &lt;div&gt;s with class="grn" (&lt;div class="grn"&gt;).
 === !important ===
 The !important directive is added to force that style to take precedence over any CSS which follows. This is often misused, and should be used only as a last resort.
@@ Line 40: / Line 40: @@
 A greater than sign is used to affect elements which are the descendants of other elements.
   html > body > div { background-color: orange; }
 === &nbsp; (space) ===
 A space is used when the element structure should be more flexible.
 === , (comma) ===
 == Instructor Notes ==