Plasticx Blog

Capable of being shaped or formed

CSS: The Missing Manual (ISBN 0596526873)

Posted by Mike 01/14/2007 at 10:59AM

After reading Slashdot’s review of “CSS: The Missing Manual” by David Sawyer McFarland, I was interested in learning more about CSS so I picked up a copy.

The book gave me a better understanding about the different structures in CSS but what I really learned was how to properly structure HTML, validate HTML, and how valid HTML will improve search engine results for a page i.e. Seach Engine Optimization.
|

I recommend the book for your collection and here are my notes from reading the book …

Valid HTML and CSS

If a page’s HTML is not valid then CSS styles applied to the page by a web
browser are not guaranteed to render in a predictable way. When a web
browser does the rendering of invalid HTML it goes into a state that web
authors call “quirks mode”. When in quirks mode different browser versions
will render pages in sometimes wildly different ways.

What is meant by “valid” HTML is that the page starts with a DOCTYPE
declaration and a reference to that type’s Document Type Definition
(DTD). The DTD expresses the schema of the document which is how the
markup in the page should be structured. If the HTML page does not have
the structure it declares then it is not valid.

Two golden rules for HTML and CSS

  1. HTML is for page structure
  2. CSS is for formatting (text, font, colors, spacing, padding)

Suggestions for crafting valid HTML and CSS

  • Use HTML for page structure.
  • Use CSS for font settings, colors, padding, etc.
  • Use the proper HTML for the job i.e. use <li> tag for lists, not <table> tag for lists.
  • Do not use the <table> tag for page layout.
  • The <table> tag is for tabular data.
  • Use horizontal layout of <ul> tag for menus (as opposed to a <table>)
  • Use <div> and <span> when custom spacing is required, use CSS to define the spacing.
  • Don’t use old HTML formatting tags <font>, <b>, <i> (use CSS for formatting)
  • Use <strong> tag instead of <b> tag
  • Use <em> tag instead of <i> tag
  • Use paragraph <p> tags for groups of text rather than a <br> for text breaks (use CSS for padding).
  • Use heading tags to structure a page outline, <h1> is the root, <h2> through <h5> as children.

Structure

The following tags are used for page structure

  • <html> – HTML document root
  • <body> – body of HTML document
  • <a> – Hyper link and anchor
  • <img> – image
  • <p> – paragraph
  • <div> – document section
  • <span> – document section
  • <ul> – unordered list
  • <ol> – ordered list
  • <li> – list item
  • <stong> – strong text
  • <em> – emphasized text
  • <h1>, <h2>, <h3>, <h4>, <h5> – paragraph headings
  • <dl> – definition list
  • <dt> – definition term
  • <dd> – definition description
  • <blockquote> – long quotation
  • <cite> – a citation

The author says to forget you ever knew about these tags

  • <font> font tag, used for font formatting (use CSS!)
  • <b> bold tag, used for font formatting (use CSS!)
  • <i> italic tag, used for font formatting (use CSS!)
  • <br> break tag, used for text formatting (use <p> and CSS!)

Formatting

CSS is used to format HTML. Text attributes such as font family, size, and color are specified using CSS. Text spacing and padding are also specified using CSS. CSS attributes are applied to HTML with CSS selectors. CSS selectors are found in a CSS file. There are seven standard types of CSS selectors:

tag selector

Applies to all tags of the defined type.
Example CSS: h3 { color: #FF0000; }

class selector

Applies to tags that have a class attribute with a value
Example HTML: <p class=“foo”>Hello</p>
Example CSS: .foo { color: #FF0000; }

id selector

Applies to tags that have an id attribute with a value
Example HTML: <p id=“bar”>Hello</p>
Example CSS: #bar { color: #0000FF; }

descendant selector

Applies to descendant tags
Example HTML: <h2><strong>Hello</strong></h2>
Example CSS: h2 strong { color: #FF0000; }

group selector

Applies to styling multiple tags uniformly
Example CSS: li, h2, strong, p { color: #0000FF; }

universal selector

Applies to styling all tags uniformly
Example CSS: * { color: #0000FF; }

pseudo selector

Applies to states and attributes of a tag like the visited and hover states of <a> tag
Example CSS: a:hover { color: #FF0000; }

DocType

Every HTML page should specify its document type. The modern web browsers honor the common document types and behave in an expectant manner depending on the document type. If a document type is not specified or the page does not conform to its document type the web browser might enter a state known as “quirks mode”. You can not reliably know how a web browser will render a page when it is in quirks mode.

The HTML 4.01 and XHTML 1.0 are the two common doctypes and each has three sub types:

HTML 4.01 – Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 – Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Full list of recommended W3C doctypes
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Validation

Validation tools exists to assist in validating that a HTML page conform to its declared document type.

Search Engine Optimization

There are basically four points to ensure the best all around search engine rankings for a page.

  • Use valid HTML
  • The title in the header is concise and descriptive of the page
  • The page uses a layout with heading tags i.e. <h1>, <h2>, <h3>, <h4>, <h5>, etc.
  • The page has exactly one heading <h1> tag which like the title is the topic of the rest of the content contained on the page

References

W3C Markup Validation Service

http://validator.w3.org/

Slashdot Review:

http://books.slashdot.org/article.pl?sid=06/09/06/1441235

“CSS: The Missing Manual” @ Amazon.com

http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596526873

David Sawyer McFarland’s website

http://www.sawmac.com/missing/

Posted in , |

Trackbacks<

Use the following link to trackback from your own site:
http://plasti.cx/trackbacks?article_id=221

  1. jim him6
    05/17/2010 at 04:56AM

    I am really interested learning more about the CSS…I have learnt completely HTML…but need some good homework in CSS…

    Consulting Online Scheduler


Web Statistics