Computer Science
Grade 8
20 min
Introduction to CSS
Introduction to CSS
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define CSS and explain its purpose in web development.
Identify the three main ways to apply CSS to an HTML document.
Describe the basic structure of a CSS rule (selector, property, value).
Apply common CSS properties like `color`, `font-size`, and `background-color`.
Differentiate between element, class, and ID selectors.
Explain the concept of the Cascade and Specificity in CSS.
Debug simple CSS styling issues in a web page.
Ever wonder how websites get their amazing looks, colors, and layouts? 🎨 It's not just HTML! What if you could easily change the style of every paragraph on your page with just one line of code?
In this lesson, we'll dive into CSS (Cascading Style Sheets), the powerful language that brings beauty and design to your web...
2
Key Concepts & Vocabulary
TermDefinitionExample
CSS (Cascading Style Sheets)A style sheet language used for describing the presentation of a document written in HTML. It controls the look and feel of web content.Applying `p { color: blue; }` to an HTML page will make all paragraph text blue.
SelectorThe part of a CSS rule that points to the HTML element(s) you want to style. It tells the browser which elements to apply the styles to.`h1` (targets all h1 elements), `.my-class` (targets elements with class 'my-class'), `#my-id` (targets the element with id 'my-id').
PropertyA specific visual characteristic of an HTML element that you want to change, such as its color, size, or spacing.`color`, `font-size`, `background-color`, `margin`, `padding`.
ValueThe specific setting or amount for a CSS prop...
3
Core Syntax & Patterns
CSS Rule Syntax
selector { property: value; property2: value2; }
This is the fundamental structure for writing CSS. The 'selector' targets HTML elements, and the 'declarations' inside the curly braces define their styles. Each declaration is a 'property: value;' pair and must end with a semicolon.
Applying CSS Methods
1. Inline: `<element style="property: value;">`
2. Internal: `<style> selector { ... } </style>` (in `<head>`)
3. External: `<link rel="stylesheet" href="style.css">` (in `<head>`)
There are three ways to link CSS to an HTML document. External stylesheets are generally preferred for larger projects as they keep content and style separate, making code easier to manage...
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
A CSS file has these two rules in this exact order: `h1.title { color: blue; }` and `h1 { color: red; }`. An HTML element is defined as `<h1 class="title">My Page</h1>`. What color will the text be and why?
A.Red, because the `h1` rule is last in the source order.
B.Blue, because the `h1.title` selector is more specific.
C.Red, because an element selector is stronger than a class selector.
D.Blue, because the `h1.title` rule appears first in the stylesheet.
Challenging
An external stylesheet is linked before an internal `<style>` block in the HTML `<head>`. Both contain a rule for `p { font-size: ...; }`. The external file says `16px` and the internal block says `18px`. What will be the final font size of the paragraphs?
A.16px, because external stylesheets are more important.
B.18px, because the internal style rule comes later in the source order.
C.16px, because the external file is loaded first.
D.It depends on the browser.
Challenging
An element is defined as `<div id="container" class="box content">Text</div>`. You have three CSS rules: `div.content { color: green; }`, `#container { color: red; }`, and `.box { color: blue; }`. Which color will the text be?
A.Green, because `div.content` is the most descriptive selector.
B.Blue, because `.box` is a simple and direct class.
C.Red, because an ID selector has the highest specificity.
D.It will be the color from whichever rule is defined last in the CSS file.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free