Difference between revisions of "Anatomy of a Webpage 2"

From FreekiWiki
Jump to navigation Jump to search
m (note to self)
 
(9 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.
 
HTML elements are also knows as tags.
−
<html>
 
 
  <div>
 
  <div>
−
<p>
+
 
−
*ID
+
=== 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.
−
  <div id="me">
+
  <div id="me"></div>
−
*Class
+
=== 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.
 
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 class="grn"></div>
−
  <div class="grn blu">
+
  <div class="grn blu"></div>
−
*Order of Operations
+
=== Order of Operations ===
 
The browser will respect the order in which CSS files are loaded in the browser.
 
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="file1.css" />
−
  <link rel="stylesheet" type="text/css" href="file2.css">
+
  <link rel="stylesheet" type="text/css" href="file2.css" />
 
CSS in file2 can override any CSS declared in file1.
 
CSS in file2 can override any CSS declared in file1.
−
*Specificity
+
=== Specificity ===
 
More-specific CSS will override less-specific CSS.
 
More-specific CSS will override less-specific CSS.
 
  div { background-color: blue; }
 
  div { background-color: blue; }
 
This will turn the background color on all <div>s to blue.
 
This will turn the background color on all <div>s to blue.
 
  div.grn { background-color: green; }
 
  div.grn { background-color: green; }
−
This will affect all >div<s with class="grn" (>div class="grn"<).
+
This will affect all <div>s with class="grn" (<div class="grn"></div>).
−
*!important
+
=== !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.
 
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; }
  
−
== Operators ==
+
== Selectors ==
−
*. (period)
+
=== . (period) ===
 
The period denotes a class name. They can be strung together:
 
The period denotes a class name. They can be strung together:
 
  div.grn.blu { background-color: red; }
 
  div.grn.blu { background-color: red; }
−
* # (pound)
+
=== # (pound) ===
 
The pound sign is used to denote an ID. It can be combined with the class operator.
 
The pound sign is used to denote an ID. It can be combined with the class operator.
 
  div#me { background-color: red; }
 
  div#me { background-color: red; }
 
  div#me.grn { background-color: red; }
 
  div#me.grn { background-color: red; }
 
  div#me.grn.blu { background-color: red; }
 
  div#me.grn.blu { background-color: red; }
−
*> (greater than)
+
=== > (greater than) ===
 
A greater than sign is used to affect elements which are the descendants of other elements.
 
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 { background-color: orange; }
−
*  (space)
+
html > body > div.grn { background-color: green; }
 +
===   (space) ===
 
A space is used when the element structure should be more flexible.
 
A space is used when the element structure should be more flexible.
−
*, (comma)
+
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, empty file on the desktop with their first name, in lowercase "name.css".
 
*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.
 
*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.
 
*Begin building the CSS and altering the HTML structure, bit-by-bit, discussing things such as proper syntax.
Line 88: Line 95:
 
== Extra Credit ==
 
== Extra Credit ==
 
Saving these for the future, or if there's extra time in class.
 
Saving these for the future, or if there's extra time in class.
−
*Browser Prefixes
+
=== Pseudo and Attribute Selectors ===
 +
For selecting form types and other elements.
 +
=== Browser Prefixes ===
 
CSS which applies only to certain browsers or rendering engines.
 
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.
 
CSS which is dependent upon the size of the browser window.
−
*Transitions
+
=== Transitions ===
 
Making CSS move.
 
Making CSS move.
−
*Frameworks & Utilities
+
=== Frameworks & Utilities ===
−
**LESS
+
*LESS
−
**Bootstrap
+
*Bootstrap

Latest revision as of 11: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"