Difference between revisions of "Anatomy of a Webpage 2"
m (→!important) |
m |
||
| Line 8: | Line 8: | ||
=== 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 === | ||
| Line 23: | Line 23: | ||
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. | ||
Revision as of 04:42, 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