Lesson 3
Dressing Up Your Webpages: Beginning with CSS Styling
Introducing CSS

Hello there! Today, we are venturing into an exploration of CSS (Cascading Style Sheets), a language that contributes endlessly to bringing color, life, and structure to webpages. Think about this: once you have constructed a building with bare walls with HTML, CSS becomes the tool that paints the walls, decorates the room, and makes it cozy. Amazing, isn't it? Let's dive in!

Basic Syntax of CSS

The syntax of CSS is similar to writing commands for your dog — you choose the dog's name (selector), and then tell it what to do (declarations). For instance, let's create a CSS rule-set:

CSS
1h1 { 
2  color: blue; 
3  font-size: 12px; 
4}

In this example, h1 is the selector (our pet), color and font-size are the properties (commands), and blue and 12px are the corresponding values that indicate how to perform the command. This code makes all <h1> elements have a blue text that is 12 pixels big.

Connecting CSS to HTML

There are three ways we can connect CSS to HTML:

  • Inline CSS: We apply styles directly within the HTML element using the style attribute:
HTML, XML
1<h1 style="color:blue;">A Blue Heading</h1>
  • Internal CSS: Here, CSS rules reside within the <style> tag inside the head section of the HTML document.
HTML, XML
1<head>
2  <style>
3    h1 {color: red;}
4    p {color: blue;}
5  </style>
6</head>
  • External CSS: For larger projects, we link separate .css files to the HTML document using the <link> tag:
HTML, XML
1<head>
2  <link rel="stylesheet" href="styles.css">
3</head>

Accompanied by the corresponding styles.css:

CSS
1h1 {color: red;}
2p {color: blue;}
CSS Selectors

CSS selectors are used to "find" HTML elements based on properties of the elements. There are several different types of selectors in CSS:

  • Element Selector: This targets HTML elements by their tag name. Any style assigned to an element selector will apply to all elements with that tag on a page. For instance:
CSS
1p {
2  color: red;
3  font-weight: bold;
4}

In this example, all <p> (paragraph) elements on the page would receive the styles specified (in this case, they will have red text in bold).

  • Class Selector: This targets HTML elements with a particular class attribute. They are preceded by a dot (.) in CSS (The /* and */ notations used in the code snippet below mark the comments in CSS):
CSS
1.important-text {
2  color: red;
3  font-style: italic; /* makes the text italic */
4}

In your HTML, you'd then add the class attribute with the value important-text to the elements you want affected:

HTML, XML
1<p class="important-text">This text is considered important!</p>

This class can be reused across multiple elements on your page, allowing them all to share the same styles.

  • Id Selector: This targets a unique HTML element by its id attribute. It is preceded by a hash (#) in CSS:
CSS
1#special-text {
2  color: red;
3}

And, in HTML you'd assign this id to one specific element:

HTML, XML
1<p id="special-text">This text is unique and hence, red!</p>

Remember, id is meant to be unique, and should only be applied to one element on a page.

By mastering these selectors, you'll be able to control the presentation of every element on your page for a beautiful and consistent design.

Understanding Div and Span Tags, Block-level and Inline Elements

div and span tags group HTML elements, allowing a style to be applied swiftly to all elements within the group.

  1. div: This is a block-level element. By default, block-level elements create line breaks before and after themselves, and occupy the full width of their parent element.
HTML, XML
1<body>
2  <div style="background-color:yellow;">
3    <h2>This is a heading inside a div element</h2>
4    <p>This is a paragraph inside a div element.</p>
5  </div>
6</body>

In this case both h2 and p elements will have a yellow background occupying not only the text but the full row.

  1. span: This is an inline element, meaning it only occupies necessary space and doesn’t cause line breaks.
HTML, XML
1<p>My mother has <span style="color:blue;">blue</span> eyes.</p>

Notice that the word “blue” is colored in blue. That’s the span tag at work!

To help you understand this better, let's define some additional terms:

  • In HTML, elements are often enclosed within other elements. The enclosing element is called the parent element, and the enclosed elements are known as child elements. In the above example, the div element is a parent element to the h2 and p child elements.

  • Block-level Elements: By default, a block-level element starts on a new line, causes a line break after itself, and expands to fill the full width of its parent element. <div>, <p>, and <h1> through <h6> are some examples. Though these elements behave this way by default, their behavior can be modified using advanced CSS techniques.

  • Inline Elements: On the other hand, inline elements do not start on a new line and do not cause a line break after them. They take up only as much width as necessary for their content. Multiple inline elements can be placed next to each other on the same line. Examples of inline elements include <span>, <a>, <img>, etc.

Understanding the concepts of parent and child elements, as well as block-level and inline elements, and how to use div and span tags are essential for effective webpage layout and styling.

Lesson Summary

Congratulations! You have successfully mastered the basics of CSS. The knowledge you acquired today is the first step towards creating appealing and dynamic webpages. Up next, we have hands-on exercises to reinforce your understanding. Remember, practice is the ladder to mastery. Let's dive in and code happily!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.