WEBVTT

00:00.000 --> 00:07.000
Introduction to CSS

00:07.000 --> 00:18.000
In this video, we will understand what is CSS, difference between CSS and HTML, basic CSS syntax.

00:18.000 --> 00:26.000
What is CSS? CSS, Cascading Style Sheets, is a styling language used to define the appearance of an HTML webpage.

00:26.000 --> 00:33.000
It controls elements like colors, fonts, spacing, and layout to enhance the presentation of content.

00:33.000 --> 00:38.000
It functions similarly to libraries and Python, as we learned previously.

00:38.000 --> 00:41.000
Difference between CSS and HTML.

00:41.000 --> 00:51.000
HTML, hypertext markup language, is used to create the structure and content of a webpage, such as headings, paragraphs, and images.

00:51.000 --> 01:01.000
While CSS, Cascading Style Sheets, is used to style and format the webpage, adding colors, fonts, layouts, and spacing.

01:01.000 --> 01:08.000
Simply put, HTML builds the foundation, and CSS makes it visually appealing.

01:08.000 --> 01:13.000
Understanding CSS with example. Open the HTML project file.

01:13.000 --> 01:18.000
We will understand CSS by enhancing the previous project we developed in HTML.

01:18.000 --> 01:26.000
Let's understand what we are trying to do. We have to add background color and change font type and color of the webpage that we have developed.

01:26.000 --> 01:42.000
To do this, we will use basic CSS syntax, selectors, properties, values, under the title tag type, style, body, the open curly brace, background color, light blue, font family, aerial, sansarif,

01:42.000 --> 01:52.000
close curly brace, h1, open curly brace, color, dark blue, close curly brace, h2, open curly brace, color, green,

01:52.000 --> 02:05.000
close curly brace, p, open curly brace, font size, 18 pixels, close curly brace, list items, open curly brace, margin left, 20 pixels, color, dark green,

02:05.000 --> 02:17.000
close curly brace, hash main heading, open curly brace, text align, center, text decoration, underline, close curly brace, close style.

02:17.000 --> 02:23.000
Here the style tag has been used to define CSS styles directly within the HTML file.

02:23.000 --> 02:28.000
The style tag defines the appearance of the content within the page.

02:29.000 --> 02:52.000
The body selector in CSS is used to target the main content area of the webpage. The body element in an HTML document holds all the visible content of the page, such as text, images, and other media, which means background color of the webpage will be light blue, and font family will be aerial, or sansarif.

02:53.000 --> 03:06.000
Here the color and font are properties syntax, and which color to use, or which font, or the size of the font, are values syntax, the common selector that are used in this code are tag, class, and ID.

03:06.000 --> 03:16.000
The body, h1, h2, and p are all tag selectors, because they target HTML elements by their tag names.

03:16.000 --> 03:26.000
Class selector helpful for styling multiple elements with the same appearance. Here we have added the combined property to order list and unordered list.

03:26.000 --> 03:44.000
ID selector is unique and used for targeting a single specific element. As here we have applied to the h1 element to make the main heading stand out, added center alignment, and underline to emphasize it.

03:44.000 --> 04:04.000
But to see this in the webpage we need to add it in the h1 tag, add ID equals main heading, now the ID value will display, save and view the webpage, download or save the file as index.html, click on it to see whether it open in the browser.

04:04.000 --> 04:12.000
We will see webpage that we had developed has changed, it has background color, text and alignment is also changed.

04:14.000 --> 04:22.000
By understanding selectors, properties and values, you can create a visually appealing and well structured webpage.

04:22.000 --> 04:28.000
Keep practicing CSS and HTML to make your web pages look even better and more professional.