Published by Patrick Mutisya · 8 days ago
By the end of this lesson you will be able to create CSS classes that control:
Background properties are applied to any block‑level element (e.g., <div>, <body>, <td>) using CSS class definitions.
center top).cover or contain).Font properties affect the appearance of text inside an element.
Arial, sans-serif).16px, 1.2em).normal, bold, numeric values).italic, or oblique.left, center, right, justify).Tables are built from three core elements:
<table> – the container.<tr> – a table row.<td> – a table data cell (or <th> for header cells).border‑collapse: separate is used.padding).border‑spacing).left, center, right).top, middle, bottom, baseline).2px solid #000).collapse merges adjacent borders into a single line; separate keeps them distinct.none, solid, dashed, dotted, etc.1px, 0.5em).To make a border invisible set border‑style: none or border‑width: 0. The cell still occupies space unless display: none is used, which removes it from the layout.
The following pseudo‑code shows how the properties can be combined into CSS classes. In an exam you would write the actual CSS in a <style> block or external stylesheet.
/* Background class */
.bg‑blue {
background‑color: #cce5ff;
}
/* Background image class */
.bg‑pattern {
background‑image: url('pattern.png');
background‑repeat: repeat;
background‑position: center;
}
/* Font class */
.text‑large‑bold {
color: #333333;
font‑family: Arial, sans-serif;
font‑size: 1.2em;
font‑weight: bold;
}
/* Table class with collapsed borders */
.table‑collapsed {
border‑collapse: collapse;
width: 100%;
}
/* Table cell class with padding and centre alignment */
.td‑center {
padding: 8px;
text‑align: center;
vertical‑align: middle;
border: 1px solid #999999;
}
| Element | Property | Possible \cdot alues | Effect |
|---|---|---|---|
| Any block element | background‑color | colour name, hex, rgb, rgba | Sets solid background colour |
| Any block element | background‑image | url('path'), none | Places an image behind the element |
| Any text element | font‑size | px, em, rem, % | Controls size of the text |
| Any text element | font‑weight | normal, bold, 100‑900 | Controls thickness of characters |
| <table> | border‑collapse | collapse, separate | Determines how cell borders are rendered |
| <td> / <th> | padding | length values (e.g., 5px, 0.5em) | Space between cell content and its border |
| <td> / <th> | text‑align | left, center, right, justify | Horizontal alignment of text |
| <td> / <th> | vertical‑align | top, middle, bottom, baseline | Vertical alignment of content |
| <td> / <th> | border | width style colour (e.g., 2px solid #000) | Defines cell border appearance |
<table> that has three columns and two rows..header‑row that gives the first row a dark background colour, white text, and a 2 px solid border..data‑cell that centres the text horizontally and vertically, adds 10 px padding, and uses a light‑grey background.border‑collapse: collapse to the table so that adjacent borders merge.When calculating the total width of a table with collapsed borders, use:
\$\text{Total Width} = \sum{i=1}^{n} \text{cell‑width}i + (n-1)\times\text{border‑width}\$
where \$n\$ is the number of columns.