Difference between revisions of "Anatomy of a Webpage 2"

From FreekiWiki
Jump to navigation Jump to search
(updating the HTML structure)
(adding operators)
Line 9: Line 9:
 
When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes.
 
When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes.
 
*Order of Operations
 
*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"<).
 +
*!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.
 +
 +
== Operators ==
 +
*. (period)
 +
The period denotes a class name. They can be strung together:
 +
div.class1.class2 { background-color: red; }
 +
* # (pound)
 +
The pound sign is used to denote an ID. It can be combined with the class operator.
 +
div#id { background-color: red; }
 +
div#id.class { background-color: red; }
 +
div#id.class1.class2 { 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; }
 +
*  (space)
 +
A space is used when the element structure should be more flexible.
 +
*, (comma)
  
 
== Instructor Notes ==
 
== Instructor Notes ==
Line 29: Line 57:
 
     <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>

Revision as of 04:26, 20 March 2013

This class is a continuation of the Anatomy series, discussing CSS. Students are expected to have a basic understanding of HTML.

Basic Terminology

  • Elements

HTML elements are also knows as tags, such as <html>, <div>, and <p>.

  • ID

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

  • Class

When multiple HTML elements need to be styled, a class can be applied. An element can have an unlimited number of classes.

  • 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"<).

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

Operators

  • . (period)

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

div.class1.class2 { background-color: red; }
  • # (pound)

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

div#id { background-color: red; }
div#id.class { background-color: red; }
div#id.class1.class2 { 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; }
  •   (space)

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

  • , (comma)

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.

  • 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=66651"