In the previous lesson, we learned about HTML and its basic tags. HTML is used to create the structure of a web page. However, plain HTML pages can look dull without any formatting or styling. This is where CSS comes into play.

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML. CSS allows you to apply styles, such as colors, fonts, and layouts, to HTML elements.

Let's take a look at a simple example:

1#include <iostream>
2using namespace std;
3
4int main() {
5  // CSS stands for Cascading Style Sheets
6  // It is a stylesheet language used to describe the
7  // presentation of a document written in HTML.
8  cout << "<style>\n";
9  cout << "h1 { color: red; }\n";
10  cout << "p { font-size: 18px; }\n";
11  cout << "</style>\n";
12
13  // HTML tags can be styled using CSS
14  cout << "<h1>This is a heading</h1>\n";
15  cout << "<p>This is a paragraph</p>\n";
16
17  return 0;
18}

The code snippet above demonstrates the usage of CSS to style HTML elements. When executed, it will output the following HTML code:

1<style>
2h1 { color: red; }
3p { font-size: 18px; }
4</style>
5
6<h1>This is a heading</h1>
7<p>This is a paragraph</p>

In this case, the CSS code is embedded within <style> tags. We define a rule to make the heading text red and another rule to set the font size of the paragraph to 18 pixels.

The HTML elements <h1> and <p> are then styled using the CSS rules defined in the <style> tags.

CSS provides a wide range of properties that you can use to style HTML elements. You can change the color, font, background, size, positioning, and more.

In the upcoming lessons, we will explore different CSS properties in detail and learn how to use them to create visually appealing web pages.

xxxxxxxxxx

#include <iostream>

using namespace std;

​

int main() {

  // CSS stands for Cascading Style Sheets

  // It is a stylesheet language used to describe the

  // presentation of a document written in HTML.

  cout << "<style>\n";

  cout << "h1 { color: red; }\n";

  cout << "p { font-size: 18px; }\n";

  cout << "</style>\n";

​

  // HTML tags can be styled using CSS

  cout << "<h1>This is a heading</h1>\n";

  cout << "<p>This is a paragraph</p>\n";

​

  return 0;

}