Difference between revisions of "Anatomy of a Webpage 2"
(restructure) |
|||
Line 2: | Line 2: | ||
== Basic Terminology == | == Basic Terminology == | ||
− | + | === Elements === | |
HTML elements are also knows as tags. | HTML elements are also knows as tags. | ||
<html> | <html> | ||
<div> | <div> | ||
<p> | <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. | 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"> | ||
− | + | === 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 class="grn blu"> | <div class="grn blu"> | ||
− | + | === 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 === | |
More-specific CSS will override less-specific CSS. | More-specific CSS will override less-specific CSS. | ||
div { background-color: blue; } | div { background-color: blue; } | ||
Line 25: | Line 25: | ||
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"<). | ||
− | + | === !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. | ||
== Operators == | == Operators == | ||
− | + | === . (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) === | |
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) === | |
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) === | |
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) === | |
== Instructor Notes == | == Instructor Notes == |
Revision as of 04:31, 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.
<html> <div> <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.
<div id="me">
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 class="grn blu">
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.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; }
(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