Be able to create generic external styles and inline style attributes including background properties (colour, images), font properties, table, table row, table header and table data properties (size, background colour, horizontal and vertical alignm

21. Website Authoring

Learning Objective

Be able to create generic external style sheets and inline style attributes covering:

• Background properties – colour, images
• Font properties – family, size, colour, style, weight
• Table, table row, table header and table data properties – size, background colour, horizontal and vertical alignment, spacing, padding, borders (including collapsed, colour, thickness, visible/invisible)

1. External Style Sheets vs. Inline Styles

An external style sheet is a separate .css file linked to an HTML document with the <link> element. It allows the same style rules to be applied to many pages.

An inline style is written directly in an HTML tag using the style attribute. It overrides any conflicting external rules for that element only.

2. Background Properties

Background properties control the colour or image that appears behind an element.

• background-color – sets a solid colour (e.g., #f0f0f0 or rgb(240,240,240)).
• background-image – sets an image URL (e.g., url('bg.jpg')).
• background-repeat – repeat, no-repeat, repeat-x, repeat-y.
• background-position – coordinates such as center, top left, or 50% 50%.
• background-size – cover, contain, or specific dimensions.

Example of an Inline Background Style

<div style="background-color:#e0e0e0; background-image:url('pattern.png'); 
background-repeat:repeat; padding:10px;">
Content goes here
</div>

3. Font Properties

Font properties affect the appearance of text.

• font-family – e.g., Arial, Helvetica, sans-serif.
• font-size – absolute (e.g., 16px) or relative (e.g., 1.2em).
• font-weight – normal, bold, or numeric values (100‑900).
• font-style – normal, italic, oblique.
• color – text colour, using colour names, hex, rgb or hsl.
• text-align – left, right, center, justify.
• line-height – spacing between lines, e.g., 1.5 or 24px.

Example of an Inline Font Style

<p style="font-family:'Times New Roman', serif; font-size:14pt; 
font-weight:bold; color:#333333; text-align:center;">
This paragraph uses an inline font style.
</p>

4. Table Styling

Tables can be styled using a combination of properties applied to the <table>, <tr>, <th> and <td> elements.

Key Table Properties

• border – shorthand for width, style, colour (e.g., 1px solid #000).
• border-collapse – collapse removes space between cell borders; separate keeps them distinct.
• border-spacing – distance between cells when border-collapse:separate.
• padding – space inside each cell.
• text-align – horizontal alignment of cell content.
• vertical-align – top, middle, bottom, or baseline.
• background-color – colour behind a row, header or cell.
• width and height – dimensions of the table or cells.

Example of an Inline Table Style

<table style="border:2px solid #333; border-collapse:collapse; width:80%;">
<thead>
<tr style="background-color:#f2f2f2;">
<th style="padding:8px; border:1px solid #999; text-align:center;">Header 1</th>
<th style="padding:8px; border:1px solid #999; text-align:center;">Header 2</th>
</tr>
</thead>
<tbody>
<tr style="background-color:#ffffff;">
<td style="padding:6px; border:1px solid #999; text-align:left; vertical-align:top;">Row 1, Cell 1</td>
<td style="padding:6px; border:1px solid #999; text-align:right; vertical-align:bottom;">Row 1, Cell 2</td>
</tr>
<tr style="background-color:#e9e9e9;">
<td style="padding:6px; border:1px solid #999; text-align:center;" colspan="2">Spanning Cell</td>
</tr>
</tbody>
</table>

Table Property Summary

5. Practical Checklist for Exam Tasks

1. Identify whether the style should be external (re‑usable) or inline (single‑use).
2. Write the CSS rule using the correct property name and value syntax.
3. For tables, decide if border-collapse:collapse is required to remove double borders.
4. Apply background colours to rows or cells to improve readability.
5. Set padding inside cells to avoid cramped text.
6. Use text-align and vertical-align to position content as specified.
7. Test the page in a browser to confirm that the visual result matches the specification.