Computer Science
Grade 10
20 min
CSS Fundamentals: Styling Web Pages
Learn the basics of CSS for styling HTML elements.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the role of CSS in separating content (HTML) from presentation (style).
Apply styles to an HTML document using internal and external stylesheets.
Use element, class, and ID selectors to target specific HTML elements for styling.
Modify common CSS properties, including `color`, `background-color`, `font-size`, and `font-family`.
Describe and apply the core components of the CSS Box Model: margin, border, padding, and content.
Link an external CSS file to an HTML document using the `<link>` tag.
Ever wondered how a plain, black-and-white text document transforms into a visually stunning website? 🎨 That's the power of CSS!
This lesson introduces you to Cascading Style Sheets (CSS), the language that brings design and layout to the web. Y...
2
Key Concepts & Vocabulary
TermDefinitionExample
CSS (Cascading Style Sheets)A stylesheet language used to describe the presentation of a document written in a markup language like HTML. It controls the colors, fonts, layout, and overall visual appearance.A CSS file might contain a rule that makes all `<h1>` headings blue and all paragraphs use the 'Arial' font.
SelectorA pattern used to select the HTML element(s) you want to style. The most common types are element, class, and ID selectors.In `p { color: red; }`, the `p` is the selector, targeting all `<p>` elements.
PropertyThe specific style attribute you want to change for the selected element.Common properties include `color`, `font-size`, `background-color`, and `margin`.
ValueThe setting you want to apply to a property.For the `color` p...
3
Core Syntax & Patterns
CSS Rule Syntax
selector { property: value; }
This is the fundamental syntax for all CSS. The 'selector' targets an HTML element. The curly braces `{}` contain one or more 'declarations'. Each declaration consists of a 'property' and its 'value', separated by a colon and ending with a semicolon.
Class vs. ID Selectors
Class: `.class-name` | ID: `#id-name`
Use a class (`.`) to style multiple elements that share a common style. Use an ID (`#`) to style one single, unique element on a page. An ID is more specific and will override class styles.
Linking an External Stylesheet
<link rel="stylesheet" href="path/to/your/styles.css">
To keep your HTML and CSS separate, you place this `<link>` tag inside...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
An external stylesheet contains the following rules in this exact order:
`p { color: blue; }`
`.intro { font-size: 20px; }`
`p { color: red; }`
What color will the text of a standard `<p>` element be?
A.Red
B.Blue
C.Black (default)
D.It will cause an error.
Challenging
A developer is working on an HTML file located at `/project/about/team.html`. The site's main stylesheet is located at `/project/assets/css/main.css`. What is the correct relative `href` path to link the stylesheet from the `team.html` file?
A.assets/css/main.css
B.../assets/css/main.css
C.../../assets/css/main.css
D./project/assets/css/main.css
Challenging
You need to style 'success' and 'error' message boxes. Both must have 10px of padding. Success boxes need a green background, and error boxes need a red background. What is the most efficient CSS approach using class selectors?
A.Create one class `.success-message` with all styles, and another `.error-message` with all styles.
B.Use IDs `#success` and `#error` since there are only two types.
C.Create a base class `.message` for padding, and separate classes `.success` and `.error` for the background colors.
D.Create a single class `.message` and use JavaScript to change the color.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free