Implementation (CSS) Flashcards
Describe the purpose of CSS
Cascading Style Sheets (CSS) are used to define how HTML elements should be displayed.
Describe and use a CSS selector
Each CSS rule-set is made up of a selector, followed by a declaration block in { } brackets.
The selector matches the HTML element that is to be styled by the CSS.
Describe and use the CSS text font property
CSS can be used to set the font of an HTML text element.
Example 1
Write a CSS rule to make all <p> elements use the Arial font family, font size 12px.
Solution
p {
font-family: “Arial”;
font-size: 12px;
}
Example 2
Write a CSS rule to make all <h5> elements have a Times New Roman font, with a 20px font size.
Solution
h5 {
font-family: “Times New Roman”;
font-size: 20px;
}
Describe and use the CSS text color property
CSS can be used to set the colour of an HTML text element.
(be aware that CSS uses the American spelling - color)
Example
Write a CSS rule to make all <h1> elements red.
Solution
h1 {
color: red;
}
Describe and use the CSS text alignment property
CSS can be used to set the alignment of an HTML text element.
(options are: center, left, right)
Example
Write a CSS rule to make all heading 2 elements centred.
Solution
h2 {
text-align: center;
}
Describe and use the CSS background color property
CSS can be used to set the background colour of an HTML element.
(be aware that CSS uses the American spelling - color)
Example 1
Write a CSS rule to give a page a light blue background colour.
Solution
body {
background-color: lightblue;
}
Example 2
Use CSS to make all paragraph elements have a yellow background colour.
Solution
p {
background-color: yellow;
}
Describe and use the CSS class selector
CSS class styles all HTML elements with a matching class attribute.
A CSS class selector can be used to style multiple elements on a web page.
Example
This is a CSS class which has been named sky-style, with dark blue text and a light blue background.
CSS
.sky-style {
color: darkblue;
background-color: lightblue;
}
HTML
<h1>This heading uses the sky-style CSS class</h1>
<p>This paragraph uses the sky-style CSS class</p>
<p>This paragraph does not use the sky-style CSS class</p>
Describe and use the CSS id selector
The CSS id selector styles the HTML element with a matching id attribute.
A CSS id selector can be used to style only one element on a web page.
Example
This is a CSS id selector which has been named page-header, with white centred text on a green background, size 10px.
CSS
#page-header {
color: white;
background-color: green;
text-align: center;
font-size: 10px;
}
HTML
<p>This is the page header</p>
Describe and use internal CSS
Internal CSS is included in the <style> element within the head section of a web page, and its rules can be applied to that page only.</style>
Example
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: green;
}</style></head>
<body>
<h1>Page Heading</h1>
<p>Some paragraph text</p>
</body>
</html>
Describe and use external CSS
External CSS is stored in a separate external style sheet, and its rules can be accessed by any web page on a website. A link to the external style sheet must be added to the head section of the web page.
Example
External CSS file mystyle.css:
h1 {
color: blue;
}
p {
color: green;
}
Link to the external css file mystyle.css in the head section of the web page:
<head>
<link></link>
</head>
