XHTML/CSS
Here are my notes that I use when coding a valid XHTML/CSS page. If you see any mistakes let me know 🙂
Fundamentals
• Must have:
<?xml version="1.0" encoding="iso-8859-1" ?>At the top followed by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">• All tags must be in lowercase.
• All tags (where applicable) must have ending tags
e.g
<p> must end with </p>
However tags like:
<br /> only have to use the short hand version as they do not have content to display in the tags.
• Loading the stylesheet:
<link rel="stylesheet" type="text/css" href="link.css">Lists
UnOrdered Lists (bullets etc):
<ul> </ul>
To list data this use:
<li> </li>
To change the bullet type add:
Regular bullet: type="disc"
Circle bullet: type="circle"
Square bullet: type="square"
Ordered Lists (numbers etc):
<ol> </ol>
To list data this uses
<li> </li>
To change the type add:
Roman Numerals: type="i" or type="I"
Letters: type="a" or type="A"
Numbers Numerals: type="1"
Quotation lists:
<dl> </dl>
To list the data they use
<dt> </dt> for the term .
<dd> </dd> for the definition.
Anchors
Tag: <a> </a>
To use for lists include attribute:
href="link.com"
alt = use alt attribute to show alternate text
title = use title attribute to display tooltip
Fragments using <a> </a>
<a href="top"></a>
To go to the top anchor, a link would be used:
<a href="#top">top</a>
Image properties
Use the <img /> tag
To include an image use src="linktoimage.gif"
Always have the width, height and alt of the image included in the tag:
<img src="linktoimage.gif" width="20" height="22" alt="someimage" />To align an image use the align attribute:
<img src="linktoimage.gif" width="20" height="22" alt="someimage" align="left" />vspace – creates a margin around the image at the top and bottom e.g vspace="10"
hspace – creates a margin around the image on the left and right sides e.g hspace="10"
CSS
• Selector
A selector is the tag, class or ID you want to apply the style to
• Braces
{ and } encompass the style information
• Seperator
; is used after each style piece
• Colon
A colon is used instead of =
e.g
font-family: verdana;
Example in separate stylesheet:
body
{
font-family: verdana;
color: #000000;
}
p
{
color: #cccfff;
}Example in xhtml file:
<style type="text/css">
body<
{
font-family: verdana;
color: #000000;
}
p
{
color: #cccfff;
}
</style> To apply a class to a specific part use:
<span class="first">sample text</span>
The first class would be defined in the CSS like this:
<style type="text/css">
body
{
font-family: verdana;
color: #000000;
}
p
{
color: #cccfff;
}
.first
{
margin: 10px;
}
</style>Tables
Tables should be used to present data, and not used to hold websites!
Tables are constructed using the basic code below:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
</tr>
</table>th – table header (used instead of td to bold the header automatically.
tr – table row
td – a cell (can be used in place of th)
colspan="2" – this is used to merge two cells together
e.g
<table>
<tr>
<th>Hello</th>
<th>Hello</th>
<th>Hello</th>
</tr>
<tr>
<td>Row 1</td>
<td colspan="2">Row 2 and 3</td>
</tr>
</table>
i am gonna show this to my friend, dude
well done, brother