HTML and CSS: Difference between revisions

From Genecats
Jump to navigationJump to search
Line 273: Line 273:
Link and dynamic pseudo-classes, :link, :hover, :active, etc
Link and dynamic pseudo-classes, :link, :hover, :active, etc


[https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes Explanation of psuedo-classes] on the [Mozilla Developers Network.
[http://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes Explanation of psuedo-classes] on the Mozilla Developers Network.

Revision as of 20:16, 19 October 2012


Overview

This document covers HTML 4.01 and CSS 2.

General Rules for Web Development

Separate content (HTML), layout (CSS), and logic (javascript/php/etc)

  • HTML is for content
  • CSS is for layout
  • Keep styles/CSS out of the HTML
  • Keep javascript out of the HTML

Sticking to these rules will make code easier to read, easier to reuse, and easier to maintain.

HTML

The basic structure of an HTML 4.01 document

Example Basic Document

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="header">
This is my site!
</div><!-- #header -->

<div id="content">

<h1>Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque, orci ultrices aliquam 
tempor, sapien leo dignissim ante, pharetra rutrum diam augue a mauris.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque, orci ultrices aliquam 
tempor, sapien leo dignissim ante, pharetra rutrum diam augue a mauris.</p>
</div><!-- #content -->

<h1>Another heading</h1>

<table>
<thead>
<th>
	<td>r1c1</td>
	<td>r1c2</td>
</th>
</thead>
<tbody>
<tr>
	<td>r1c1</td>
	<td>r1c2</td>
</tr>
<tr>
	<td>r2c1</td>
	<td>r2c2</td>
</tr>
</tbody>
</table>

<div id="footer">
© 2012. Me.
</div><!-- #footer -->

<script type="txt/javascript">
// some javascript
</script>
</body>
</html>

An outline for a basic static Genome Browser page can be found here:

Important points

  • Links to external style sheets should always be in the <head></head>
  • Use <div> tags to divide up the page into logical "divisions"
  • Unless needed for the function of a page/application, JavaScripts should be included at the bottom of a page, just before the </body> tag. This is so the content of the page appears to the user as fast as possible. Once the content is loaded, by the time the user has scanned the page, the JavaScript will have loaded. This speeds up the whole process.
  • When closing tags that are opened much further up in a page, it's a good idea to comment them:
    • Closing by id: </div><!-- #header -->
    • Closing by class: </div><!-- .article -->

Block level elements vs. inline

Block

  • For blocks of content
  • Automatically fill entire with of parent element
  • Usually have default top and bottom margins
  • Examples: p, div, table, ul, blockquote, fieldset, form ...

Inline

  • For defining text or data
  • Examples: span, i, b, a ...
  • Block level elements can not reside inside inline elements, e.g.
    <span><p></p></span>

Which tags do/don’t require end tags

  • Required: most html elements require an end tag.
  • No end tag allowed; Void Elements:
    , <meta>, <input>, <link>, <img> ….
    • HTML 4 does not allow self-closing tags, e.g.
      or <img ….. />. Do not use them.
  • End tag optional: <p>, <li>, <tbody>, <head>, <tr>, <td> …
    • HOWEVER! Including end tags on ALL elements:
      • Is recommended by the W3C
      • Makes for more readable, less error-prone markup
      • In just good practice :)

Special characters in HTML

Some characters should not be directly typed in HTML documents, but an ASCII character equivalent should be used.

Deprecated tags (HTML you shouldn’t use)

  • Many tags that are deprecated are so because css does a better job
  • <font>
  • <center>
  • CSS replacements: font-family:, align: center, etc.

The W3C has an Index of HTML Elements with deprecated tags marked.

TIP!

To horizontally center a block-level element inside another block give it the CSS attribute margin: 0 auto;:

.centerMe {
    margin: 0 auto;
}

The 0 gives it no top or bottom margin, and the "auto" makes the browser put and even amount of margin on both the left and right side of the element, thus centering it.

Code style

  • HTML is case insensitive, but it has become the universal standard to use lowercase tags and attributes (xhtml requires lowercase).
  • All attribute names must be in quotes if they contain any non-numeric characters
    • OK: class=”mainContent”
    • OK: cellpadding=0
    • Not OK: width=100% (correct: width=”100%”)
    • Not OK: target=_blank (correct: target=”_blank”)
    • Not OK: border=1px (correct: border=”1px”)
    • Always using quotes recommended for consistency and maintainability.
  • Indent code for easier reading
  • Use comments, and properly format them
  • Two spaces not needed after a period, and in fact the second space will be ignored
  • Code should not be wider than average screen size
    • Easier to edit
    • Easier to debug

Oh, bloody semantics! They may default to look the same, but they don’t mean the same

<em> vs. <i>

  • <em> is for “emphasis”. E.g.,
    • “No, my <em>name</em> is Paris! I live in <em>Troy</em>.”
  • <i> is for writing things that require “italics” - so to speak... “[...] a span of text in an alternate voice or mood, or is otherwise offset from normal prose.” E.g.,
    • The name of a ship (The <i>Titanic</i>), an idiomatic phrase from another language (<i lang=”fr”>ooh la la</i>) or a species’ names (<i>Homo erectus</i>).

<strong> vs. <b>

  • <strong> represents strong importance for it’s content, but unlike <em>, does not change sentence meaning. E.g.,
    • <strong>Warning! This banana is dangerous!</strong>
  • <b> represents “a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance an with no implication of an alternate voice or mood.” …. sure..... E.g.,
    • “....never forgot the joy of her fifth birthday - feasting on <b>powdered toast</p> and opening her gift: a <b>Log from Blammo!</b>.”

id vs. class attributes

class

  • General, general rules for styling
  • Use very generic, reusable names

id

  • Unique to each page, for styling and scripting (and testing with Selenium)
  • Use very specific, descriptive names

Give (almost) everything an id - anything that is a unique item:

  • All <div>, <form>, <fieldset>, <input>, <textarea>, <table>, <img>, <ul>, <ol>
    • Using only a name attribute won’t cut it
  • If you don’t need it now, chances are, you will later

Common tag usage errors

<blockquote>

  • Strictly for content that is quoted from another source.
  • For an indent, best use

    with style margin-left: 10px;

<table>

  • Strictly to be used for displaying tabular data
  • Not for layout

<br>

  • To force a line break in a sentence or force proper formatting of things like mailing addresses
  • Not for adding space between content (we have CSS for that)

Missing alt text in <img> tags

  • Required as of HTML 4.01
  • Helps disabled users, and this text appears if the link to the image breaks

CSS

CSS Best Practices

Before

.experiment a {
    text-decoration: none;
}
.axisType a {
    text-decoration: none;
}

.elementType a {
    text-decoration: none;
}

After

.experiment a, .axisType a, .elementType a {
    text-decoration: none;
}
  • Declare font size for body in % (62.5%), then use em to set font sizes (font-size: 1.5em;). This is preferred over px or pt.

Cascading Order: the C in CSS

The order, starting with highest priority:

  1. User styles (styles set by the user in their browser)
  2. Inline styles (styles set in the HTML document - not recommended)
  3. Media type
  4. Importance (!important)
  5. Specificity
  6. Order within the style sheet (items lower in the sheet over ride styles higher up)
  7. Parent inherited styles
  8. Browser default styles


Inheritance

  • The family tree: DOM
  • Most tags inherit the styles of their parents
  • Styles not inherited: margin, width, border, etc.
    • It's usually logical which ones wouldn't be auto-inherited

Defining styles through context

Examples:

.copy h1 em {...}
.copy * em {...}
div.copy * {...}

So, for the first one, ".copy h1 em" means that each em element inside an h1 element that is inside and element with the class "copy" will get these styles. This is very useful and more flexible that styling everything using specific classes and ids.

Child and Sibling electors

Pseudo-classes

Link and dynamic pseudo-classes, :link, :hover, :active, etc

Explanation of psuedo-classes on the Mozilla Developers Network.