Difference between revisions of "Anatomy of a Webpage 2"
m |
m (restructure) |
||
| Line 93: | Line 93: | ||
== 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. | ||
| − | + | === Pseudo and Attribute Selectors === | |
For selecting form types and other elements. | 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 === | |
CSS which is dependent upon the size of the browser window. | CSS which is dependent upon the size of the browser window. | ||
| − | + | === Transitions === | |
Making CSS move. | Making CSS move. | ||
| − | + | === Frameworks & Utilities === | |
**LESS | **LESS | ||
**Bootstrap | **Bootstrap | ||
Revision as of 05:49, 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.
<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