Know and understand purpose and uses of a corporate house style

Topic 14 – Corporate House Style (and related ICT concepts)

Learning Objective

Know and understand the purpose and uses of a corporate house style and be able to apply, evaluate and maintain it across a range of ICT media.

Syllabus Mapping (Cambridge IGCSE ICT 0417)

Assessment Objective	What is assessed in Topic 14?	Related Syllabus Topics
AO1 – Knowledge & Understanding	Definition of a corporate house style, its components, and the terminology of CSS/HTML (selectors, specificity, cascade, inline vs external, semantic tags, media queries, accessibility standards).	13 – Styles, 21 – Website authoring, 8 – Safety & security (e‑safety), 9 – Audience & communication.
AO2 – Application	Creating and applying a house style using templates, external CSS, HTML markup, and proof‑checking tools; adapting the style for print, presentations, email and social media.	12 – Layout, 15 – Proofing, 17 – Document production, 19 – Presentations, 21 – Website authoring.
AO3 – Evaluation	Assessing the effectiveness of a house style (brand consistency, readability, accessibility, file‑size efficiency) and recommending improvements.	5 – Effects of IT, 8 – Safety & security, 9 – Audience & communication.

---

1. Quick Overview of the IGCSE ICT Syllabus (Topics 1‑21)

A one‑sentence “key‑concept” sheet to show where Topic 14 fits in the whole programme.

• 1‑3 – Hardware, I/O, Storage: basic components, data input, storage media.
• 4 – Networks: LAN, WAN, internet, protocols.
• 5 – Effects of IT: social, economic, ethical impacts.
• 6 – Applications: word processing, spreadsheets, databases, presentation, graphics, web authoring.
• 7 – Life‑cycle of a system: planning, analysis, design, implementation, testing, maintenance.
• 8 – Safety & Security: health, data protection, backup, virus protection, e‑safety.
• 9 – Audience & Communication: target groups, media, tone, feedback.
• 10 – File Management: naming, organisation, compression, archiving.
• 11 – Images: raster vs vector, resolution, colour depth, editing.
• 12 – Layout: page setup, columns, grids, alignment.
• 13 – Styles (general): formatting, style sheets, templates.
• 14 – Corporate House Style: focus of this note.
• 15 – Proofing: spell‑check, grammar, validation, visual checks.
• 16 – Graphs & Charts: types, creation, interpretation.
• 17 – Document Production: word processors, publishing, PDF.
• 18 – Databases: tables, queries, forms, reports.
• 19 – Presentations: slide design, animation, delivery.
• 20 – Spreadsheets: formulas, functions, data analysis.
• 21 – Website Authoring: HTML, CSS, media, accessibility.

---

2. What Is a Corporate House Style?

A corporate house style is a documented set of written and visual guidelines that dictate how an organisation presents itself in all internal and external communications. It covers everything from the colour of a logo on a business card to the wording of an email signature, ensuring a single, recognisable brand identity.

3. Why Use a House Style?

• Brand consistency: creates a professional, recognisable image.
• Trust & credibility: consistent presentation builds confidence with customers, partners and regulators.
• Efficiency: ready‑made templates and style rules reduce the time spent on formatting.
• Legal compliance: correct use of trademarks, copyright notices and regulatory wording.
• Collaboration: a shared framework makes it easier for different departments and external agencies to work together.
• Accessibility & SEO: semantic HTML and clear visual hierarchy improve usability for all users and help search engines.

4. Core Components of a Corporate House Style

Component	Description	Typical Example
Logo Usage & Clear‑Space	Size, minimum clear‑space, colour variations, prohibited alterations.	Primary logo – full colour, minimum clear‑space = 0.5 × logo height on all sides.
Colour Palette	Primary & secondary colours with CMYK, RGB and HEX values.	Primary: #003366 (CMYK 100‑85‑0‑70); Secondary: #99CCFF (CMYK 30‑0‑0‑0).
Typography	Approved typefaces, hierarchy, sizes, line spacing, web‑safe fall‑backs.	Headings – Arial Bold 14 pt; Body – Arial Regular 11 pt; Line spacing 1.5; Web fallback: sans‑serif.
Letterhead & Email Signature	Standard layout, placement of logo, address, contact details, legal disclaimer.	Letterhead – logo top‑left, address top‑right; Email – name, title, phone, logo, © 2025 XYZ Ltd.
Document Layout	Margins, column widths, heading styles, footers, page numbering, file naming conventions.	1‑inch margins, left‑aligned headings, footer with page number, file name: Dept_Project_YYYYMMDD.pdf.
Imagery & Icons	Style of photographs, illustrations, iconography (line‑style, colour treatment, resolution).	Icons – flat, two‑tone using secondary colour palette; images minimum 300 dpi for print.
Tone of Voice	Guidelines for language style – formal vs. informal, jargon, pronouns, inclusive language.	Formal for external reports; friendly & concise for social‑media posts.
Legal & Copyright Notices	Standard wording for copyright, trademark, disclaimer and data‑protection statements.	© 2025 XYZ Ltd. All rights reserved. “The information contained herein is confidential …”.

5. How the House Style Relates to Other Syllabus Topics

The house style is the practical implementation of the generic “Styles” covered in Topic 13, the proof‑checking skills of Topic 15, and the audience‑focused communication of Topic 9. It also draws on the web‑authoring knowledge of Topic 21 and the safety/e‑safety considerations of Topic 8 (e.g., accessibility standards).

6. CSS Fundamentals Required for a House Style

6.1 Types of Style Sheets

• Inline style: added directly to an HTML element with the style attribute.
  

  <p style="color:#003366; font-size:11pt;">…</p>

• Embedded (internal) style sheet: placed inside a <style> block in the document’s <head>.
  

  <head>
      <style>
          p { color:#003366; font-size:11pt; }
      </style>
  </head>

• External style sheet: a separate .css file linked with <link rel="stylesheet">. This is the preferred method for a corporate house style.

6.2 Selectors, Specificity & Cascade

Selector Type	Example	Specificity Score
Element selector	h1	0‑0‑1
Class selector	.title	0‑1‑0
ID selector	#mainHeader	1‑0‑0
Inline style	style attribute	1‑0‑0‑0 (highest)

The rule with the highest specificity wins; if two rules have the same specificity, the one that appears later in the cascade overrides the earlier one.

6.3 Using Classes and IDs for the House Style

/* external file: house-style.css */
.logo      { max-width:150px; }
.header    { background:#003366; color:#FFFFFF; padding:10px; }
.bodyText  { font-family:Arial, sans-serif; font-size:11pt; line-height:1.5; }

HTML example:

<header id="mainHeader" class="header">
    <img src="logo.svg" alt="XYZ Ltd" class="logo">
    <h1 class="title">Annual Report 2025</h1>
</header>
<section class="bodyText">
    …
</section>

6.4 Media Queries (Responsive House Style)

@media (max-width: 768px) {
    .header { padding:5px; }
    .logo   { max-width:100px; }
}

Ensures the same brand identity works on tablets and smartphones.

6.5 Inheritance & Default Values

• Properties such as font-family, color and line-height are inherited by child elements unless overridden.
• Use inheritance to keep the stylesheet lean – set the body style once and let headings, paragraphs, lists inherit the base font.

7. HTML Semantic Structure Supporting the House Style

Semantic markup improves accessibility, SEO and makes the stylesheet easier to maintain. It also satisfies the e‑safety and accessibility requirements of Topic 8.

<header>      … logo, tagline, navigation </header>
<nav>         … main menu </nav>
<main>        … primary content </main>
<section>     … logical grouping of related content </section>
<article>     … stand‑alone piece (blog post, news article) </article>
<aside>       … supplementary information (sidebar, related links) </aside>
<footer>      … copyright, contact, legal links </footer>

Key points for students:

• Use a single <h1> per page for the main title; subsequent headings follow a hierarchical order (<h2>, <h3>, …).
• Wrap all text content inside <main> so screen readers can skip navigation quickly.
• Provide meaningful alt attributes for images and aria‑label for icons when the visual cue is essential.

8. Accessibility Checklist (WCAG 2.1 AA)

• Colour contrast: Minimum 4.5:1 for normal text, 3:1 for large text. Use tools (e.g., WebAIM Contrast Checker) to verify the house‑style palette.
• Alternative text: Every informative image must have concise alt text; decorative images may have empty alt="".
• Keyboard navigation: Ensure all interactive elements (links, buttons, form controls) are reachable via Tab and have a visible focus indicator.
• Resizable text: Body text should be set in rem or em units so users can increase size up to 200 % without loss of content or functionality.
• Semantic headings: Follow a logical heading order; avoid skipping levels.
• Skip‑to‑content link: Provide a hidden but focusable link at the top of each page to jump straight to <main>.

9. Applying the House Style Across Different Media

• Printed Documents: Word/LibreOffice templates that embed the corporate colour palette and typography; export to PDF for distribution.
• Digital Presentations: PowerPoint/Google Slides master slides that contain the logo, colour scheme, heading styles and footer.
• Websites & Intranets: Link every page to the external house-style.css file; use the semantic HTML structure described above.
• Email & Newsletters: Standard HTML email template with inline CSS (required for most mail clients) and a consistent signature block.
• Social Media: Adapt visual elements (logo, palette) while following the defined tone of voice for each platform; use pre‑approved image sizes.

10. Proofing (Topic 15) – Ensuring a Consistent House Style

• Spell‑check & Grammar: Use built‑in tools in word processors and email clients; enable language‑specific dictionaries.
• Style‑check: Verify that headings, fonts, colours and logo placement match the guide.
• HTML/CSS Validation: Run pages through the W3C validator to catch syntax errors that could break the style.
• Visual Inspection: Review on desktop, tablet and phone; use print preview for hard‑copy materials.
• Accessibility Review: Apply the checklist in Section 8; use automated tools (e.g., axe, Lighthouse) to confirm WCAG AA compliance.
• File‑size optimisation: Compress images (max 150 KB for web, 300 KB for print) and minify CSS to keep pages fast.

11. Evaluation Rubric (AO3) – Assessing a House Style

Criterion	What to Look For	Mark Allocation (max 4)
Brand Consistency	Logo, colours, typography and tone are uniform across all media.	0‑4
Readability & Layout	Clear hierarchy, appropriate line spacing, margins and column widths; no overcrowding.	0‑4
Accessibility	Colour contrast meets WCAG AA, alt‑text provided, keyboard‑friendly navigation.	0‑4
Technical Accuracy	CSS follows best practices (no unnecessary inline styles), HTML validates, media queries work.	0‑4
Efficiency & File Size	Templates reduce re‑work; images and CSS are optimised for fast loading.	0‑4

Students should use this rubric to critique an existing house style or to evaluate their own implementation.

12. Benefits of Using a House Style (Recap)

1. Improves brand recognition and credibility.
2. Reduces errors and re‑work caused by inconsistent formatting.
3. Speeds up production of marketing, corporate and internal materials.
4. Provides a clear framework for new staff, students and external partners.
5. Ensures compliance with corporate policies, legal requirements and accessibility standards.

13. Developing a House Style Guide – Step‑by‑Step

1. Collect existing assets: logo files (vector & raster), colour codes, approved fonts, existing templates.
2. Consult stakeholders: marketing, HR, legal, IT, senior management and, where relevant, student representatives.
3. Draft the guide: cover each component from the table in Section 4; add CSS/HTML examples, a “Proofing checklist” and the evaluation rubric.
4. Create templates: Word letterhead, PowerPoint master, HTML/CSS starter files, email signature.
5. Review & approve: circulate for feedback, incorporate changes, obtain sign‑off from senior management.
6. Publish: distribute as a printable PDF and host an online HTML version on the intranet.
7. Train staff: run short workshops, provide quick‑reference sheets, record a tutorial video.
8. Maintain: schedule an annual review; update the guide when the brand evolves or new media are introduced.

14. Quick Reference – Links to Other Syllabus Topics

Syllabus Topic	Key ICT Skill	Link to House Style
12 – Layout	Using grids, margins, columns.	Document layout component of the house style.
13 – Styles (general)	Applying character, paragraph and object styles.	House style is the specialised, organisation‑wide version of generic styles.
15 – Proofing	Spell‑check, grammar, visual checks, validation.	Proofing ensures the house style is applied correctly.
8 – Safety & Security	Data protection, e‑safety, accessibility.	Accessibility checklist and legal notices are part of the house style.
9 – Audience & Communication	Target groups, tone of voice, media selection.	Tone of voice guidelines in the house style address audience needs.
21 – Website Authoring	HTML, CSS, media, accessibility.	External CSS file and semantic HTML are the web implementation of the house style.