Web Design Technologies

Sample Output (View First)

View the completed output so you understand how your final page should look.

Important Notes

Read First

Reminder:

This lab is CSS practice. Use an external CSS file only (no inline style). Write your code yourself (hint is for reference).

Save file → refresh browser (Ctrl+R) every time you change CSS.
If nothing changes: check file name + link path + browser file opened.
Keep it simple: focus on selectors first, then properties.

Learning Outcomes

By the end of this lab session, students should be able to:

Link an external CSS file correctly.
Apply Universal, Type, ID, Class, Child, Descendant selectors.
Use Adjacent Sibling + Attribute selectors with real examples.
Apply Combined/Nesting selectors for table + list readability.
Verify styling changes and capture screenshots as evidence.

Hardware / Software

Computer with Internet access
Text Editor: Visual Studio Code / Notepad++
Browser: Chrome / Edge / Firefox

Steps (Complete Step-by-Step)

Buat ikut turutan. Setiap step ada Hint button (reference only).

Step 1

Create Project Folder

Create a folder named:

RegNo_LAB2B
Example: 10DDT24F1001_LAB2B

What to do: Folder dulu, baru files.

Step 2

Create Files (index.html + style.css)

Create index.html
Create style.css
Both files must be inside RegNo_LAB2B folder

Checkpoint: Extension mesti betul: .html & .css (bukan .txt).

Step 3

Link CSS File in <head>

Task: In index.html, link the CSS file inside <head>.

Use this line:
<link rel="stylesheet" href="style.css">
Checkpoint: Ensure the file name matches exactly (style.css).

Step 4

Prepare HTML Hooks (IDs + Classes)

Task: Make sure these exist in HTML:

id="container" (wrapper)
id="header" (header section)
id="skills" and id="education" (for nesting selectors)
Links inside header menu must be inside a <p> (for descendant selector)

Optional (recommended):
Add a highlight example somewhere:
<span class="highlight">Diploma in IT</span>

Supaya class .highlight nampak effect.

Step 5

Task A (Global & Structural Styling)

Write in style.css:

Universal selector (*): set box-sizing: border-box;
Type selector (body): Arial, light background, padding 20px
ID selector (#container): width 80%, centre (margin auto), white background, radius 8px

Checkpoint: Bila refresh, page jadi lebih “kemas” (tak rapat tepi, background lembut, content centre).

Step 6

Task B (Specific Element Styling)

Write in style.css:

Class selector (.section): apply margin-bottom: 30px;
Class selector (.highlight): blue + bold
Child selector (#header > h1): change colour (only direct child h1)
Descendant selector (#header p a): remove underline (text-decoration: none)

Checkpoint: Header name jadi biru, menu link jadi kemas (no underline), section ada spacing antara satu sama lain.

Step 7

Task C (Advanced Selectors)

Write in style.css:

Adjacent sibling (h2 + p): italic for paragraph immediately after h2
Attribute selector (a[target="_blank"]): change colour for links that open new tab
Combined/Nesting: style #education th and #skills li

Hint concept:
h2 + p hanya “kena” kalau <p> betul-betul selepas <h2>. Kalau lepas h2 tu <ul> atau <ol>, memang tak effect — itu normal.

Step 8

Run in Browser + Evidence (Screenshots)

Take screenshots of:

Full page output (must show browser tab title)
Header menu (underline removed) + name colour changed
Education table header (th styled) + Skills list spacing
GitHub/LinkedIn link colour changed (target="_blank")

Final Step

Submission

Ensure all CSS selectors tasks are completed.
Ensure screenshots are complete.
Zip your folder RegNo_LAB2B.

Upload the .zip file to CIDOS (submit to your respective lecturer).

Submit before the deadline set by your lecturer.