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!
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:
CSS1h1 { 2 color: blue; 3}
In this snippet, "h1" is the selector, while "color: blue;" is the declaration block.
CSS can be implemented in three distinct ways — Inline, Internal, and External.
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, XML1<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 CSS gathers all styles in a <style> tag within the HTML's <head>, creating a uniform look for the entire page:
HTML, XML1<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.
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, XML1<head> 2 <link rel="stylesheet" type="text/css" href="style.css"> 3</head> 4<body> 5 <p>Greetings, cosmos!</p> 6</body>
CSS page:
CSS1p { 2 color: blue; 3}
All HTML pages linked to the CSS file will display paragraph text in blue.
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, XML1<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:
CSS1p { 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!
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:
CSS1/* 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.
CSS1/* 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!
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! 🚀