Difference between revisions of "Anatomy of a Webpage 2"

From FreekiWiki
Jump to navigation Jump to search
(first draft)
m (note to self)
 
(12 intermediate revisions by the same user not shown)
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 ==
−
*Elements
+
=== Elements ===
−
HTML elements are also knows as tags, such as <html>, <div>, and <p>.
+
HTML elements are also knows as tags.
−
*ID
+
<div>
 +
 
 +
=== ID ===
 
Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.
 
Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique.
−
*Class
+
<div id="me"></div>
−
*Imports
+
=== Class ===
−
*Media Queries
+
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.
−
*Transitions
+
<div class="grn"></div>
−
*Frameworks
+
<div class="grn blu"></div>
 +
=== Order of Operations ===
 +
The browser will respect the order in which CSS files are loaded in the browser.
 +
<link rel="stylesheet" type="text/css" href="file1.css" />
 +
<link rel="stylesheet" type="text/css" href="file2.css" />
 +
CSS in file2 can override any CSS declared in file1.
 +
=== Specificity ===
 +
More-specific CSS will override less-specific CSS.
 +
div { background-color: blue; }
 +
This will turn the background color on all <div>s to blue.
 +
div.grn { background-color: green; }
 +
This will affect all <div>s with class="grn" (<div class="grn"></div>).
 +
=== !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.
 +
div.blu { background-color: green !important; }
 +
 
 +
== Selectors ==
 +
=== . (period) ===
 +
The period denotes a class name. They can be strung together:
 +
div.grn.blu { background-color: red; }
 +
=== # (pound) ===
 +
The pound sign is used to denote an ID. It can be combined with the class operator.
 +
div#me { background-color: red; }
 +
div#me.grn { background-color: red; }
 +
div#me.grn.blu { background-color: red; }
 +
=== > (greater than) ===
 +
A greater than sign is used to affect elements which are the descendants of other elements.
 +
html > body > div { background-color: orange; }
 +
html > body > div.grn { background-color: green; }
 +
===   (space) ===
 +
A space is used when the element structure should be more flexible.
 +
html div { background-color: orange; }
 +
html div.grn { background-color: green; }
 +
=== , (comma) ===
 +
Commas are used to include multiple elements in a style declaration.
 +
div, div.grn { background-color: green; }
  
 
== Instructor Notes ==
 
== Instructor Notes ==
−
*Students should launch Leafpad, and create a new file on the desktop with their first name, in lowercase "name.html". Contents should be the Beginning HTML Structure. (below)
+
*Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.css".
−
*Double-click that file to open it in the browser.
+
*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)
−
*Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
+
*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.
 
**make changes
 
**make changes
 
**save changes
 
**save changes
 
**reload browser
 
**reload browser
−
*Students should find a simple image (like a kitty) and download it to the desktop, named "name.jpg" or similar.
 
  
 
== Beginning HTML Structure ==
 
== Beginning HTML Structure ==
Line 25: Line 64:
 
   <head>
 
   <head>
 
     <title>My First Webpage</title>
 
     <title>My First Webpage</title>
 +
    <link rel="stylesheet" type="text/css" href="name.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
Line 30: Line 70:
 
     <p>Paragraph text.</p>
 
     <p>Paragraph text.</p>
 
     <h2>Headline</h2>
 
     <h2>Headline</h2>
−
     <p>Paragraph text.</p>
+
     <p>
 +
      Paragraph text.<br />
 +
      <a href="http://www.freegeek.org/">LINK</a>
 +
    </p>
 
     <div>
 
     <div>
 
       <h1>Headline</h1>
 
       <h1>Headline</h1>
 
       <p>Paragraph text.</p>
 
       <p>Paragraph text.</p>
 
       <h2>Headline</h2>
 
       <h2>Headline</h2>
−
       <p>Paragraph text.</p>
+
       <p>
 +
        Paragraph text.<br />
 +
        <a href="http://www.freegeek.org/">LINK</a>
 +
      </p>
 
     </div>
 
     </div>
 
   </body>
 
   </body>
Line 46: Line 92:
 
*[http://caniuse.com/ Can I use...]
 
*[http://caniuse.com/ Can I use...]
 
*[http://css3generator.com/ CSS3 Generator]
 
*[http://css3generator.com/ CSS3 Generator]
 +
 +
== Extra Credit ==
 +
Saving these for the future, or if there's extra time in class.
 +
=== Pseudo and Attribute Selectors ===
 +
For selecting form types and other elements.
 +
=== Browser Prefixes ===
 +
CSS which applies only to certain browsers or rendering engines.
 +
=== Media Queries ===
 +
CSS which is dependent upon the size of the browser window.
 +
=== Transitions ===
 +
Making CSS move.
 +
=== Frameworks & Utilities ===
 +
*LESS
 +
*Bootstrap

Latest revision as of 10:35, 25 March 2013

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

Elements

HTML elements are also knows as tags. 

<div>

ID

Used to identify an individual element in a document. There should be no duplicate IDs in an HTML document; each should be unique. 

<div id="me"></div>

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. 

<div class="grn"></div>
<div class="grn blu"></div>

Order of Operations

The browser will respect the order in which CSS files are loaded in the browser. 

<link rel="stylesheet" type="text/css" href="file1.css" />
<link rel="stylesheet" type="text/css" href="file2.css" />

CSS in file2 can override any CSS declared in file1.

Specificity

More-specific CSS will override less-specific CSS. 

div { background-color: blue; }

This will turn the background color on all <div>s to blue. 

div.grn { background-color: green; }

This will affect all <div>s with class="grn" (<div class="grn"></div>).

!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. 

div.blu { background-color: green !important; }

Selectors

. (period)

The period denotes a class name. They can be strung together: 

div.grn.blu { background-color: red; }

# (pound)

The pound sign is used to denote an ID. It can be combined with the class operator. 

div#me { background-color: red; }
div#me.grn { background-color: red; }
div#me.grn.blu { background-color: red; }

> (greater than)

A greater than sign is used to affect elements which are the descendants of other elements. 

html > body > div { background-color: orange; }
html > body > div.grn { background-color: green; }

  (space)

A space is used when the element structure should be more flexible. 

html div { background-color: orange; }
html div.grn { background-color: green; }

, (comma)

Commas are used to include multiple elements in a style declaration. 

div, div.grn { background-color: green; }

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)
  • 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.
    • make changes
    • save changes
    • reload browser

Beginning HTML Structure

<html>
  <head>
    <title>My First Webpage</title>
    <link rel="stylesheet" type="text/css" href="name.css">
  </head>
  <body>
    <h1>Headline</h1>
    <p>Paragraph text.</p>
    <h2>Headline</h2>
    <p>
      Paragraph text.<br />
      <a href="http://www.freegeek.org/">LINK</a>
    </p>
    <div>
      <h1>Headline</h1>
      <p>Paragraph text.</p>
      <h2>Headline</h2>
      <p>
        Paragraph text.<br />
        <a href="http://www.freegeek.org/">LINK</a>
      </p>
    </div>
  </body>
</html>

Resources

Extra Credit

Saving these for the future, or if there's extra time in class.

Pseudo and Attribute Selectors

For selecting form types and other elements.

Browser Prefixes

CSS which applies only to certain browsers or rendering engines.

Media Queries

CSS which is dependent upon the size of the browser window.

Transitions

Making CSS move.

Frameworks & Utilities

  • LESS
  • Bootstrap
Retrieved from "http://wiki.freegeek.org/index.php?title=Anatomy_of_a_Webpage_2&oldid=66733"