Web Design - Week 2

Advanced HTML5 and CSS3 — Simple Notes

Part 1: Spacing, alignment, backgrounds and positioning

1. Line height and letter spacing

These properties change how text is spaced.

h2 {
    line-height: 50px;
    letter-spacing: 7px;
}

line-height controls the vertical distance between lines.
letter-spacing Controls the horizontal space between individual letters.

Use line-height to make paragraphs easier to read. Excessive letter-spacing can make text difficult to read.

2. Margin versus padding

Both create space, but in different places.

flowchart TD
    M["Margin: space outside border"]
    B["Border"]
    P["Padding: space inside border"]
    C["Content"]
    M --> B --> P --> C

div {
    margin: 20px;
    padding: 20px;
    border: 3px solid brown;
}

Margin: space outside an element’s border.
Padding: space between the content and its border.

A useful way to remember it:

Padding protects the content from the border. Margin pushes the element away from other elements.

3. Horizontal text alignment

Use text-align to align text inside its container.

p {
    text-align: center;
}

Possible values include:

text-align: left;
text-align: center;
text-align: right;

This aligns the text—it does not necessarily move the entire element.

4. Horizontal and vertical alignment using Flexbox

Flexbox makes it easy to centre content inside a container.

div {
    display: flex;
    justify-content: center;
    align-items: center;
}

display: flex activates Flexbox.
justify-content normally controls horizontal alignment.
align-items normally controls vertical alignment.

flowchart LR
    J["justify-content"] --> H["Horizontal alignment"]
    A["align-items"] --> V["Vertical alignment"]

This works for both text and images.

5. Image sizing

img {
    width: 150px;
    height: 100px;
}

This forces the image to use the specified dimensions. Be careful: setting both width and height without preserving the original proportions can stretch the image.

A safer alternative is often:

img {
    width: 150px;
    height: auto;
}

Background images

6. Adding a background image

div {
    background-image: url("small.jpg");
}

The image becomes the element’s background rather than a separate HTML image element.

7. Background repetition

Small background images repeat automatically unless repetition is disabled.

background-repeat: no-repeat;

Options include:

repeat: repeats horizontally and vertically.
repeat-x: repeats horizontally.
repeat-y: repeats vertically.
no-repeat: displays only one copy.

8. Background size

background-size: cover;

cover Enlarges or shrinks the image until the entire container is covered.

Part of the image may be cropped because the image keeps its proportions.

Other possibilities include:

background-size: 100%;
background-size: 25%;
background-size: 400px 200px;

9. Background position

background-position: center;

This controls which part of the background image appears inside the container.

Examples:

background-position: top left;
background-position: center center;
background-position: bottom right;

This is particularly important when background-size: cover crops part of the image.

Display types

10. Block elements

display: block;

A block element:

Begins on a new line.
Normally takes the full available width.
Allows width and height to be set.

Common block elements include <div>, <p> and <section>.

11. Inline elements

display: inline;

An inline element:

Remains on the same line as surrounding content.
Uses only the space it needs.
Does not normally respond properly to width and height.

Common inline elements include <span>, <a> and <label>.

12. Inline-block elements

display: inline-block;

An inline-block element combines useful properties from both:

It can remain beside other elements.
Its width and height can be changed.

For example, multiple <figure> elements can appear next to one another:

figure {
    display: inline-block;
    width: 300px;
}

Display	New line?	Width and height?
`block`	Yes	Yes
`inline`	No	Usually no
`inline-block`	No	Yes

Positioning

13. Static positioning

position: static;

This is the default. The element remains in the normal order of the page.

14. Relative positioning

.container {
    position: relative;
}

The element remains connected to its original place, but it can be moved using:

top: 10px;
left: 20px;

More importantly, a relatively positioned parent can act as a reference point for an absolutely positioned child.

15. Absolute positioning

.child {
    position: absolute;
    top: 0;
    right: 0;
}

An absolutely positioned element is removed from the normal page flow.

It is positioned relative to its nearest ancestor that has a position such as:

position: relative;

Example:

.container {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}

Here, .child is placed in the top-right corner of .container.

16. Making a child cover its parent

.container {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Setting all four offsets to 0 stretches the child to the four edges of the parent.

17. Fixed positioning

.element {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

A fixed element remains in the same position on the screen, even when the page scrolls.

This is commonly used for:

Floating chat buttons
Fixed navigation bars
“Back to top” buttons

This could eventually be relevant to your RoseAI chatbot widget.

18. `z-index`

When elements overlap, z-index controls which one appears in front.

.first {
    position: absolute;
    z-index: 2;
}

.second {
    position: absolute;
    z-index: 1;
}

A higher z-index normally appears in front of a lower one.

It is generally used with positioned elements.

19. Hover effects

:hover Applies a style while the mouse is over an element.

.container:hover .second {
    opacity: 0;
}

Ways to hide something include:

visibility: hidden;
opacity: 0;

The differences are:

visibility: hidden hides the element but preserves its occupied space.
opacity: 0 makes it transparent, but it still exists and may still be clickable.
Negative z-index may move it behind another element.

20. Fixed background and parallax

The slides also demonstrate:

article {
    background-image: url("bg.jpg");
    background-size: cover;
    background-attachment: fixed;
}

background-attachment: fixed Keeps the background stationary while the page content scrolls.

This can create a simple parallax-like effect.

This is different from position: fixed.

Part 2: Lists, tables, links and advanced selectors

21. Ordered lists

An ordered list displays numbered or lettered items.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Lists can be nested:

<ol>
    <li>
        HTML
        <ol type="a">
            <li>Block elements</li>
            <li>Inline elements</li>
        </ol>
    </li>
</ol>

22. Unordered lists

An unordered list normally uses bullet points.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

The slides use attributes such astype="square", although modern websites generally control bullet styles with CSS:

ul {
    list-style-type: square;
}

23. HTML tables

A table is composed of rows and cells.

<table>
    <tr>
        <th>Name</th>
        <th>Unit</th>
    </tr>
    <tr>
        <td>Rose</td>
        <td>Web Design</td>
    </tr>
</table>

<table> creates the table.
<tr> creates a table row.
<th> creates a heading cell.
<td> creates a standard data cell.

Basic styling:

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
}

border-collapse: collapse Joins neighbouring cell borders into single borders.

24. Anchor links

Anchor links can jump to a specific section of a page.

First, give the destination an ID:

<section id="section3">
    <h2>Section 3</h2>
</section>

Then link to that ID:

<a href="#section3">Go to Section 3</a>

The connection is:

href="#section3" → id="section3"

This is exactly what the final task in tomorrow’s tutorial requires.

CSS selectors

A selector tells CSS which HTML elements to style.

25. Universal and element selectors

* {
    font-family: Arial;
}

* selects every element.

p {
    
}

p selects every paragraph.

26. Class-specific element selector

p.intro {
    
}

This selects paragraphs that have the class intro:

<p class="intro">Selected</p>

It does not select other elements with that class.

27. Group selector

h1,
h2,
p {
    font-family: Arial;
}

A comma means select all of these different elements.

28. Descendant selector

div p {
    
}

This selects every <p> located anywhere inside a <div>.

The paragraph does not have to be a direct child.

29. Direct-child selector

div > p {
    
}

This selects paragraphs whose immediate parent is a <div>.

The > means direct child only.

30. Adjacent-sibling selector

div + p {
    
}

This selects the first paragraph immediately following a <div>.

31. General-sibling selector

p ~ ul {
    
}

This selects qualifying <ul> elements that appear after a <p> and share the same parent.

Selector comparison

Selector	Meaning
`div, p`	All divs and all paragraphs
`div p`	Paragraphs anywhere inside a div
`div > p`	Paragraphs directly inside a div
`div + p`	First paragraph immediately after a div
`p ~ ul`	Matching lists after a paragraph

Attribute selectors

Attribute selectors choose elements based on their HTML attributes.

32. Has an attribute

[target] {
    
}

Selects every element that has a target attribute.

33. Exact attribute value

input[type="text"] {
    
}

Selects inputs whose type is exactly text.

34. Attribute begins with a value

a[href^="https"] {
    
}

^= means begins with.

35. Attribute ends with a value

a[href$=".pdf"] {
    
}

$= means ends with.

36. Attribute contains a value

a[href*="WDP"] {
    
}

*= means contains this sequence of characters.

Pseudo-classes and pseudo-elements

37. Pseudo-classes

A single colon describes an element’s state.

a:hover {
    
}

Common examples:

🔗 unvisited link
:visited: visited link
:hover: mouse is over it
:active: currently being clicked
:checked: selected checkbox or radio button
:disabled: disabled form control

You can group states:

a:hover,
a:active {
    
}

38. Pseudo-elements

Double colons style or generate a specific part of an element.

header::after {
    content: " (header)";
    
}

This visually inserts content after each header without adding that text directly to the HTML.

Other example:

p::before {
    content: "★ ";
}

A useful distinction:

:hover describes a state.
::before and ::after describe a generated part of an element.

Visual effects

39. Text shadow

h1 {
    text-shadow: 2px 3px 5px grey;
}

Order:

horizontal offset | vertical offset | blur | colour

Positive horizontal value moves right.
Negative horizontal value moves left.
Positive vertical value moves down.
Negative vertical value moves up.
Blur softens the shadow.

40. Box shadow

div {
    box-shadow: 2px 3px 5px 1px grey;
}