Navigation
Transition from structure to style by learning how Cascading Style Sheets (CSS) change the look of your site.
Have you ever wondered how a plain text document transforms into a stunning, colorful website like Instagram or YouTube? It’s not magic—it’s CSS, the 'digital interior designer' of the internet.
CSS (Cascading Style Sheets) can be added to your website in three ways. Inline CSS is written directly inside an HTML tag using the `style` attribute—it's like putting a 'Wet Paint' sign on one specific chair. Internal CSS is written inside `<style>` tags in the `<head>` of your HTML document, controlling that single page. Finally, External CSS is the gold standard; it lives in a separate `.css` file. This allows you to change the look of 1,000 pages by editing just one file! Think of it as a master blueprint for an entire neighborhood.
Quick Check
If you want to change the font for an entire website with 50 different pages, which CSS method is the most efficient?
Answer
External CSS, because you only have to update one file to affect all 50 pages.
To style something, you first have to 'select' it. A CSS Selector tells the browser exactly which HTML element to decorate. The basic syntax follows this pattern: `selector { property: value; }`. For example, if you want all your paragraphs to be blue, you use the `p` selector. The property is what you want to change (like `color`), and the value is the new setting (like `blue`). This separation of concerns keeps your code organized and easy to read.
To turn all level-1 headings green, follow these steps: 1. Identify the HTML tag: `<h1>`. 2. Write the selector: `h1`. 3. Add curly braces: `h1 { }`. 4. Insert the property and value: `h1 { color: green; }`.
Quick Check
In the CSS rule 'body { background-color: black; }', what is the 'property'?
Answer
background-color
Computers understand color in a few ways. You can use Color Names like `red`, `skyblue`, or `hotpink` for quick changes. However, for millions of options, we use Hex Codes. A Hex code starts with a `#` followed by six characters using base-16 math (0-9 and A-F). The code represents the intensity of Red, Green, and Blue (). For example, white is `#FFFFFF` (all colors at max) and black is `#000000` (no color). Each pair of characters represents a value from to in decimal.
Let's create a custom purple background: 1. Start with the property: `background-color`. 2. Use a Hex code with high Red and Blue, but low Green: `#800080`. 3. Combine with a selector: `body { background-color: #800080; }`.
Combine selectors and colors to create a 'Dark Mode' card: 1. Target a `div` element. 2. Set `background-color` to a dark gray: `#333333`. 3. Set the text `color` to a bright highlight like `gold`. 4. Result: `div { background-color: #333333; color: gold; }`.
$#RRGGBB$) to define over 16 million unique colors.Which CSS method involves writing style rules inside a separate file ending in .css?
In CSS, how is a Hex code for pure Red represented?
The 'selector' in a CSS rule determines which HTML element will be styled.
Review Tomorrow
In 24 hours, try to explain the difference between a 'property' and a 'value' to a friend, and recall what the first two digits of a Hex code represent.
Practice Activity
Create a simple HTML page and try to change the background color to your favorite color using a Hex code found on a color picker website.