If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

For the CSS Beginner Tutorial we looked solely at HTML selectors - those that represent an HTML tag.

You can also define your own selectors in the form of Class and ID selectors.

The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

So the CSS might look something like:

#top {
	background-color: #ccc;
	padding: 1em
}

.intro {
	color: red;
	font-weight: bold;
}

The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id=“top”>

<h1>Chocolate curry</h1>

<p class=“intro”>This is my recipe for making curry purely with chocolate</p>

<p class=“intro”>Mmm mm mmmmm</p>

</div>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class ‘jam’.

• 0 Comments

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like:

h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}

You could make it:

h2, .thisOtherClass, .yetAnotherClass {
	color: red;
}

Nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:

#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}

Removes the need for classes or ID’s if it is applied to HTML that looks something like this:

<div id=“top”>

	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with chocolate</p>

	<p>Mmm mm mmmmm</p>

</div> 

This is because, by separating selectors with spaces, we are saying ‘h1 inside ID top is colour #ff0‘ and ‘p inside ID top is red and bold‘.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.

• 0 Comments

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

• link is for an unvisited link.
• visited is for a link to a page that has already been visited.
• active is for a link when it is gains focus (for example, when it is clicked on).
• hover is for a link when the cursor is held over it.

a.snowman:link {
	color: blue;
}

a.snowman:visited {
	color: purple;
}

a.snowman:active {
	color: red;
}

a.snowman:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.

Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

You should also be able to use the hover pseudo class with elements other than links. Unfortunately, Internet Explorer doesn’t support this method. This is a bloody irritation because there are lots of nice little tricks you can do that look delightful in other browsers.

• 0 Comments

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

margin, padding and border-width allow you to amalgamate margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left;

So:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Can be summed up as:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color and border-style can also be summed up as, for example:

p {
	border: 1px red solid;
}

(This can also be applied to border-top, border-right etc.)

By stating just two values (such as margin: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left.

Font-related properties can also be gathered together with the font property:

p {
	font: italic bold 1em/1.5 courier;
}

(Where the ‘/1.5′ is the line-height)

So, to put it all together, try this code:

p {
	font: 1em/1.5 “Times New Roman”, times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Lovely.

• 0 Comments

There are a number of properties involved in the manipulation of background images.

Luckily, the property background can deal with them all.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

This amalgamates these properties:

• background-color, which we have come across before.
• background-image, which is the location of the image itself.
• background-repeat, which is how the image repeats itself. This can be repeat (equivalent to a ’tile’ effect across the whole background), repeat-y (repeating on the ‘y-axis’, above and below), repeat-x (repeating on the ‘x-axis’, side-by-side) or no-repeat (which shows just one instance of the image).
• background-position, which can be top, center, bottom, left, right or any sensible combination, such as above.

Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.

It is easy to get carried away with background images and plaster them all over your web pages. Some visually hyperactive people might believe it looks good to have a full-on brightly coloured photograph tiled across the background of a page, giving the user a Mensa-esque challenge in deciphering the foreground text. This is an extreme example, but the fact is that the most user-friendly, readable text is black on a plain white background or white on a plain black background (there is also a suggestion that a slightly off-white or off-black background is better as this reduces glare).

So, the best use of background images is either to use them where there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).

• 0 Comments

This page is for those who know HTML, but might be unaware of the standards involved in future-proof XHTML and the philosophy behind the separation of meaning and presentation.

Separating meaning and presentation

HTML was never meant to be used for presentation, but user-agents incorporated elements that formatted text and developers found ways to manipulate layout. With the power of CSS it is now no longer necessary to style using HTML and meaning (HTML) can now be completely separated from presentation (CSS).

There are a number of benefits to this - it should greatly decrease file sizes, it has the flexibility of a central style sheet that applies to the entire website rather than an individual page and it should also produce pages of much greater accessibility.

Following this philosophy basically means you shouldn’t style anything within the HTML. Tags such as font or attributes such as bgcolor should not be used. Even the border attribute inside an img tag is no longer valid in XHTML 1.1. This shouldn’t be a problem - there is no styling that can be done in HTML that can’t be done, and done better, with CSS.

It isn’t just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate. For example, h1, h2 etc. should be used for headings - you should not just use CSS to make fonts larger.

A good guide is to see if a visual browser, with its default styling, presents the document well without a style sheet.

Tables should not be used for layout - tables are designed to display tabular data. This is perhaps the most difficult technique for experienced HTMLer’s to get used to as it completely changes the way the HTML has traditionally been structured in the past. This approach greatly reduces the size of the page and, due to the resulting linear code, it becomes much more accessible.

Read the Layout page in the CSS Advanced Tutorial for more on this.

Tags

In XHTML all tags should be lowercase and must be closed. For those tags that do not have closing tags (such as br and img), they must close themselves with a ‘/’ at the end (such as <br />). Note that there should be a space before the forward-slash.

The markup must be well formed, with elements properly nested (for example, <strong><em>this</em></strong>, not <strong><em>this</strong></em>).

All documents must have html, head, title and body elements. They must also start with a document type declaration.

The body of the document should start with p, h1, h2, h3, h4, h5, h6, div, pre, address, ins or del.

Attributes

All attributes must also be lowercase and their values in quotation marks.

Minimized attributes are not allowed (such as <input type="checkbox" checked />). Traditionally minimized attributes must be given the value that is the same as the name of the attribute (such as <input type="checkbox" checked="checked" />).

The name attribute is no longer valid (except in form elements) and should be replaced with id.

The target attribute is not a valid attribute. Praise be. It was daft anyway.

The alt attribute in the img tag is compulsory.

Accessibility

The reasons for making web pages accessible to users with disabilities are quite self-evident. Not only is it moralistic, but it will also benefit our future as web users grow older and the acuteness of the senses degenerates. Accessibility isn’t just about accommodating people with severe disabilities, it is about making it easier for a great number of people with minor (predominantly visual) impairments.

There are increasing legal implications such as the introduction of ‘Section 508′ in the US that makes a (half arsed) attempt to enforce certain accessibility initiatives and in the UK, all government websites must reach a specified degree of accessibility. How long until similar legislation is applied to general commercial websites, as it is for buildings?

If you follow the above practices, your HTML should already be highly accessible to users with disabilities. There are further initiatives that can make your web pages even more accessible (for example, see the Accessible Links and Accessible Forms pages) and it really isn’t that difficult.

• 1 Comment

This page deals with a number of ways that links can be made more accessible.

Tabbing

Users who do not or cannot use pointing devices can ‘tab’ through links, and as such, links should be in a logical tabbing order. The tabindex attribute allows you to define this order although if the HTML is linear, as it should be, a logical tabbing order should automatically fall into place.

Accesskeys

Accesskeys allow easier navigation by assigning a keyboard shortcut to a link (which will usually gain focus when the user presses ‘Alt’ or ‘Ctrl’ + the accesskey). For users who do not use pointing devices, this is a much quicker and easier way to navigate than tabbing through links.

It isn’t necessary to put accesskeys on all links, but it is a good idea to apply them to primary navigation links.

<a href=“somepage.html” accesskey=“s”>Some page</a>

The trouble with accesskeys is that there is often no way the user can find out what they are (unless they look at the source code). JAWS, the most popular screen reader out there will read these accesskeys out loud, but to take full advantage of them, you will probably want to make them more explicit.

You could apply a method similar to the ’skip navigation’ link technique (see below), or opt for a separate page explaining the accessibility-related functionality of your site, including the accesskeys. A method that is growing in popularity is to underline a corresponding letter in the link, similar to the method used in the menus of most Windows applications.

See the article in A List Apart for more information.

Link titles

It is a good idea to add the title attribute, which will pop up a description of where the link will take the user, so improving navigation.

If the link is used to execute Javascript, it is also beneficial for explaining what should (but won’t) happen for users that do not have Javascript functionality.

<a href=“#” onclick=“opennastypopup()” onkeypress=“opennastypopup()” title=“Open a nasty Javascript pop-up window”>Monster</a>

Popups

Talking of Javascript popups, if you will insist on using them, or more likely someone is telling you to use them, you can make things much more accessible by using onkeypress as well as onclick. Also, if you include a normal page in the value of the href attribute of the link and return false from a function that launches the popup, if the user does not have Javascript, a normal page will load anyway. For example:

<script type=“text/javascript”>
	function opennastypopup() {
		window.open(“monster.html”, “”, “toolbar=no,height=100,width=200″);
		return false;
	}
</script>
…
<a href=“monster.html” onclick=“return opennastypopup()” onkeypress=“return opennastypopup()”>Monster</a>

Adjacent links

Adjacent links should be separated by more than spaces, so that they can be discerned by screen readers.

This can be done by placing characters in-between links (such as a pipe - ‘link | link‘) or surrounding it by characters (such as square brackets - ‘[link] [link]‘). It is also a good idea to put navigation links within lists. These can then be styled with CSS to be displayed however you choose, even side-by-side (using display: in-line).

Skipping navigation

You should give users of screen readers an opportunity to skip the navigation and go straight to the content. This is because if your navigation is consistent (as it should be), a user does not need to go through the same information on every page, especially if there is a lot of it. You can skip the navigation by placing a link before it that skips directly to the content.

It might look something like this:

<div id=“header”>
	<h1>The Heading</h1>
	<a href=“#content” accesskey=“n”>Skip navigation</a>
</div> 

<div id=“navigation”>
	<!–loads of navigation stuff –>
</div>

<div id=“content”>
	<!–lovely content –>
</div>

Obviously, you do not want this link to be displayed in visual browsers, so you can use CSS to render it invisible.

This is a CSS tip, but is specific to ‘Skipping navigation’. It involves the method to use to render the link invisible.

The most obvious way would be to use display: none, but as some screen readers will pick up on this and not read the link, as intended, the ‘Skip navigation’ link must be displayed.

It still doesn’t have to be visible though - there’s no point in showing it to visually able users. So instead of having a style containing display: none, you can set the width and height of the element to zero (width: 0; height: 0; overflow: hidden;), which has the same visual effect but will be read by screen readers.

• 0 Comments

There is still much overuse of the br tag when p should be used for paragraphs, but it is generally accepted that p tags should be used to represent paragraphs. By the same logic, there are a number of tags that should be used to define certain text elements such as quotations, abbreviations and computer code.

It should be kept in mind that although most browsers will render these tags in various ways, the important point to remember is that it isn’t what each element looks like, but rather what meaning it applies.

Abbreviations and acronyms

abbr and acronym are used for abbreviations and acronyms respectively.

An abbreviation is a shortened form of a phrase. Very general. An acronym however is an abbreviation made up of the initial letters (or parts of words) of the phrase it is representing. So CSS is a valid acronym, whereas HTML and XHTML are not (if ‘Hypertext markup language’ was an acronym, it would be ‘HML’. Similarly, XHTML would be EHML).

For optimum accessibility, the phrase that the acronym or abbreviation is representing should be used in the title attribute.

<p>This web site is about <abbr title=“HyperText Markup Language”>HTML</abbr> and <acronym title=“Cascading Style Sheets”>CSS</acronym>.</p>

For some baffling reason, Internet Explorer, the most common web browser, doesn’t support the abbr tag. Luckily, a guy called Marek Prokop has developed a clever Javascript workaround for this.

There is a lot of discussion about the use of abbreviation and acronym elements. Lars Holst provides perhaps the most detailed insight.

Quotations

blockquote, q and cite are used for quotations. blockquote is block-line and used for large citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.

Again, the title attribute can be used to show where the citation has come from.

Note: q does not usually change the appearance of the enclosed text - you need to use CSS if you want to apply a style.

<p>So I asked Bob about quotations and he said <cite>I know as much about quotations as I do about pigeon fancying</cite>. Luckily, I found HTML Dog and it said…</p>

<blockquote title=“From HTML Dog, http://www.htmldog.com/”>
<p>blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.</p>
</blockquote> 

Code

There are a few tags, code and var that are specifically for computer code and pre and samp, which are, in practice, also used mainly for code.

code is used for computer code.

var is used to indicate a variable within code.

<code><var>ronankeatingisbland</var> = true;</code> 

samp is similar to code, but is supposed to be used for a sample of outputted code.

pre is preformatted text and is unusual in HTML tags that is preserves the white space within it. It is most commonly used for blocks of code.

<pre>
<div id=“intro”>
	<h1>Some heading</h1>
	<p>Some paragraph paragraph thing thing thingy.</p>
</div>
</pre> 

Definition terms

dfn is a definition term and is used to highlight the first use of a term. Like abbr and acronym, the title attribute can be used to describe the term.

<p>Bob’s <dfn title=“Dog”>canine</dfn> mother and <dfn title=“Horse”>equine</dfn> father sat him down and carefully explained that he was an <dfn title=“A mutation that combines two or more sets of chromosomes from different species”>allopolyploid</dfn> organism.</p>

Addresses

address should be used for an address.

<address>
	HMTL Dog House<br />
	HTML Street<br />
	Dogsville<br />
	HT16 3ML
</address> 

Obscure rarities

There are some tags that are worth noting, but are rarely used because of their super specific nature.

bdo can be used to reverse the direction of the text, and can be used to display languages that read right to left. The value of the required attribute dir can be ltr (left to right) or rtl (right to left).

<bdo dir=“rtl”>god lmth</bdo> 

kbd is used to indicate text that should be typed by the user.

<p>Now type <kbd>woo hoo</kbd></p>

ins and del are used to display editorial insertions and deletions of text respectively. It can have the attributes datetime (in the format of YYYYMMDD) and cite (a URL to a description as to why the insertion or the deletion has been made).

The ins element is usually shown underlined and the del element is usually displayed with a strikethrough.

<p>This is some <del datetime=“20030522″>nonsense</del> <ins cite=“http://www.htmldog.com”>very informative stuff</ins> that I’ve written.</p>

Presentational elements

b, i, tt, sub, sup, big and small are all presentational elements and as such, by their very definition, shouldn’t be used when attempting to separate meaning and presentation. b defines a bold element for example, which has no meaning at all - these tags define purely visual characteristics, which should be the job of CSS. Even though they are valid tags, there are others (such as strong and em, which are examples of ‘phrase elements’) that actually add meaning. If you want to solely replicate specific styles of these tags, without any intended meaning, then you should apply CSS to span ta

• 1 Comment

So you think you know how to make a table. Sure, you know the table, tr, td and th tags, you’ve even got the rowspan and colspan attributes in your pocket. You can make a really cute little plywood coffee table, but don’t you want to know how to make one of those polished solid wood, glass top dining tables that can take the weight of an oversized elephant?

You do? Oh joy.

The columns strike back

Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite dejected.

Luckily for those eager columns though, the colgroup and col tags have come to their rescue.

These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or coloured differently, as without this, you need to style individual cells.

Here is an example of these tags in use:

<table>
	<colgroup>
		<col />
		<col class=“alternate” />
		<col />
	</colgroup>
	<tr>
		<td>This</td>
		<td>That</td>
		<td>The other</td>
	</tr>
	<tr>
		<td>Ladybird</td>
		<td>Locust</td>
		<td>Lunch</td>
	</tr>
</table>

The styles of the class ‘alternate’ will be applied to the second column, or the second cell in every row.

You can also use the span attribute on either colgroup or col, in a similar way to rowspan and colspan.

Using it with the colgroup tag will define the number of rows that the column group will belong to, for example <colgroup span="2"></colgroup> would group the first two columns. When span is used in colgroup, you shouldn’t then use col tags.

Using span in the col tag is more sensible, and could, for example, be applied to the above example like this:

<table>
	<colgroup>
		<col />
		<col span=“2″ class=“alternate” />
	</colgroup>
…

This would apply ‘alternate’ to the last two columns.

Oh, but there had to be a catch, didn’t there? Here it is: The only styles you can apply to columns are borders, backgrounds, width and visibility.

Internet Explorer appears to behave much better than other browsers because it takes on board pretty much any CSS property, such as color, but, as it turns out, this is only because it acts in a mad wacky way. For a detailed explanation of this peculiar anomaly, let Hixie explain.

Summary and Caption Interlude

A brief and easy accessibility consideration is to always apply a summary and caption to the table.

A summary can be applied to a table using the summary attribute in the opening table tag. This won’t be displayed, but can aid in a non-visual representation of a table.

The caption tag defines the caption straight after the opening table tag. It will appear above the table by default, but can be placed top, right, bottom or left with the caption-side CSS property, although IE won’t take any notice of this.

<table summary=“The mating habits of locust, showing how many use protection and how many have a cigarette afterwards”>
	<caption>Locust mating habits</caption>
…

Headers, footers and the quest for the scrolling table

thead, tfoot and tbody allow you to separate the table into header, footer and body. This is particularly useful for large tables and when printed for example, the header and footer rows should appear on every page.

These elements must be defined in the order thead - tfoot - tbody and would look like this:

<table>
<thead>
<tr>
	<td>Header 1</td>
	<td>Header 2</td>
	<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
	<td>Footer 1</td>
	<td>Footer 2</td>
	<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
		<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
…
</tbody>
</table>

You can make the tbody element scroll in Mozilla, by applying the style overflow: auto; max-height: [whatever] to it. You will then see the header and footer kept in place and a vertical scroll bar to the right of the body. You should use the max-height property because IE doesn’t recognise it and so it is safer than using the height property, which IE would apply to every row.

Note: Back to normal browser differences, this time IE doesn’t have a clue when it comes to headers and footers, and although it renders them in the table, they will not appear at the top and bottom of every printed page, let alone deliver the scrolling table.

Be wary of using scrolling tables. Although they serve a very useful purpose, most users aren’t used to them and may believe that the data presented above the line is the only data available.

• 0 Comments

Forms aren’t the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form.

Labels

Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:

<form>
<label for=“yourName”>Your Name</label> <input type=“text” name=“yourName” id=“yourName” />
…

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Note: name and id are both required - the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a legend with the legend tag.

Note: Visual browsers tend to represent field sets with a border surrounding them and legends breaking the left of the top border.

<form action=“somescript.php” >
<fieldset>
<legend>Name</legend>
	<p>First name <input type=“text” name=“firstName” /></p>
	<p>Last name <input type=“text” name=“lastName” /></p>
</fieldset>
<fieldset>
	<legend>Address</legend>
	<p>Address <textarea name=“address” ></textarea></p>
	<p>Postal code <input type=“text” name=“postcode” /></p>
</fieldset>
…

Option groups

The optgroup tag groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

<select name=“country”>
	<optgroup label=“Africa”>
		<option value=“gam”>Gambia</option>
		<option value=“mad”>Madagascar</option>
		<option value=“nam”>Namibia</option>
	</optgroup>
	<optgroup label=“Europe”>
		<option value=“fra”>France</option>
		<option value=“rus”>Russia</option>
		<option value=“uk”>UK</option>
	</optgroup>
	<optgroup label=“North America”>
		<option value=“can”>Canada</option>
		<option value=“mex”>Mexico</option>
		<option value=“usa”>USA</option>
	</optgroup>
</select>

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements - tab stops and access keys.

The accesskey and tabindex attribute can be added to the individual form tags such as input and also to legend tags.

<input type=“text” name=“firstName” accesskey=“f” tabindex=“1″ />

For more about this, see the Accessible Links page.

• 0 Comments