ТВОЙ BZFAR
Главная » Статьи » Algorithms & Programming » Programming languages
CSS in Web Design
Unit 11.1B · Web Development

CSS in Web Design

From HTML structure to professional web design

HTML creates the structure of a web page. CSS controls how that structure is presented to the user. In this lesson, you will compare different ways of implementing CSS and apply CSS when designing a website.

11.5.3.5
Compare CSS implementing types
11.5.3.6
Use CSS when designing a website
Success criteria

By the end of the lesson, I can:

  • explain the purpose of CSS;
  • identify the selector, property and value in a CSS rule;
  • distinguish between inline, internal and external CSS;
  • compare the advantages and disadvantages of the three CSS implementation methods;
  • choose an appropriate CSS method for a given situation;
  • use element, class and ID selectors;
  • use CSS properties when designing a website;
  • apply the CSS box model.
Why CSS? CSS Rule 3 Methods Compare Selectors Cascade Box Model Web Design Quiz Debug Practice Vocabulary

1. Why do we need CSS?

Imagine two web pages with the same information. One uses only basic HTML. The other uses CSS. Which page would be easier and more pleasant to use?

Use HTML and CSS editor

HTML only

 

Coding Club

Welcome to our school coding club.

Learn HTML, CSS and programming.

Join the club
→

HTML + CSS

 
Coding Club
Learn. Create. Share.

Develop websites and programming projects with other students.

Join the club
CSS stands for Cascading Style Sheets.

CSS controls the visual presentation of HTML documents.

HTML and CSS work together

</>
HTML Structure headings, paragraphs, images, links
+
{ }
CSS Presentation colour, size, spacing, layout
→
▣
Browser Web page visual result seen by the user

2. Anatomy of a CSS rule

A CSS rule tells the browser what to select and how to style it.

h1 { color : navy ; }
Selector
Which HTML element?
Property
What feature?
Value
What setting?
h1 { color: navy; font-size: 32px; text-align: center; }
Read the rule as:

“Select every <h1> element and make its text navy, 32 pixels high and centred.”

Try to interpret this rule

p { color: #455a64; font-size: 18px; line-height: 1.6; }
Show explanation
The selector p targets paragraphs.

Their text becomes dark grey, the font size becomes 18 px, and the line spacing becomes 1.6.

3. Three ways to implement CSS

CSS can be added to a web page in three main ways.

1

Inline CSS

CSS is written directly inside an HTML element using the style attribute.

ONE ELEMENT
2

Internal CSS

CSS rules are placed inside a <style> element in the HTML document.

ONE PAGE
3

External CSS

CSS rules are stored in a separate .css file.

MANY PAGES

Interactive CSS Method Explorer

Choose a CSS implementation method.

Inline CSS

<h1 style="color:blue;">Welcome</h1>
Scope: one HTML element.

Useful for a small exceptional change, but difficult to maintain when repeated.

Internal CSS

<head> <style> h1 { color: blue; } p { font-size: 18px; } </style> </head>
Scope: one HTML page.

Suitable for a single-page website, demonstration or prototype.

External CSS

HTML:

<link rel="stylesheet" href="styles.css">

styles.css:

h1 { color: blue; } p { font-size: 18px; }
Scope: many web pages.

This usually provides better maintainability for a multi-page website.

How external CSS connects pages

HTML
index.html Home page
→
CSS
styles.css Shared styles
←
HTML
contact.html Contact page
One external stylesheet can be linked to many HTML pages.

Change the stylesheet once and the appearance of all linked pages can change.

4. Compare CSS implementation methods

Feature Inline Internal External
Location Inside an HTML element Inside the HTML document Separate CSS file
Typical scope One element One page Many pages
Reusability Low Medium High
Maintenance Difficult if repeated Manageable for one page Easier for multi-page sites
HTML readability Can become cluttered CSS remains in the document HTML and presentation are separated
Useful when... One element needs an exceptional style One page needs its own styles Several pages share a design
Important:

The appropriate CSS implementation method depends on the design problem.

For a multi-page website with a consistent design, external CSS normally provides better reuse, consistency and maintainability.

Which CSS method would you choose?

1. A website contains 25 pages that should all use the same colours and typography.
✓ Correct. One external stylesheet can provide consistent styles across many pages.
✗ Think about reuse and maintenance across many pages.
2. You are creating a one-page prototype and want all CSS inside the same HTML file.
✓ Correct. Internal CSS can be suitable for a single-page prototype.
✗ The CSS should remain inside the HTML document.
3. One specific heading requires a temporary, exceptional colour.
✓ Correct. Inline CSS can be used for a specific one-element exception.
✗ Consider the scope: only one element needs the change.

5. CSS Selectors

A selector determines which HTML elements will receive a CSS rule.

p

Element selector

Selects all elements of a particular type.

p { color: navy; }
.card

Class selector

Selects elements sharing the same class.

.card { padding: 20px; }
#header

ID selector

Selects an element with a specific ID.

#header { color: white; }

Class example

CSS
.important { color: red; font-weight: bold; }
HTML
<p class="important"> Exam deadline </p> <p class="important"> Submit your project </p>
A class can be reused on several elements.

An ID should identify a unique element within the page.

6. Why is it called “Cascading” Style Sheets?

More than one CSS rule may affect the same element. The browser must decide which declaration applies.

1
Matching rules

Which rules target this element?

2
Specificity

Some selectors are more specific.

3
Order

Later rules may override earlier rules.

Predict the result

p { color: blue; } .warning { color: red; }
<p class="warning"> Important message </p>
Show answer

Important message

The class selector .warning is more specific than the element selector p.

7. The CSS Box Model

Every visible HTML element can be considered as a rectangular box.

MARGIN
BORDER
PADDING
CONTENT

Content

Text, images or other content inside the element.

Padding

Space between content and border.

Border

A line surrounding the padding and content.

Margin

Space outside the border.

Use HTML and CSS editor

Example

.card { width: 300px; padding: 20px; border: 1px solid #cccccc; margin: 20px; }

8. Using CSS when designing a website

Good CSS helps create visual hierarchy, consistency and readability.

Aa

Typography

Font family, size, weight and line spacing.

◐

Colour

Text, background, borders and contrast.

↔

Spacing

Margin and padding improve readability.

▦

Layout

Organise content into logical sections.

▢

Consistency

Reuse styles for related components.

⌕

Readability

Users should easily identify content and actions.

Example: styling a card

HTML
<div class="course-card"> <h3>Web Development</h3> <p> Learn HTML and CSS. </p> <a href="#"> Start course </a> </div>
CSS
.course-card { max-width: 400px; padding: 20px; background: white; border: 1px solid #dddddd; border-radius: 10px; margin: 20px auto; }

9. Check your understanding

Which selector targets every element with class="card"?
✓ Correct. A class selector begins with a dot.
✗ Remember the symbol used for a CSS class.
Answer these questions:
  1. What is the difference between inline, internal and external CSS?
  2. Why is external CSS useful for a multi-page website?
  3. What are the three parts of a CSS rule?
  4. What is the difference between a class selector and an ID selector?
  5. What is the difference between padding and margin?
Check key ideas

1. Inline CSS is placed on an element, internal CSS is placed inside the HTML document, and external CSS is stored in a separate file.

2. One stylesheet can be reused across many pages.

3. Selector, property and value.

4. A class can be reused; an ID identifies a unique element.

5. Padding is inside the border; margin is outside the border.

10. Debug the CSS

A student wants all elements with class="warning" to have red text.

HTML
<p class="warning"> Password is too short. </p>
CSS
#warning { colour: red; font-size = 18px; }
Find three errors.
  • the selector;
  • the property name;
  • the syntax between property and value.
Show corrected CSS
.warning { color: red; font-size: 18px; }

The HTML uses a class, so the selector requires ..

CSS uses color.

CSS uses : between a property and value.

11. Practical Challenge

School Coding Club Website

Transform a basic HTML page into a clear, consistent and attractive website using CSS.

Starter HTML

<!DOCTYPE html> <html> <head> <title>School Coding Club</title> </head> <body> <header> <h1>School Coding Club</h1> <p>Learn. Create. Share.</p> </header> <main> <section class="card"> <h2>Web Development</h2> <p> Learn HTML and CSS. </p> </section> <section class="card"> <h2>Programming</h2> <p> Develop Python projects. </p> </section> </main> </body> </html>

Your CSS must demonstrate:

# Requirement Possible CSS
1 Set a page font font-family
2 Style the background background-color
3 Style the header background, color, padding
4 Style headings color, font-size
5 Create card components class selector
6 Use spacing margin, padding
7 Add card boundaries border, border-radius
8 Keep the design consistent reusable CSS rules
Decision point — LO 11.5.3.5

Choose inline, internal or external CSS.

Write one sentence explaining why your choice is appropriate.

Extension challenge

  • max-width
  • margin: auto
  • box-shadow
  • border-radius
  • :hover
Show one possible CSS solution
body { margin: 0; font-family: Arial, sans-serif; background-color: #f4f7f6; color: #263238; } header { padding: 35px 20px; background-color: #286d60; color: white; text-align: center; } main { max-width: 900px; margin: 30px auto; padding: 0 20px; } .card { margin-bottom: 20px; padding: 20px; background-color: white; border: 1px solid #d5e4e0; border-radius: 10px; } .card h2 { color: #286d60; }

12. Design Review

Exchange your website with a partner. Review the design.

Visual hierarchy


Consistency


Readability


CSS quality


Vocabulary · English–Russian
English Русский
Cascading Style Sheets каскадные таблицы стилей
style sheet таблица стилей
CSS rule правило CSS
selector селектор
property свойство
value значение
inline CSS встроенный стиль элемента
internal CSS внутренняя таблица стилей
external CSS внешняя таблица стилей
class selector селектор класса
ID selector селектор идентификатора
cascade каскад
specificity специфичность селектора
box model блочная модель
margin внешний отступ
padding внутренний отступ
border граница
layout макет / компоновка страницы
maintainability удобство сопровождения
reusability возможность повторного использования

Questions:

  1. Name the three ways of implementing CSS.
  2. Which CSS implementation method would you normally choose for a website containing many pages? Explain why.
  3. What are the three parts of a CSS rule?
  4. What is the difference between .card and #card?
  5. Explain the difference between margin and padding.
  6. Write a CSS rule that makes every <h2> element green and 24 px high.
Check answers

1. Inline, internal and external CSS.

2. External CSS is usually appropriate because one stylesheet can be reused across many pages.

3. Selector, property and value.

4. .card selects a class; #card selects an ID.

5. Padding is inside the border. Margin is outside the border.

6.

h2 { color: green; font-size: 24px; }

Exercises:

Ex. 1 CSS Practical Exercise for a School Club Website (Rus)

 

Категория: Programming languages | Добавил: bzfar77 (21.09.2026)
Просмотров: 868 | Теги: box model, html css, web design, selectors, css | Рейтинг: 5.0/1
Всего комментариев: 0
Войдите:
avatar