I've recently been working through the Codeacademy HTML/CSS course, formalizing the scraps of web knowledge I've picked up in past co-op jobs. I like Codeacademy's format, they use an in-browser coding environment with step-by-step exercises to teach the basics of a particular language.
I'm not allowed to directly post the course material, so here are the notes I wrote while taking the course. I'm mostly posting these for posterity, but perhaps somebody somewhere will find them useful.
BASICS
HTML is the basic language used to crate webpages. We use HTML to build a "skeleton" which contains content.
HTML == HyperText (text with links to other pages) Markup Language (text which transforms into other things)
CSS (Cascading Style Sheets) customizes the way HTML pages look.
HTML TAGS
<___> is a tag. Tags often come in pairs with </____> and are used to say something about the code between the tags. Tags can be nested. It's good practice to indent nested brackets.
<!-- --> is the comment tag.
<!DOCTYPE html> at the start of a webpage informs interpreters that this page will be HTML. When the webpage is transmitted to a browser, they aren't necessarily getting a raw .html file so we can't expect them to just "figure it out"
<html> </html> tags should encapsulate blocks of html code. This allows us to use multiple coding languages in a single page without confusing the interpreter.
An HTML file typically contains two parts: a head and a body.
HEAD AND BODY
<head> </head> defines the head of a webpage. This section should contain information about the HTML file, like its title.
<title> </title> defines the title within an HTML page's header. The title appears on a browser's title bar or page tab.
<body> </body> defines the body of a webpage. The body contains the content of your page,
<h1> </h1> create "headings" for the things contained inside. By default, a piece of text inside h1 tags will be larger and bolded. There are multiple levels of headings, from h1 to h6, with h1 being the biggest and h6 being the smallest.
TAGS WITH ATTRIBUTES
Tags can contain "attributes", which are placed inside of the opening tag.
<a> </a> tags define hyperlinks (a for "anchor", don't ask me why). This tag has the attribute "href" which tells the link where to go. For example, <a href="http://www.website.com"> My Link </a>.
These links also have the property "text-decoration," which changes the way links look relative to normal text. Using the value "none" will make links look just like normal text (ie, no underline)
<img /> is a self-closing tag which puts an image on the webpage. It has the property "src" which is the (URL) location of the image. For example, <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
Images can be used as links by placing the image tag inside of link tags.
<p> </p> defines a paragraph within the body. Typically, strings within the same paragraph will be separated by a space and strings within separate paragraphs will be separated by a blank line.
LISTS
<ol> </ol> is an ordered list, where list items are contained in <li> </li>. By default, each list item will have a number placed beside it.
<ul> </ul> creates unordered lists. Similar to ordered lists, but with bullet points instead of an index number.
Lists can be nested within eachother. You can have an unordererd list of ordered lists, for example.
STYLE
The appearance of text in a paragraph, header or many other blocks can be changed with the "style" attribute.
Multiple style attributes can be changed simultaneously by separating each argument with a semicolon. For example, <h3 style="color:red; font-size:12px">
Font Size can be changed with <p style="font-size: 12px"> to set the size of the font in that paragraph to 12 for example.
Color can be set with <p style="color:red">, for example.
Font can be chosen using style="font-family: Arial" for example.
Entire sections can be styled at once. Applying normal color to <body> would change the color of all text in the body for example.
Background color of a secion can be set with <body style="background-color: red"> for example.
Text can be aligned using style="text-align:center"
<strong> </strong> makes the contained text bold. This can also be done with the style parameter "font-weight: bold".
<em> </em> makes the contained text italicized (emphasized)
TABLES
<table></table> arranges the contents into rows, with each row containing a number of cells (analogous to columns)
Tables have a Header and a Body, represented by <thead> and <tbody>
<tr></tr> adds table rows, which are used in both the table body and the head. Typically the head will only have one row.
<th></th> creates a header cell for a single column within a row. It's the header counterpart to <td>.
<td></td> adds table data, which is basically one cell in a row.
The "colspan" attribute forces a header to be a certain number of columns wide. For example, <th colspan="3">Three Columns!</th>. This is useful if you want to add title <th> which stretches across the entire top of the table.
DIV AND SPAN
<div></div> creates a division, which divides the page into containers. For most purposes, the paragraphs and headers we've dealt with until now were just divs with size matching the text within them.
The pixel size of a div is controlled through the style attribute, using "width:___px" and "height:___px"
<span></span> is a somewhat generic tag for grabbing and customizing specific pieces of content on our page. If we want to apply some custom CSS to a specific sentence within a paragraph, we would wrap that sentence in <span> and apply our attributes inside. This is like a general-purpose <strong> or <em>.
The "border: size style color" property allows elements to have a border
The "border-radius" property changes the radius of the circle around which the border's corners are bent. At 0px the corners are right-angles, and when radius >= half the div's height the sides of the div will be two semi-circles. No cool distorted edges from oversized radii unfortunately.
The "margin" property defines how much space is placed on either side of the div. That is, it positions the div itself (not elements inside of the div). Setting "margins: auto" will put equal margins on either side of the div.
CSS INTRODUCTION
CSS stands for Cascading Style Sheets
Style sheets describe how an HTML file should look, typically by setting the default values for the "style" attribute of specific HTML tags. This is more efficient when you want to apply the same style to many instances of an HTML tag, perhaps across several pages.
What we've looked at previously is called "inline styling", setting the style of a tag within that tag. We can also do "inline CSS" where we place a <style></style> tag within a container and write CSS code inside that tag. These are localized alternatives to style sheets.
Cascading means that multiple sheets can be used simultaneously, with one sheet taking precedence over another. "Hierarchical Style Sheets" doesn't sounds as good.
To use an external CSS file, you must put a <link> tag in the head of the page. <link> has three attributes: "type" (ie. type="text/css"), "rel" (ie. relationship, ie. rel="stylesheet") and "href (ie. href="/home/stylesheet.css")
CSS SYNTAX
Comments are surrounded with /* exampleText */
selector {
property: value;
}
selector can be an html tag, like "p" or "a" or "table"
property is an aspect of the selector, like "color" or "font-size"
value is what we want to set the property to, like "red" or "16"
Note the semicolon after property: value; This tells css you're done with that pair, which implies pairs can stretch across multiple lines.
Multiple-selection allows you to affect only selectors within certain nesting structures. For example, if you only want to touch paragraphs which are nested within 3 divs, you could use "div div div p:". Note that the nesting doesnt have to be direct, we'll select an element even if there are un-selected tags between the layers we're looking for.
To select ONLY a precise sequence of layers, we use the ">" operator. For example, "div > p" will only select paragraphs which are the direct children of a div.
* acts as a selector for every element on the page simultaneously.
PRECISE DETAILS
CSS colours can be set with hexidecimal values, allowing far more options than just "red", "green", etc. CSS uses 6-digit hex numbers represented as "#______"
CSS fonts can be set in pixels (which are absolute) or in em's (which are relative to the default font size for whatever screen is being used). This is useful for making platform-agnostic sites. Note that em's here are unrelated to the <em> tags used for italics.
CSS guarantees that users will have at least 3 font families: Serif, Sans-Serif and Cursive. Passing multiple values (comma-separated) to font-family will allows CSS to cycle through them if the some are not usable. It's a good idea to set one of the three "guaraneed" fonts as your final option, in case the ones you want are unavailable.
CASCADE LOGIC
HTML and CSS basically operate in a family tree. You start with a base webpage, each tag branches upward, and each nested tag creates a sub-branch. This is normally discussed in terms of parents, children and siblings.
CSS gives precedence to the properties of the more-specific selector. However, properties of an upsteram selector will still be applied if the downstream selectors do not modify those specific properties. If you say "all paragraphs are bold and red", and "all paragraphs nested in divs are green," the result will be that some paragraphs are red, others are green, and all are bold.
Classes and IDs are considered "more specific" than nesting.
CLASSES AND IDs
Classes and IDs can be used as CSS selectors, in addition to the universal selector and normal HTML elements. Classes are useful for customizing several different kinds of selectors in the same way, while IDs are useful for customizing individual elements while avoiding inline styling.
An element's class is set in an attribute, like <div class="someclass">.
An element's ID is set in an attribute, like <div id="someID">
In a CSS file, classes are selected with the prefix ".", like ".myClass {"
In a CSS file, id's are selected with the prefix "#", like "#myClass {"
PSEUDOSELECTORS
A pseudoselector allows us to select only "certain kinds" of elements which aren't directly represented in the HTML tree. For example, <a> has a pseudoclass "hover" which is only applied while the user hovers their mouse over a link. The syntax is "selector:pseudo-selector {".
a:link is the pseudo-class for an unvisited link
a:visited is the pseudo-class for a visited link
a:hover is the pseudo-class for a link the user is hovering their mouse-cursor over
___:first-child is the pseudo-class for any element which is the first child of their parent. So if you have <div> <p>One</p> <p>Two</p> <p>Three</p> </div>, then p:first-child will only select paragraph One.
___:nth-child(n) will select any element which is the nth child of its parent. So in the above example, p:nth-child(2) would select paragraph Two.
POSITIONING
HTML position can be though of as a set of boxes, sitting inside of eachother: Margin > Border > Padding > Content
The "display" property changes the basic layout of a piece of content. It can be set to "Block" (box format, takes up full width of the page), "inline-block" (box format, allows other elements to sit on same line), "inline" (allows other elements to sit on same line, unformatted and defaults to smallest possible width with overlap), "none" (makes element disappear from the page).
Margins are the space around elements. A smaller margin allows an element to be closer to its neighbours. Setting a margin to "auto" will try to put equal space on either side of the element.
The margin for each side can be set using margin-top:, margin-right:, etc, or all at once with margin: __ __ __ __
Borders are the edge of the visible element.
Padding is the space between the content and the border. Smaller padding makes the border closer to the content. As with margin, each side of padding can be set with padding-top, padding-right, etc or all at once with padding: __ __ __ __
Content is whatever "stuff" we place in the element. When we make a paragraph, the content is the text in the paragraph.
Top, Left, Bottom and Right are sometimes referred to by their first letter. For example, Top Margin == TM, Right Padding == RP
Negative values are accepted and will drag an element in the opposite direction. For example, setting the left margin to -20px will drag the element 20px to the left.
The "Float" property tells an element to move in a direction until it reaches another element or the edge of the page. For example, "float: right" on an empty page will move the element to the right edge of the page.
The "clear" property tells an element to move below any floating elementson the specified side of the page (or both). We might tell a footer to "clear: both" so that it will sit under all of the floating elements on the page.
The "position" property allows elements to switch between static, absolute, relative and fixed. The default is static, and the elements will place themselves in whatever order they normally would. This often means top-to-bottom, one per line.
Absolute positioning will place the element relative to the first parent element which is NOT static, or relative to <html> if no such parent exists. This may often be the same position as static.
Relative positioning moves the element relative to where it would've landed from static positioning.
Fixed position will set the element to static position when the page first loads, and then lock the element to that position in the browser. Even if its' parent scrolls out of view, the element will stay in the same position on the user's screen.
The "z-index" property sets where an element will be "stacked" on the page. 1 is he frontmost element, and elements with no z-index are the backmost elements.