Course Transition
Congratulations on finishing the HTML Masterclass! You know how to build the "skeleton" of a webpage. Now, it is time to add the skin, clothes, and makeup using CSS (Cascading Style Sheets).
Step 1: The Syntax of CSS
CSS is an entirely different language from HTML. It does not use angled brackets < >. Instead, it uses a Rule-Set consisting of a Selector and a Declaration Block.
color: blue;
font-size: 24px;
}
- Selector: Points to the HTML element you want to style (e.g.,
h1). - Declaration Block: Wrapped in curly braces
{ }. Contains one or more declarations separated by semicolons. - Property & Value: Each declaration includes a CSS property name and a value, separated by a colon (e.g.,
color: blue;).
Step 2: The Three Ways to Insert CSS
How does the browser know which CSS rules to apply to your HTML? There are three methods.
1. Inline CSS (Avoid for Large Projects)
You write the CSS directly inside the HTML tag using the style attribute. We used this heavily in the HTML tutorials. It is bad practice for large websites because you have to style every single element one by one.
2. Internal CSS (Used for Single Pages)
You define the CSS inside a <style> element, placed inside the <head> section of your HTML page. This allows you to style multiple elements on that specific page at once.
<style>
body { background-color: #f0f0f0; }
</style>
</head>
3. External CSS (The Professional Standard)
You create a completely separate file called style.css. Then, you link your HTML document to that file. This means you can write one CSS file and use it to style 1,000 different HTML pages instantly!
<!-- Linking to an external stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
Step 3: Basic Selectors (The Core Skill)
If your CSS is written in an external file, how do you tell it exactly which paragraph to color red and which paragraph to color blue? You use Selectors.
1. The Element Selector
Targets all HTML tags of a specific type. If you use this, EVERY paragraph on your website will change.
text-align: center;
color: #333333;
}
2. The Class Selector (.)
This is the most common selector. You create a custom class name in your CSS starting with a period (.). Then, you can apply that class to ANY element in your HTML.
The CSS:
background-color: yellow;
font-weight: bold;
}
The HTML:
<h2 class="highlight">This heading will ALSO be yellow.</h2>
This text will be yellow.
This heading will ALSO be yellow.
3. The ID Selector (#)
The ID selector uses a hash character (#). An ID must be completely unique within a page. You use this to style one specific, highly unique element (like your main navigation bar).
The CSS:
color: white;
background-color: #4C8BF5;
}
The HTML:
- Use Classes (.) when you want to style multiple elements the exact same way.
- Use IDs (#) when you want to style ONE specific, unique element on the page.
Final Quiz: Test Your CSS Logic
Click the buttons below to verify your knowledge of CSS architecture.
