Be able to create, modify, update and apply styles to ensure consistency of presentation

🎨 14 Styles – Making Your Web Page Look Great

In IGCSE ICT, styles are the rules that decide how your web page looks – colours, fonts, spacing, and more. Think of styles as the outfits your page wears. Just as you choose a dress for a party, you choose styles to make your page consistent and professional.

What is a Style?

A style is a set of CSS (Cascading Style Sheets) rules that target HTML elements. It tells the browser how to display those elements. Example: 

p { color: #333; font-size: 1.2rem; }

Types of Styles

  • Inline styles – added directly to an element with style="…"
  • Internal (embedded) styles – placed inside a <style> tag in the <head>
  • External stylesheets – separate .css files linked with <link rel="stylesheet">

Creating Styles

  1. Choose the element you want to style (e.g., <h1>, <p>, <div>).
  2. Select a property (e.g., color, font-family, margin).
  3. Assign a value (e.g., #ff5733, Arial, 20px).
  4. Apply the rule in the appropriate style section.

Modifying & Updating Styles

Styles can be changed by editing the CSS rule. Because CSS is cascading, a change in a higher-level rule (e.g., in an external stylesheet) will affect all elements that match that selector, keeping your design consistent.

Applying Styles Consistently

Use class and id selectors to target groups of elements. Example: 

.highlight { background-color: #ffeb3b; }

Then apply it: <p class="highlight">Important text</p>.

Example: Styling a Simple Web Page

Below is a small table showing common style properties and their values. Use this as a quick reference when you design your page.

Property Example Value What It Does
color #2ecc71 Text colour
background-color #f1c40f Background colour
font-family Arial, sans-serif Font type
margin 20px Space outside the element
padding 10px Space inside the element

Exam Tips

📝 Remember: When you’re asked to create a style, show the CSS rule clearly. When you’re asked to modify a style, explain what changes you made and why. Use class selectors for reusable styles and id for unique elements. Keep your CSS organised – external stylesheets are best for large projects.

📚 Practice: Build a small webpage with a header, navigation bar, main content, and footer. Apply consistent colours and fonts. Then change the colour scheme and observe how all elements update automatically.

🔍 Check for: Cascading order (inline > internal > external), specificity (id > class > element), and inheritance (font-size inherits unless overridden).

Revision

Log in to practice.

2 views 0 suggestions