CSS

Overview

CSS (Cascading Style Sheets) is used to control the appearance and layout of web pages. By separating style from structure, CSS makes it easier to manage and update the design of multiple pages at once. It allows you to define visual properties, such as colours, fonts, and positioning, to create a consistent look across a website.

Purpose of CSS

Styling HTML Content: CSS enables control over the visual aspects of HTML elements, like colour, font, and spacing, which HTML alone cannot handle.
Consistency: CSS allows for consistent styling across multiple pages by linking them to a single CSS file.
Responsive Design: CSS can adjust layout and element styles based on screen size, making websites look good on all devices.

CSS Syntax and Usage

Selectors: Selectors specify which HTML elements a style applies to.
- Element Selector: Targets all elements of a type (e.g., p {colour: black; } targets all <p> tags).
- Class Selector: Targets elements with a specific class (e.g., .intro { font-size: 20px; }).
- ID Selector: Targets elements with a specific ID (e.g., #header {background-colour: blue; }).
Properties and Values: CSS properties define what aspect of an element is being styled (e.g., colour, font-size), and values specify the styling (e.g., colour: red;).

lightbulbExample

Example:

h1 {
  colour: blue;
  font-size: 24px;
}
.main-text {
  font-family: Arial, sans-serif;
  margin: 10px;
}

Applying CSS

Inline CSS: Style applied directly within an HTML element using the style attribute.

<h1 style="colour: blue;">Welcome</h1>

Internal CSS: Defined within a <style> tag in the HTML document's <head> section.

<style>
  p { colour: green; }
</style>

External CSS: Linked via a separate .css file, which is the preferred method for managing styles across multiple pages.

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

Recognising and Writing CSS (Based on Appendix 5d)

You should be familiar with CSS properties such as:
- colour: Defines the colour of the text.
- background-color: Sets the background color of an element.
- font-family: Specifies the font.
- border-style, border-width: Define the style and width of an element's border.

lightbulbExample

Example of CSS code:

h1 {
  colour: blue;
}
#menu {
  background-colour: #A2441B;
}
.infoBox {
  background-colour: green;
}

infoNote

Key Takeaways

CSS Structure: CSS allows developers to style web pages by defining rules for each element or group of elements.
Selectors and Properties: CSS uses selectors to target elements and properties to apply specific styles.
Code Familiarity: Recognise and interpret common CSS styles, such as colours, borders, and text properties, for effective web styling.

CSS Simplified Revision Notes for A-Level OCR Computer Science

CSS