Lesson 1

Learning the Fundamentals of CSS

Topic Overview and Introduction

Welcome to CSS (Cascading Style Sheets), a pivotal tool for configuring the aesthetics of a website. In this lesson, we will delve into the basics of CSS and learn how to apply styles to HTML elements. By the end of this exploration, you will be capable of crafting essential styles and applying them to HTML elements using various methods. Let's dive in!

Unveiling the Magic of CSS

CSS lends style to an HTML structure. A CSS rule consists of a selector and a declaration block. In this instance, our aim is to turn an HTML heading blue:

CSS
1h1 { 2 color: blue; 3}

In this snippet, "h1" is the selector, while "color: blue;" is the declaration block.

The Changing Faces of CSS: Inline, Internal and External Stylesheets

CSS can be implemented in three distinct ways — Inline, Internal, and External.

Inline Styling

Inline CSS allows us to style directly onto HTML elements using the style attribute. It's akin to hand-painting each word on a page:

HTML, XML
1<p style="color:red;">I'm a red paragraph!</p> 2<p>I'm not red because I haven't been explicitly styled</p>

While perfect for quick fixes, combining many inline styles can clutter our HTML.

Internal Styling

Internal CSS gathers all styles in a <style> tag within the HTML's <head>, creating a uniform look for the entire page:

HTML, XML
1<head> 2 <style> 3 p { color: purple; } 4 </style> 5</head> 6<body> 7 <p>I am a purple paragraph.</p> 8 <p>Me too!</p> 9</body>

This method ensures all paragraphs adopt the same style, bringing consistency across the page.

External Styling

For larger projects spanning many HTML pages, external CSS stores styles in a separate .css file, which is linked to each HTML page. This acts like a uniform for an entire fleet of spaceships:

HTML page:

HTML, XML
1<head> 2 <link rel="stylesheet" type="text/css" href="style.css"> 3</head> 4<body> 5 <p>Greetings, cosmos!</p> 6</body>

CSS page:

CSS
1p { 2 color: blue; 3}

All HTML pages linked to the CSS file will display paragraph text in blue.

Styling by Tag Name

In our CSS toolbox, we also have the option to style by tag name. All elements with the same tag on an HTML page can share one style, showcasing uniformity!

HTML page:

HTML, XML
1<head> 2 <link rel="stylesheet" type="text/css" href="styles.css"> 3</head> 4<body> 5 <p>Hi, universe!</p> 6 <p>Hello, cosmos!</p> 7</body>

CSS page:

CSS
1p { 2 color: green; 3}

Both paragraphs on the HTML page will adopt the same green style! It's like a uniform for a team embarking on an adventure together!

Importance of Comments in CSS

While writing code, it's recommended to add comments that describe what's happening. This practice is hugely beneficial, particularly when working in a team or returning to your code after a while.

In CSS, comments can be added in the following way:

CSS
1/* This is a single-line comment */ 2 3/* 4This is a 5multi-line 6comment 7*/

When working with complex layouts, commenting can be a lifesaver. Let's try adding comments to our CSS. We'll style a paragraph text with a specific color and add a comment explaining our choice of color.

CSS
1/* Choosing green text color to indicate success message. This will not affect our CSS code in any way */ 2p { 3 color: green; 4}

In the above CSS, we added a comment stating why we chose green as the color for our paragraph – to indicate a success message. Now, anyone reading the code will know why that specific color was chosen.

Remember, good comments are brief, clear, and directly related to the code. They should explain why something is done rather than what is done. Happy commenting!

Lesson Summary

Great job, space traveler! Today, you've discovered the world of CSS. You've grappled with inline, internal, and external CSS, and practiced styling elements by their tag name. As a burgeoning CSS astronaut, strive to keep your code organized and your styling consistent!

Now it's time for some hands-on activity! During your exploration of the HTML galaxy, try experimenting with various CSS styles on different HTML elements. For instance, change the color and font size of paragraphs or modify the background color of the entire body. Keep exploring, and remember, practice makes perfect! Orbit back soon for more exciting space adventures! 🚀

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.