A full stylesheet for h1, h2, h3, p and li
Exam tasks often give a list of styles to set for each element. Write one rule per selector, in the same order as the list.
Repeat a property in each rule where the task asks for it, even if it looks the same as another rule.
Try the toy: paste this CSS into the CSS box. In the HTML box, replace everything between `<body>` and `</body>` with this HTML, so the stylesheet link stays. Change the h2 colour or the p font size and watch the preview update.
/* Café Retiro house style */
body {
background-color: #FDF6EC;
}
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 32px;
color: #8B4513;
text-align: center;
}
h2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 24px;
color: #2E7D32;
}
h3 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
color: #2E7D32;
font-style: italic;
}
p {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
color: #333333;
text-align: justify;
}
li {
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
font-weight: bold;
}<h1>Café Retiro</h1>
<h2>Breakfast</h2>
<h3>Served until 12:00</h3>
<p>Fresh coffee, toast with tomato and olive oil, and homemade cakes.</p>
<ul>
<li>Café con leche</li>
<li>Tostada con tomate</li>
<li>Tarta de Santiago</li>
</ul>?Why?The li rule makes the three menu items bold. Their font, size and colour come from the li rule too, so lists match the paragraphs.
There is something to try for this step in the IGCSE library.
Table borders: thickness, colour, collapse, invisible
border sets thickness, style and colour in one line: `border: 2px solid #8B4513;`. The style must be given, such as solid, dashed or dotted.
A border on table styles only the outside edge. Borders between cells need a rule for th and td too.
border-collapse: collapse merges the double lines between cells into single lines.
To make borders invisible, use border: none (or border-style: hidden). To make them visible, give a style such as solid.
table {
border: 3px solid #8B4513;
border-collapse: collapse;
}
th, td {
border: 1px solid #8B4513;
}
/* a layout table with no visible borders */
table.plain, table.plain td {
border: none;
}!Watch outborder: 2px #8B4513; with no style shows no border at all. The default style is none.
Cells: padding, spacing, size, colour and alignment
padding is the space inside a cell, between its border and its content.
border-spacing is the gap between cells. It works only when border-collapse is separate, which is the default.
text-align sets horizontal alignment (left, center, right). vertical-align sets vertical alignment (top, middle, bottom).
Cells take width, height and background-color like any other element.
table {
width: 80%;
border-collapse: separate;
border-spacing: 4px;
}
th {
background-color: #8B4513;
color: #FFFFFF;
padding: 8px;
}
td {
height: 40px;
padding: 8px;
text-align: center;
vertical-align: middle;
background-color: #FFF3E0;
}?Why?Padding stops text touching the border, so the table is easier to read. Spacing separates cells into boxes.
The cascade: which style wins
When two rules set the same property on the same element, the browser uses the cascade to choose.
Highest priority first: inline style, then internal stylesheet, then external stylesheet, then the browser's own defaults.
Internal beats external when the `<style>` element comes after the `<link>`, which is the normal order. In fact, the rule read last wins.
Inside one stylesheet, a later rule beats an earlier rule for the same selector. A class selector beats a plain element selector, whatever the order.
e.g.ExampleBreakfast: the external rule says green, the internal rule says blue. Internal wins → blue.
Lunch: the inline style says red. Inline wins → red.
Both headings are still 24px, because only the external rule sets font-size. The cascade decides each property separately.
<link rel="stylesheet" href="styles/cafe.css"> <!-- h2 green -->
<style>
h2 { color: #1565C0; } /* h2 blue */
</style>
...
<h2>Breakfast</h2>
<h2 style="color: #C62828;">Lunch</h2> <!-- inline red -->/* styles/cafe.css */
h2 {
color: #2E7D32;
font-size: 24px;
}How website marks are lost
Most lost marks come from small typing errors that a browser ignores without warning.
Before taking screenshots, open the page in a browser and check every style and link really works.
Giving evidence
Take a screenshot of the HTML source in the text editor, with every line readable. Use more than one screenshot if the code is long.
Take a screenshot of the page in a browser, showing the result of the styles.
Take a screenshot of the CSS file in the editor, showing its file name if possible.
Paste them into the evidence document in the order the question asks, and label each one.
?Why?The source proves which tags, attributes and paths you used. The browser view proves they work. Examiners often need both to award a mark.
!Watch outA screenshot of a page that looks right earns nothing if the code that made it is cut off. Zoom so the code is readable but nothing is hidden.