CSS (OCR A-Level Computer Science): Revision Notes
📚 Revision Notes
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; }).
- Element Selector: Targets all elements of a type (e.g.,
- 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
styleattribute.
<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
.cssfile, 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 colour 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.