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

By the end of this lesson you should be able to:

• Create generic external style rules.
• Apply inline style attributes.
• Use background properties (colour, images).
• Control font properties.
• Format tables, rows, headers and data cells – size, background colour, alignment, spacing, padding and borders (including collapsed borders, colour, thickness, visible/invisible).

1. External Style Sheets

An external style sheet is a separate file (normally style.css) that is linked to an HTML document with the <link> element. The file contains a list of CSS rules that can be applied to any number of pages.

Example of a basic external style rule:

/* style.css */
body {
background-color: #f0f0f0;
font-family: Arial, Helvetica, sans-serif;
}

2. Inline Style Attributes

Inline styles are written directly inside an HTML tag using the style attribute. They override external and internal styles for that element only.

<p style="color:#003366; font-size:14px; background-image:url('bg.jpg');">Sample text</p>

3. Background Properties

The following background properties are commonly used:

• background-color – sets a solid colour.
• background-image – sets an image as the background.
• background-repeat – controls tiling (repeat, no-repeat, repeat-x, repeat-y).
• background-position – positions the image (e.g., center top).
• background-size – scales the image (e.g., cover, contain).

4. Font Properties

Key font‑related CSS properties:

• font-family – typeface(s) to use.
• font-size – size of the text (px, em, %).
• font-weight – normal, bold, or numeric values (100‑900).
• font-style – normal, italic, oblique.
• color – text colour.
• text-align – left, right, centre, justify.

5. Table Formatting

Tables can be styled using CSS properties applied to the table element itself, rows (tr), header cells (th) and data cells (td).

5.1 Important Table‑related CSS Properties

• border – shorthand for width, style and colour.
• border-collapse – collapse or separate.
• border-spacing – space between cells when border-collapse: separate.
• padding – space inside a cell.
• text-align – horizontal alignment (left, centre, right).
• vertical-align – vertical alignment (top, middle, bottom, baseline).
• background-color – cell background colour.
• width and height – dimensions of table or cells.

5.2 Example: CSS Rules for a Styled Table

/* External style sheet */
table {
width: 80%;
border-collapse: collapse;          /* removes double borders */
margin: 20px auto;
}
th, td {
border: 2px solid #333333;          /* visible border, 2 px thick */
padding: 8px;
text-align: centre;
vertical-align: middle;
}
th {
background-colour: #006699;
colour: #ffffff;
font-weight: bold;
}
tr:nth-child(even) {
background-colour: #e6f2ff;         /* zebra striping */
}

5.3 Sample Table Showing Property Effects

6. Inline Table Styling Example

Sometimes a single table needs a unique look. Inline styles can be used for quick adjustments.

<table style="border: 3px dashed #990000; border-collapse: separate; border-spacing: 12px;">
<tr>
<th style="background-colour:#990000; colour:#ffffff; padding:10px;">Item</th>
<th style="background-colour:#990000; colour:#ffffff; padding:10px;">Price</th>
</tr>
<tr>
<td style="border: 1px solid #cccccc; padding:8px; text-align:left;">Notebook</td>
<td style="border: 1px solid #cccccc; padding:8px; text-align:right;">$2.50</td>
</tr>
</table>

7. Checklist for Exam Questions

1. Identify whether the question asks for an external style rule or an inline attribute.
2. Write the correct CSS syntax (property: value;).
3. Remember that colour values can be named, hex, rgb or hsl.
4. For tables, decide if border-collapse: collapse or separate is required.
5. Specify alignment with text-align (horizontal) and vertical-align (vertical).
6. Use padding for space inside cells and border-spacing for space between cells when not collapsed.
7. Indicate visibility of borders – border-style: none makes a border invisible while still occupying space.