Images and stylesheets: the near-misses

What the exam task looks like

Cambridge image tasks are short and exact. Each part of the sentence is usually one mark.

A typical task: "Insert the image J2611logo.jpg at the top right of the first page. Resize it to 4 cm wide, maintaining its aspect ratio. Align the top of the image with the top margin."

Read the task three times. Underline the file name, the position, the size and any word like "maintain" or "do not distort".

Place the image precisely

Text wrapping decides how the text flows around an image. Cambridge names four kinds: above and below (top and bottom), square, tight, and in line with text.

In most word processors, select the image and open its layout or wrap options. Choose square so text sits beside the image in a neat rectangle.

Then align the image to the margin. Use the position or align options (align right, align top), not dragging by eye.

Aspect ratio: the shape of the image

The aspect ratio is the width compared with the height. A photo 1600 pixels wide and 1200 pixels high has a ratio of 4:3.

If you change the width and height by the same factor, the ratio stays the same. The picture looks right.

If you change only one of them, the picture is distorted: squashed or stretched. Faces look fat or thin, and circles become ovals.

Try the toy. Change the width with Keep aspect ratio ON. Then turn it OFF and change the width again. Watch the round sun in the picture.

There is something to try for this step in the IGCSE library.

Calculate the new height

When you keep the aspect ratio, the new height depends on the new width.

New height = new width × original height ÷ original width.

Software does this for you when the aspect ratio lock is on. You still need the sum to check your result and for theory questions.

Changing the aspect ratio on purpose

Sometimes a task gives both a width and a height. For example: "Resize the image to 3 cm high and 12 cm wide. You do not need to maintain the aspect ratio."

Untick the lock aspect ratio box first. Then type both numbers.

If you leave the lock on, the software will change your second number back. The image will be the wrong size.

Bookmarks and links to them

A bookmark is a named place on a page. Give any element an id: `<h2 id="hours">`.

A hyperlink uses the `<a>` (anchor) tag. Its href is where it goes. The text between the tags is what you click.

To jump to a bookmark, href is # then the id. To jump to a bookmark on another page, add the page name first.

<h1 id="top">Café Retiro</h1>
<a href="#hours">See our opening hours</a>

<h2 id="hours">Opening hours</h2>
<a href="#top">Back to top</a>

<!-- a bookmark called drinks on another page -->
<a href="menu.html#drinks">Drinks menu</a>

Links to pages, websites and email

A local page is a page in your own site. Link to it with a relative path, such as menu.html.

An external website needs its full URL, starting with https://.

An email link uses mailto: then the address. Clicking it opens a new email to that address. You can add a subject with ?subject=.

<a href="menu.html">Our menu</a>

<a href="https://www.esmadrid.com">Visit Madrid</a>

<a href="mailto:orders@example.com">Email us</a>

<a href="mailto:orders@example.com?subject=Order">Order a cake</a>

Target windows: _blank, _self and named windows

The target attribute says where a link opens.

_blank opens a new window or tab. _self opens in the same window, which is the default.

A named window is any name you choose, such as target="menuwin". The first click opens a window with that name. Later links with the same target reuse it.

A target on a link overrides the base target in the head.

<a href="https://www.esmadrid.com" target="_blank">Visit Madrid</a>

<a href="menu.html" target="menuwin">Food menu</a>
<a href="drinks.html" target="menuwin">Drinks menu</a>
<!-- both open in the same window, called menuwin -->

Relative and absolute paths

A path tells the browser where a file is.

A relative path starts from the folder of the current file. images/logo.png means "go into the images folder, then find logo.png".

../ means "go up one folder". From styles/cafe.css, the path to the beans image is ../images/beans.jpg.

An absolute path gives the full location from the very start, such as https://www.esmadrid.com/en or C:/Users/Lucia/Desktop/cafe/images/logo.png.

Try the toy: press From on one file and To on another, and read the relative path and why the absolute path breaks. Then switch to Quiz and write paths yourself. The toy's site uses css/style.css, but the rules are the same.

There is something to try for this step in the IGCSE library.

Why absolute paths to local files break

An absolute local path points to one place on one computer. C:/Users/Lucia/Desktop/... exists only on Lucía's computer.

When the folder is copied to a web server or an examiner's computer, that path no longer exists. Images vanish and the stylesheet is not applied.

Relative paths move with the folder, because they only describe how files sit compared with each other.

Absolute URLs are fine for external websites, because those addresses are the same from every computer.

How a CSS rule is written

A CSS rule has a selector (what to style), then curly brackets { } holding one or more declarations.

Each declaration is a property, a colon, a value and a semicolon: `color: #8B4513;`.

Comments go between /* and */. The browser ignores them. Use them to explain your styles.

/* Café Retiro: main headings */
h1 {
    color: #8B4513;
    text-align: center;
}

/* one rule for two selectors */
h2, h3 {
    color: #2E7D32;
}

Inline styles and external stylesheets

An inline style goes inside one tag, in a style attribute. It affects only that element.

An external stylesheet is a separate .css file attached with `<link>`. It can style every page.

An internal stylesheet sits in a `<style>` element in the head. It affects only that page.

Use external stylesheets for a whole site. Use inline styles only when the question asks, or for one exception.

<!-- inline: only this heading -->
<h1 style="color: #8B4513; text-align: center;">Café Retiro</h1>

<!-- in the head: internal and external -->
<link rel="stylesheet" href="styles/cafe.css">
<style>
    h2 {
        color: #1565C0;
    }
</style>

/* styles/cafe.css: CSS only, no <style> tags */
h2 {
    color: #2E7D32;
}

Classes in CSS

A class selector starts with a full stop: .note styles every element with class="note".

p.note styles only paragraphs with that class. Other elements with class note are not affected.

A class name is case-sensitive and has no spaces. In the HTML it has no full stop.

<p class="price">Café con leche €1.80</p>
<p class="price note">Prices include VAT.</p>

.price {
    color: #8B4513;
    font-weight: bold;
}

p.note {
    font-style: italic;
}

Backgrounds: colour and image

background-color fills an element with a colour. Colours can be names (white) or hex codes (#FDF6EC).

background-image uses url() with a relative path. The path starts from the CSS file, not from the HTML page.

background-repeat controls tiling: repeat, repeat-x, repeat-y or no-repeat.

body {
    background-color: #FDF6EC;
    background-image: url("../images/beans.jpg");
    background-repeat: repeat-x;
}

.offer {
    background-color: #FFF3E0;
}

Fonts: family, size, colour, alignment, bold, italic

font-family lists fonts in order of preference, separated by commas. End with a generic family: serif, sans-serif or monospace.

The browser uses the first font it has. The generic family is the last resort, so the text still has the right kind of font.

font-size in px, pt, em or %. color sets the text colour. text-align is left, right, center or justify.

font-weight: bold makes text bold. font-style: italic makes it italic.

h1 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 32px;
    color: #8B4513;
    text-align: center;
    font-weight: bold;
}

p {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-style: italic;
}