2.1. Cascading Style Sheets#
Cascading Style Sheets (CSS) is a language used to style web pages. While HTML is used to structure content, CSS is what makes that content look visually appealing by controlling things like colors, fonts, layouts, and spacing. Without CSS, web pages would all look the same!
Customisation of a web page’s style brings several advantages including:
pages can be styled to match a desired style e.g. a company’s brand
pages can be designed to be responsive to different devices and screen sizes.
pages can be designed to be accessible for people with disabilities
One of the key principles of CSS is the separation of content and presentation. This means that HTML is used to organise the content of the page (like text, images, and links), while CSS is used to control how that content looks. By keeping the structure and the style separate, software engineers can easily update the design without changing the content, and they can apply the same style across multiple pages by reusing CSS code.
There are three main ways to use CSS in a webpage:
inline
internal
external
We will cover each approach and discuss their use cases.
2.1.1. Glossary#
- Accessible#
Accessible design means creating websites that can be easily used by people with disabilities, such as those who use screen readers or have limited mobility. This involves ensuring that the layout, text, and navigation are clear and usable for everyone.
- Responsive#
esponsive design refers to making a website’s layout adapt to different screen sizes and devices, like phones, tablets, and desktops. This ensures that the website looks good and functions properly no matter what device it’s viewed on.
- Separation of content and presentation#
This concept means keeping the structure and meaning of a webpage (the HTML) separate from how it looks (the CSS). HTML is used for content, while CSS is used to control the style and layout, making it easier to manage and update both independently.