Styling a Web Page with CSS
We learn to use CSS to give an HTML page colors, fonts and layout, and meet the ideas of selectors and properties.
All topics (10 of 11)
Chapter 1. Spreadsheets
Chapter 2. Databases
Chapter 3. Computer Networks and the Web
Chapter 4. Number Systems
HTML provides the structure of a page, and CSS (Cascading Style Sheets) defines its appearance: color, font, size and spacing. Separating structure from appearance is convenient: a single CSS file can change the design of a whole site at once.
A CSS rule consists of a selector and property: value; pairs inside curly braces. The selector says which element the rule applies to: for example, h1 means all first-level headings, and .red means elements with class="red". The most used properties are color (text color), background-color, font-size, text-align, and margin and padding (outer and inner spacing).
Rules can be written in a <style> tag inside <head>:
``html
<style>
h1 { color: darkblue; text-align: center; }
p { font-size: 18px; }
.red { color: red; }
</style>
`
Then we give the element a class: <p class="red">Important!</p>. In big projects the CSS is moved to a separate .css file and connected with <link rel="stylesheet" href="style.css">`.
Key takeaways
- HTML is responsible for structure, CSS for appearance.
- A CSS rule is: selector { property: value; }.
- A class lets you give the same style to several elements.
- CSS can be moved to a separate file and attached to many pages.
Practice tasks
- Add a
<style>tag to the page from the previous topic, center the heading and make it blue. - Create a class
.notewith red text and a light yellow background, then give this class to two paragraphs. - Change the page background (with the
bodyselector) to a light color and addpadding: 20px;, and watch how the spacing around the text changes.
Review questions
Test yourself: think first, then reveal the answer.
1What is a selector?Show answerHide answer
The part of a CSS rule that shows which elements it applies to.2Which property changes the text color?Show answerHide answer
The `color` property.
0 of 11 topics completed
Sign in to mark