Let's get our web page set up with a doctype, head, title and body.
Later we'll add some content.
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 @@<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>
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!
<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>
<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.
- - Important! - Most Important
+ - !important - Most Important
- In line CSS
- ID
- Class
@@ -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
- Its container block is the first element that has a position other than static.
- If no such element is found, the container block is <html>.
- Other elements act as if it's not there.
- - Determined by its offset values in the properties top, bottom, right and left.
+ - Determined by its offset values in the properties top, bottom, right and left.
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;
}