Summary 1 of HTML and CSS Tutorial by Shay Howe - Syntax

This is just a summary of this tutorial for reference purposes. I learn by typing things down.

To go to the original tutorial go here

Environment * Ruby 1.9.2p320 * Rails 3.2.3 * MAC OSX 10.7.3 * Editing with TextMate * iterm2

What is HTML

“HTML is a hyper text markup language created to give content structure and meaning.”

HTML comments use this format:

<!-- This is an HTML comment -->

What is CSS

“CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance.”

HTML and CSS are independent of each other.

CSS comments use this format:

/* This is a CSS comment */

Example: HTML vs CSS

The HTML p is an element used to display a paragraph of text on a web page. CSS uses the p selector to give the paragraph style properties of color, font size, font weight, etc.

HTML Terms

Elements

Designators that define objects like structure and content.

Examples: h1, p, a, div, span, strong, em.

Attributes

Properties to provide instructions to elements.

Examples:

id, class, title, src (media source), href (hyperlink reference).

<a href="http://tomordonez.com", title="Tom's Blog">Tom's Blog</a>

HTML Document Structure and Syntax

All HTML documents have these declarations and tags:

Doctype declaration

Tells web browsers which version of HTML to use

html tags

Shows the beginning and end of the document

head tag

Has meta data, the document title and links to external files. Any content here is not visible on the web page.

body tag

Has all the content visible on the web page

Example of html document structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Que calor tan HP!</title>
    </head>
    <body>
        <h1>We are in hell</h1>
        <p>The extreme</p>
    </body>
</html>

CSS Terms

Selectors

Determines the elements to which the style is applied to. It could have a combination of attributes (IDs, classes, types).

Selector is identified because it comes before the curly braces. {

p {...}

Type Selectors

Apply style to elements without any necessary attributes.

<!-- HTML -->
<p>...</p>

<!-- CSS -->
p { ... }

Class Selectors

Apply the same style to a group of elements by giving them the same class attribute. Denoted in CSS with a leading period. You can use the same class attribute on many elements of the page.

<!-- HTML -->
<div class="awesome">...</div>

<!-- CSS -->
.awesome {...}

ID Selectors

Apply the style to one unique element at a time. Denoted in CSS with a leading hash. You can only use it once per page and reserved for significant elements.

<!-- HTML -->
<div id="good">...</div>

<!-- CSS -->
#good {...}

Combining Selectors

You can combine selectors and inherit styles. Start with a generic selector and work your way to be more specific.

ul#social li {
    padding: 0 3px;
}

Additional Selectors

There are more advanced selectors. Lookup the best selector for each element in addition to type, class and ID. Check selectors for browser support.

Properties

Determines the style applied to an element.

Identified as the text before the colon. ;

p {
    color: #ff0;
    font-size: 16px;
}

Values

Determines the behavior of a property.

Identified as the text between the colon and the semicolon

: #ff0;
: 16px;

CSS Structure and Syntax

CSS selectors are used to apply style to HTML elements. CSS allows styles to be inherited by multiple elements.

It is possible to set one style for all the text on web page to be of one color and font by using a CSS selector. Then you can use another selector to overwrite the style of a unique element.

Long vs Short hand

Multiple ways to declare the values of a property.

Long hand

Stack multiple declarations in one selector, one after the other

/* Long Hand */
p {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Short Hand

Use one property and list multiple values. Not all properties support short hand.

/* Short Hand */
p {
    padding: 10px 20 px;
}

Referencing CSS with External Stylesheets

Place content
Style HTML with CSS

Include all your styles with one external stylesheet, referenced in the head of the page.

The link element is used to define the relationship between HTML and CSS files, with the rel attribute and the value of stylesheet.

<!-- External CSS File -->
<link rel="stylesheet" href="folder/file.css">

Reset

Different browser style elements in a different way. Use Reset for cross browser compatibility.

CSS resets take every common HTML element and scale it to a unified style. They remove any size, margins, padding or additional styles. They need to be the first CSS styles rendered.

Use Eric Meyers reset here

Code Validation

The W3C has built validators for HTML and CSS that will scan your code looking for mistakes.

Tom Ordonez