From 76b70006ee10d6ed38add8520b0e9a9d6f0bd721 Mon Sep 17 00:00:00 2001 From: Elise Kain Date: Thu, 9 Feb 2017 19:21:10 -0500 Subject: [PATCH] fix broken link, small spelling error and spacing --- class1.html | 36 ++++++++++++++++++------------------ class2.html | 50 +++++++++++++++++++++++++------------------------- class3.html | 38 +++++++++++++++++++------------------- class4.html | 40 ++++++++++++++++++++-------------------- 4 files changed, 82 insertions(+), 82 deletions(-) diff --git a/class1.html b/class1.html index 0fbc87b5..64b9ba3f 100644 --- a/class1.html +++ b/class1.html @@ -153,7 +153,7 @@

Tools

Atom - Windows, Mac
Notepad++ - Windows
Sublime Text - Windows, Mac, Linux
- TextWrangler - Mac + TextWrangler - Mac @@ -342,7 +342,7 @@

Head and Body Tags

-

Let's develop it!

+

Let's Develop It!

Let's get our web page set up with a doctype, head, title and body.

Later we'll add some content.

@@ -461,7 +461,7 @@

Formatted text

-

Let's Develop it!

+

Let's Develop It!

Let's add some content to our site!

Add one of each level of heading with 1-2 short paragraphs of text below each heading.

Use <strong> and <em> within a few paragraphs.

@@ -576,13 +576,13 @@

Element: Unordered and ordered lists

<ul>
-<li>List Item</li>
-<li>AnotherList Item</li>
+    <li>List Item</li>
+    <li>AnotherList Item</li>
 </ul>
 
<ol>
-<li>List Item</li>
-<li>AnotherList Item</li>
+    <li>List Item</li>
+    <li>AnotherList Item</li>
 </ol>
@@ -612,7 +612,7 @@

Lists: Examples

-

Let's Develop it!

+

Let's Develop It!

Let's add one of each ordered and unordered lists to our page.

We can make a list of links or even a list of images!

@@ -630,8 +630,8 @@

Comments

<!-- <ol> -<li>List Item</li> -<li>Another List Item</li> + <li>List Item</li> + <li>Another List Item</li> </ol> --> @@ -645,14 +645,14 @@

Tables

<table>
-<tr>
-<th>Head</th>
-<th>Head</th>
-</tr>
-<tr>
-<td>Data</td>
-<td>Data</td>
-</tr>
+    <tr>
+        <th>Head</th>
+        <th>Head</th>
+    </tr>
+    <tr>
+        <td>Data</td>
+        <td>Data</td>
+    </tr>
 </table>
diff --git a/class2.html b/class2.html index 3daf51f6..a965f26f 100644 --- a/class2.html +++ b/class2.html @@ -145,7 +145,7 @@

Connecting CSS to HTML

Connecting CSS to HTML: Inline

-
<p style="color:red">Some text.</p>
+
<p style="color:red;">Some text.</p>
 

             
Uses the HTML attribute style.

             
Difficult to use in large projects

@@ -186,9 +186,9 @@ 
Connecting CSS to HTML: Linked

 
           
           

-            
Let's develop it

+            
Let's Develop It

             
    
-              
  • In the same foolder you used last week, create a new file called style.css
    • 
+              
  • In the same folder you used last week, create a new file called style.css
    • 
               
  • Add a link to the file in the head of your HTML file
    • 
               
  • Add the CSS rule below to the CSS file:
    • 
             

@@ -282,7 +282,7 @@ 
Property: Background-color

 
           
           

-            
Let's develop it

+            
Let's Develop It

             
    
               
  • Add some rules to your css file
    • 
               
  • Change the font color and background color of different types of elements
    • 
@@ -294,7 +294,7 @@ 
    Let's develop it
    
           
    
           
    Property Values
    
           
    Each property can have one or more comma separated values.
    
-
    p{
+
    p {
   color: white;
   background-color: red;
   font-family: Arial, sans-serif;
@@ -351,7 +351,7 @@ 
    Property: Fonts (shorthand)
    
 
           
           
    
-            
    Let's develop it
    
+            
    Let's Develop It
    
             
      
               
    • Change the fonts of your page
      • 
               
    • Try changing the font sizes and styles for different elements
      • 
@@ -375,13 +375,13 @@ 
      Selector: Position
      
             
        
               
      • Position selectors are more specific
        • 
               
      • They look for elements inside other elements
        • 
-              
      • We seperate nested elements with a space
        • 
+              
      • We separate nested elements with a space
        • 
             
      
           
    
           
    
             
    Selector: Position
    
             
    So this code:
    
-
    ul li a strong{
+
    ul li a strong {
   color: purple;
 }
 
    
@@ -392,7 +392,7 @@ 
    Selector: Position
    
 
    
           
    
           
    
-            
    Let's develop it
    
+            
    Let's Develop It
    
             
      
               
    • In your CSS file, try a position selector
      • 
               
    • Remember, you need to look for an element inside another element
      • 
@@ -416,13 +416,13 @@ 
      IDs vs. Classes
      
           
    
           
    
             
    Selector: ID
    
-
    #footer {
+
    #footer {
   property: value;
 }
 
    
             
    Selects all elements with an id of "footer".
    
 
-
    <p id="footer">Copyright 2011</p>
+
    <p id="footer">Copyright 2017</p>
 
    
             
    The associated HTML.
    
           
    
@@ -430,20 +430,20 @@ 
    Selector: ID
    
           
           
    
             
    Selector: Class
    
-
    .warning {
+
    .warning {
   color: red;
 }
 
    
             
    Selects all elements with a class of "warning".
    
 
-
    <p class="warning">Run away!</p>
+
    <p class="warning">Run away!</p>
 
    
             
    The associated HTML.
    
           
    
 
           
           
    
-            
    Let's develop it
    
+            
    Let's Develop It
    
             
      
               
    • Add an ID and class to a your HTML
      • 
               
    • Add CSS rules to target these elements
      • 
@@ -454,8 +454,8 @@ 
      Let's develop it
      
           
      
             
      Cascading
      
             
      Styles "cascade" down until changed
      
-
      p{
-  color:blue;
+
      p {
+  color: blue;
   font-family: 'Helvetica';
 }
 .red {
@@ -466,15 +466,15 @@ 
      Cascading
      
 }
 
      
 
      <p>Paragraph</p>
-<p class ="red">Paragraph</p>
-<p class = "red" id ="special">Paragraph</p>
+<p class="red">Paragraph</p>
+<p class="red" id="special">Paragraph</p>
 
      
           
      
           
      
             
      Cascading priority
      
             
      Your browser assigns different priorities to CSS depending on the type of selector.
      
             
        
-              
      1. Important! - Most Important
        2. 
+              
      2. !important - Most Important
        3. 
               
      3. In line CSS
        4. 
               
      4. ID
        5. 
               
      5. Class
        6. 
@@ -484,13 +484,13 @@ 
        Cascading priority
        
           
        
             
        Cascading priority
        
             
        Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.
        
-
        .main .sale .clearance p{ //Most specific
+
        .main .sale .clearance p { /*Most specific*/
   color: red;
 }
-.header .title p{
+.header .title p {
   color: green;
 }
-.footer p{ //Least specific
+.footer p { /*Least specific*/
   color: blue;
 }
 
        
@@ -498,13 +498,13 @@ 
        Cascading priority
        
           
        
             
        Cascading priority
        
             
        The tie-breaker is position. Rules lower in the file overwrite rules higher in the file
        
-
        a{
+
        a {
   background-color: yellow;
 }
-a{
+a {
   background-color: teal;
 }
-a{ //This rule wins
+a { /*This rule wins*/
   background-color: black;
 }
 
        
diff --git a/class3.html b/class3.html
index 3e8d9e8d..1bca27ee 100644
--- a/class3.html
+++ b/class3.html
@@ -125,16 +125,16 @@ 
        Element: Div
        
         
        
           
        Div Examples
        
 
        <div>
-   <p>Content<p>
-   <p>Content<p>
+   <p>Content</p>
+   <p>Content</p>
 </div>
 
        
 
        <div id="header">
-   <h1>Main Heading<h1>
+   <h1>Main Heading</h1>
 </div>
 
        
 
        <div class="sub-content">
-   <p>Some more content<p>
+   <p>Some more content</p>
 </div>
 
        
         
        
@@ -149,8 +149,8 @@ 
        Grouping elements with div
        
 
         
        
           
        Grouping elements with div, cont.
        
-
        .align-right{
-  text-align:right;
+
        .align-right {
+  text-align: right;
   color: purple;
   font-weight: bold;
 }
@@ -258,8 +258,8 @@ 
        Element: Span
        
           
        Span
        
           
        Span is used to apply a specific style inline
        
 
-
        .highlight{
-  color:teal;
+
        .highlight {
+  color: teal;
 }
 
        
 
        <p>Paragraph with <span class="highlight">teal</span> text.</p>
@@ -274,7 +274,7 @@ 
        Let's Develop It
        
 
         
         
        
-          
        Pseudo-classess
        
+          
        Pseudo-classes
        
           
        
             
        Changing the format of a link when you hover over it is accomplished by using pseudo-classes.
        
             
        CSS pseudo-classes are used to add special effects to some selectors.
        
@@ -282,12 +282,12 @@ 
        Pseudo-classess
        
 
           
        
             
        Syntax:
        
-
        selector:pseudo-class{
-  property:value;
+
        selector:pseudo-class {
+  property: value;
 }
 
        
             
        Example:
        
-
        a:link{
+
        a:link {
   text-decoration: none;
 }
 
        
@@ -425,7 +425,7 @@ 
        Auto Margin
        
         
        
           
        Wrappers
        
           
        Wrappers are a good way to center content if the screen width is wider than your content.
        
-
        div.wrapper{
+
        div.wrapper {
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
@@ -435,7 +435,7 @@ 
        Wrappers
        
 
         
         
        
-          
        Let's Develop it!
        
+          
        Let's Develop It!
        
           
        Let's add some padding, borders, and margins to our divs.
        
           
        Let's center our entire document in the browser.
        
         
        
@@ -446,10 +446,10 @@ 
        Let's Develop it!
        
           
        Property: Width
        
           
        Sets the width of an element.
        
           
        Does not include padding or borders. Remember to add these to the width.
        
-
        div#sidebar{
+
        div#sidebar {
   width: 31%;
   padding: 1%;
-  border: none; //Total width is 33%
+  border: none; /*Total width is 33%*/
 }
 
        
         
        
@@ -459,17 +459,17 @@ 
        Property: Width
        
           
        Property: Height
        
           
        Sets the height of an element.
        
           
        Does not include padding or borders. Remember to add these to the height.
        
-
        p.alert{
+
        p.alert {
   height: 50px;
   padding: 5px;
-  border: 2px solid red; //Total height is 64px
+  border: 2px solid red; /*Total height is 64px*/
 }
 
        
         
        
 
         
         
        
-          
        Let's develop it!
        
+          
        Let's Develop It!
        
           
        
             
        Add a width & height to our divs.
        
             
        Use IDs to target each div with CSS
        
diff --git a/class4.html b/class4.html
index 92585167..9b48503e 100644
--- a/class4.html
+++ b/class4.html
@@ -57,7 +57,7 @@ 
        Class 4
        
             
        Static Positioning
        
             
          
               
        • HTML elements are positioned static by default.
          • 
-              
        • Static elements are positioned in the normal flow of the page
          • 
+              
        • Static elements are positioned in the normal flow of the page.
          • 
               
        • Static elements ignore top, bottom, right or left property specifications.
          • 
             
        
           
        
@@ -108,7 +108,7 @@ 
        Relative Positioning
        
           
        
             
        Relative Positioning
        
             
        The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.
        
-
        .relative{
+
        .relative {
   position: relative;
   left: 80px;
   top: 20px;
@@ -132,24 +132,24 @@ 
        Absolute Positioning
        
               
      6. Its container block is the first element that has a position other than static.
        7. 
               
      7. If no such element is found, the container block is <html>.
        8. 
               
      8. Other elements act as if it's not there.
        9. 
-              
      9. Determined by its offset values in the properties top, bottom, right and left.
        10. 
+              
      10. Determined by its offset values in the properties top, bottom, right and left.
        11. 
             
    
           
    
 
           
    
             
    Absolute Positioning
    
             
    The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).
    
-
    .top{
+
    .top {
   position: absolute;
   top: -40px;
   right: 10px;
-  background-color: yellow
+  background-color: yellow;
 }
-.bottom{
+.bottom {
   position: absolute;
   bottom: -40px;
   left:60px;
-  background-color: green
+  background-color: green;
 }
 
    
             
    
@@ -177,13 +177,13 @@ 
    Example: Absolute Positioning
    
           
    
             
    Z-index
    
             
    Sometimes elements overlap. You can change the order of overlapping with z-index. The element with highest z-index goes on top.
    
-
    .bottom{
+
    .bottom {
   position: absolute;
   bottom: 10px;
   left:60px;
   background-color: yellow;
 }
-.top{
+.top {
   position: absolute;
   bottom: 15px;
   left:60px;
@@ -196,7 +196,7 @@ 
    Z-index
    
           
    
 
           
    
-            
    Let's Develop it!
    
+            
    Let's Develop It!
    
             
    Let's add some positioning.
    
             
    Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.
    
           
    
@@ -221,10 +221,10 @@ 
    Float: Example
    
 
           
    
             
    Float
    
-
    .float{
-  float:left;
-  width:200px;
-  background:yellow;
+
    .float {
+  float: left;
+  width: 200px;
+  background: yellow;
 }
 
    
             
    
@@ -267,13 +267,13 @@ 
    Clear
    
 
           
    
             
    Clear
    
-
    .float{
-  float:left;
-  width:50px;
-  background:yellow;
+
    .float {
+  float: left;
+  width: 50px;
+  background: yellow;
 }
-.clear-left{
-  clear:left
+.clear-left {
+  clear: left;
 }