HTML & CSS

It’s hard to narrow down what we need to cover when it comes to HTML and CSS. I will be answering as many questions as possible in call, but I also figured it might be helpful to list the best HTML and CSS tutorials I know of out there on the web.

HTML Intermediate Tutorial
HTML Dog

CSS Intermediate Tutorial
HTML Dog

CSS Positioning
Elated

CSS Positioning
W3Schools.com

CSS Positioning
Brainjar

Some major ideas to keep in mind:

The Box Model

Browsers see every element in your HTML page as being contained in its own rectangular box. You can style these boxes by adding borders, margins, padding and even backgrounds to them. You can also use CSS to reposition them on the page. Here is a first look at the Box Model.

The Box Model
The Box Model

Content Area:
This is the actual content itself, images or text.

Element Width
This is the box that gets sized when you apply width and height properties in your code. These edges are not visible in actual practice.

Padding Area:
This is the area between the content area and the border of the content box. It is optional.

Border:
This is a line that surrounds the padding area. It can be styled in several ways: color, width, pattern. Each side can be styled separately. Borders are optional.

Margin:
This is an optional amount of space added to the outside of the border. Margins are always transparent and can be given a width for each separate side.

Containing Block Width:

This is the edge of the element, and it includes the entire area taken up by the element, its padding, borders, and margins.

What does Cascade mean?

There are several style sheets being applied to an HTML document whenever it is accessed by a browser. Cascade refers to the fact that there is a hierarchy that is followed to determine which style is followed. The style rule or sheet that has the highest precedence is the one that is used.

  • Browser default settings are overridden by
  • User style settings are overridden by
  • Imported style sheets are overridden by
  • Embedded style sheets are overridden by
  • Inline styles are overridden by
  • Any style marked !important by the author is overridden by
  • Any style marked !important by the reader

There is also a cascade in terms of specificity: the more specific the CSS selector, the more weight that style has.

Lastly, there is a cascade in terms of rule order: the last rule for an element is the one that will be used be the browser.

When you add CSS styles, elements pass down text style properties to elements they contain. Just as you inherit certain traits from your parents, HTML elements can inherit properties.

Let me restate that.

First of all, let me take an average html page and draw it out as a chart:

css_declarationsa

HTML documents have a certain heirarchy: the <html> tags contain the <head> and the <body> tags. The <body> tags contain the <h1>, <h2>, <p>, <img>, and <em><p>, <img>, and <em> tags. The <html> tag is the PARENT of the <head> and <body> tags. The <body > tag is the CHILD of the <html> tag. The <body> tag is the parent of the <h1>, <h2>, <p>, <img>, and <em>  tags and so on.

All elements contained within a given element are its DESCENDANTS. All elements higher than a given element are its ANCESTORS. ANy 2 or more elements contained by the same parent are SIBLINGS.

css_declarationsdThat means if you apply a text style to the <body> tag, all of its children will inherit that style. The img tag does not inherit the style because it is not and does not contain any live text.

css_declarationsb

If you apply a text style to the <p> on the right, its chile, the <em> element will inherit that style.

css_declarationsc

Any property applied directly to an element will override any inherited values. For example, if you style the <em> tag, that style will override any property it could inherit from the <p> tag.

Here is an excellent explanation of inheritance.

Advertisements