CSS Basics (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
CSS basics
What is CSS?
CSS controls the appearance of a webpage (e.g. colour, font, size, layout)
It can be written inside the HTML file (internal) or stored in a separate file (external)
CSS uses selectors, classes and IDs to target specific elements
Internal and external CSS
Internal CSS sits inside the
<head>section in a<style>blockInternal CSS only affects the page it is written in
<head>
<style>
p { color: blue; }
</style>
</head>
External CSS is saved in a separate file and linked using a relative file path
External CSS is reusable across multiple pages
<head>
<link rel="stylesheet" href="styles.css">
</head>
Selectors, classes and IDs
A selector targets an HTML element
p { color: red; }
A class lets you apply the same style to multiple elements
.highlight { background-color: yellow; }
Use it in HTML:
<p class="highlight">Hello</p>
An ID targets one specific element on a page
#mainTitle { text-align: center; }
Use it in HTML:
<h1 id="mainTitle">Welcome</h1>
CSS text properties
You must know how to style text by changing:
font-family
font-size
color
text-align
Example
h1 {
font-family: Arial;
font-size: 24px;
color: navy;
text-align: center;
}
Background colour
You must be able to set background colours on elements such as
<div>, headings or paragraphs
div {
background-color: lightgrey;
}
Worked Example
A sportswear company, "AquaGear," is implementing a new page, summerPromo.html, and needs to apply cascading style sheets to ensure it meets new aesthetic and consistency requirements.
Examine the existing external CSS rules used in the styles.css file:
body {
background-color: white;
}
#headerBanner {
font-family: Calibri;
font-size: 32px;
}
.promoText {
color: darkblue;
text-align: center;
}
(i) Identify the selector used above that targets a specific, unique element on the page, regardless of its tag type
[1]
(ii) Identify one CSS text property used in the code snippet above
[1]
Answers
(i) body { background-color: #FFFFE0; } [1 mark]
(ii) h1 { text-align: right; } [1 mark]
Unlock more, it's free!
Did this page help you?
