Introduction to CSS

Hello friends. You are welcome to our series of CSS.

CSS means Cascading Style Sheets.

In this segment of CSS that is in this entire session of our course  we will no doubt see various styles of CSS, how CSS is used, where it is used, why we use it, when we use it.

We will pay attention to everything.

To learn CSS, with regards to the basic knowledge, it is very important to know HTML.

I hope this series of ours of CSS, before starting that you have gone through the Learnvern series of HTML.

You have completed that.

To learn CSS, with regards to fundamental knowledge, it is very important for us to know HTML.

So, I hope after finishing HTML, you have started our CSS course. Come, let’s start this series on CSS.

So, before going through the slides, we would like to start with an example to know what CSS is and why it is useful for us.

So, let’s say I have a program with me.

Like there is an HTML file lying here.

So, I will open it. So, this is my file here.

In this file, in this web page, I have generated a menu bar.

There are different links placed on the menu bar.

When I hover over these links, we can see some differences. Let me zoom. Okay.

I have zoomed into the menu bar.

When I am hovering over that, we can see some effects.

The 1^st link we can see in green color. Rest of the navigation bar we can see in black color.

This menu bar of ours is made by combining 2 things.

One is HTML and the other is CSS.

I will show this  to you even in code.

This is our program. Let me open. Sublime Text. OK

So, this is our Sublime Text.

We will drag and drop and open our program.

So, here you can see that this is our program.

Where you can see starting from the style, till /style, our CSS has been added.

And here in the body portion our HTML has been added.

So, if here in the CSS portion I comment. So, here I have commented on CSS.

I will save this and run my program.

So, as soon as I reload this webpage, I can only see 4 links on my page.

And the design that was there, the look and feel, which was eye catching, it was an attractive design. That is not there with us.

We can see the 4 links in basic HTML design.

So, here we get to know the useful advantage, as to why CSS is necessary.

If we add CSS, the elements or anything that we have placed on our webpage, we can make it eye-catching, good to look at and has a good look and feel.

We can represent things in that way.

We can design the HTML page.

When we don’t use CSS, we can see our elements the way we are seeing it currently on the page.

So here we get to know the difference,why CSS is very necessary.

If I again uncomment it, save it and run it.

So, again my menu bar with which a good look and feel is attached. That I am getting.

 If I hover over anything, I get a different effect. If my 1^st anchor tag is active, I am getting a different color.

All this we have totally done with the help of CSS.

So, now we will go ahead with our CSS course. 1^st we have seen why CSS is necessary.

Now we will start with what is CSS and why do we require it? The full form of CSS is Cascading Style Sheets.

Like it is mentioned on this slide, CSS stands for Cascading Style Sheets.

It is a style sheet language which is used to describe the look and formatting of a document written in markup language.

So here,  where have we applied CSS? Here on our HTML page, we have applied CSS.

If we are making any HTML page.

So, to give that HTML page a proper look and to format it properly, CSS is very important.

It is further written that it provides an additional feature to HTML.

That means we use CSS to add new or additional features in CSS.

Now, the main thing is, it is generally used with HTML to change the style of web pages and user interfaces.

It means when we have to apply the transition, when we have to go from one page to another.

When we scroll on the given web page, any event or action that we perform.

And to give style to all the fundamental elements, what do we do? We use CSS.

It can also be used with any kind of XML document, including plain XML, SVG and Xul.

Means, the rest of the document that is there, means not only HTML but apart from HTML like XML and SVG, in this as well we can use the same CSS.

In the next paragraph it is mentioned that CSS is used along with HTML and JavaScript in most websites to create user interfaces of web applications and user interfaces for many mobile applications.

This means that we not only use CSS with HTML, we even use it with JavaScript.

When we have to make the pages dynamic and when we have to provide the designs dynamically at that time, we combine the CSS with the JavaScript and give our webpage a proper look and feel.

So, this was, what is CSS? and why do we use it?. We will go ahead with this.

Like it is mentioned, what is CSS? So, CSS stands for Cascading Style Sheet.

CSS is used to design the HTML tags.

It is a widely used language on the web.

 And HTML, CSS, JavaScript together is used for web designing.

That means that using them together we can make a complete website.

Next, we will discuss the advantages of CSS.

So, here there are 3 main advantages of CSS that are shown in bullet points.

The 1^st one is : solves a big problem which means.

When we had done the HTML course.

We had sometimes used CSS as well to design a few things.

Like we had designed SVG, at that time we had used CSS to give the border.

Like this in many places in the table and all we had used CSS.

Whenever we had used CSS what we had seen was it used to solve big problems, which means we write one CSS and use it in many  places, in that case the similar CSS that we have that we can apply to multiple elements.

That means with the help of CSS we can do a lot of changes together.

Write one CSS and apply it in many places.

So, what is happening here, we are also saving our time.

Like mentioned in the 2nd point, it saves a lot of time.

Which means that instead of writing one thing multiple times, we are writing it in one place.

So, what is happening, our big problems are getting solved.

Along with it, because of applying the same CSS our time is also getting saved, which means that we apply the CSS in one place and use it in multiple places.

So, this is our advantage.

The problem that was created by writing it everywhere multiple times is also getting solved.

And 3^rd is providing more attributes, which means using CSS we use more attributes.

Which means that the different properties given under CSS like border, color, background color, attachment, transition and transform, etc. are all the attributes that we have, which is not directly available in our HTML element.

Like in the body BG color has been given.

But the same BG color is not available in input.

So, what we can do to give BG color to the input, we can use CSS.

So, the 3^rd point is providing more attributes means, where all HTML is not helpful for us to give properties or attributes.

Those attributes we can  get in CSS. So, these are our 3 advantages of CSS.

Like we have seen in HTML, it is necessary to have a text editor with us.

To write up any webpage.

Similarly for CSS editors like Notepad and Sublime text editors are necessary.

Even if you have Notepad++, you can write CSS. Like we did in the HTML course.

Our entire HTML course, we have written in Sublime text.

Same way, when we will go ahead in the CSS course, in that as well we will be using Sublime text.

Now we will see what is the syntax for CSS. So, form(from) here we will go more ahead from the introduction of CSS.

On the current slide the syntax that we have been given, that is our CSS Syntax.

So, you can see that here one P tag has been taken.

That means the different tags that we had seen in HTML, from that one tag is P tag. So here P is written, after that curly braces has been opened, then one property has been written as color after that  is written Collen and then it is written black and then the curly braces are closed.

That means for P tag, color Collen, means the color given is black.

This means that in our P tag whatever writeup we will make will be black in color, which we can see from here.

So, this is our Syntax of writing CSS. So, not the different things that are written, what are they called in terms of CSS, that we will see.

Like the 1^st is our declaration portion means from P, curly braces open, properly and curly braces closed, this entire line that has been written, which is this portion? It is the declaration portion.

Okay.

Writing the entire CSS is a declaration for us.

If we go into the example that we have taken, we can see there that ul and then curly braces open, then 5 properties have been written and curly braces closed.

So, this selected portion that is there, that I have highlighted.

What will we call that entire portion? Declaration.

Now, we will move ahead with our slide.

Selector, so what is Selector? P, means whichever HTML element we are using to select means to show.

Like, to which element we have to apply the CSS. (repeat) So, here we have applied it to P.

So, P is the selector for us.

We will go in the example.

Here ul is mentioned.

So, who is our selector here? ul.

Below I have mentioned li, so who is my selector? li.

Next, we will see property.

Here the color that has been mentioned is what? That is my property.

Different example is also available with me from the one in the current example, which has been shown for the Syntax, that particular I have used is color.

Same way if we go in example, there is List Style Type, margin, padding, overflow and background color.

What are these 5 things? They are different properties.

Next is value.

So, here the black thing that is there, that is our value.

If we see in the example, there is none, 0, hidden and there is a color code given here 333, this is our value.

So, this is CSS Syntax. that How do we write CSS? So, the portion from P, curly braces open till curly braces close, is my complete CSS declaration.

The HTML element that we use.

With the help of which we apply CSS, that person becomes our selector.

The property that we use to know which CSS we need to apply, that is our property and whatever we pass is our value.

Here we have taken black color, so our value will be black.

If I use the border property, and if I write 1PX for the border.

Then my property would be border and the value would be 1PX.

So, this was how we take the Syntax.

Here, below it is written, selector, then property 1, value 1, property 2, value 2 and then infinite which means we can give more than one value and more than one property we can give.

So, this is our common Syntax.

How can we apply CSS by passing the value with the help of the selector?

We get a description of what is explained, we get a description in this slide, that is what is selector.

So, the selector indicates the HTML element which you want to style.

If we see in this example, P is my HTML element that I want to style.

Ahead, it could be any tag.

It can be any tag H1, title.

 In my example it is P.

Then comes the declaration block.

The declaration block can contain one or more declarations separated by a semicolon.

If we see in our example, after the color here is black and then we will keep a semicolon here and then we will add another property.

Like they have given in the example list style type none.

And then we have used a semicolon here.

After semicolon we have written another property in another line.

Then after semicolon 3^rd properly. So, with the help of semicolons we can differentiate the different properties.

We can describe it separately. Using semicolons, we can add multiple properties.

Then comes our property.

A property is a type of attribute of an HTML element.

It could be a color border, etc. Means which attribute we wish to design through CSS? Like in our example we have taken color.

And in this example, we have taken margin, padding and overflow kind of properties.

Like this we can use different properties and the last one is values.

Values are assigned to CSS properties.

In the above example value yellow is assigned to the color property.

We have taken black here.

And here we have seen that none, hidden, etc. are the values of our property.

So, this was the Syntax of our CSS.

Now comes how to add CSS? Means, how do we add CSS.

So, we have an example here of adding a CSS.

We will move ahead with it.

For that, what I will do is 1^st (first)of all I will open Sublime Text.

And here I am generating a new program and I am naming it HTML.

What we used to do for HTML? Html space, so our structure used to get generated.

So, here is example CSS. Okay.

In example CSS, in the body we will use 2 elements.

For example, I am taking the 1^st one H1, “write your first CSS program”.

Okay, so this is our h1. And here will add one P tag, “This is a Paragraph”.

So, here we have written a HTML program where we have given the title “Example CSS”.

One heading and one p tag, paragraph tag we have added here.

Now, wwe will save it as example_css.html.

Now, we will go in the folder, example css.

I will run this and here my program is running.

Write your 1^st CSS program and this is a paragraph.

So, one heading has come.

Okay, and one of my paragraphs has come.

Heading and paragraph. In our current program, we have not added any CSS.

Now, in this program, like we saw in Syntax.

In that way, we will add CSS in this. So, how can we add CSS? So, 1^st of all in the head tag, below the title, we will write here style tag.

As soon as we write a style tag, we will press Ctrl + space together, this much of our portion gets generated in which type, text, css is mentioned.

We will press the enter key, then this portion comes.

Means that in between style tags whichever CSS we want to add, we can add.

In the style tag my type is “text css”.

That means that we are adding the CSS in text form.

Here whichever CSS I want to add, I can add it.

So, based on the syntax we learned, the syntax that we saw in our PPT.

In the same way we will add CSS. So, let’s say my 1^st tag is h1. So, I will select h1, then curly braces open, enter. Inside the curly braces, I want the color of my h1 to be white. So, I will write here color and I will write here white.

Okay. And I want the background color to be red.

As soon as I type something, you can see that I can see a lot of properties underneath.

So, this is the advantage of my Sublime Text.

This we don’t get in Notepad. In Notepad ++ we get this facility.

 If you are using the editor like Sublime Text and Notepad++ then you can get different default properties.

So, let’s say I take background color. I give that red.

And in h1 I want some padding.

Means I want to give some space from both the sides.

So, I will add the padding, let’s say 5pixel.

Save, as soon as I save this and I run the program, you can see that here CSS is supplying.

My background comes in red color and my fonts are in white color.

So, this changing of background and making the background white.

I did it through CSS. So, what did I do? I added one selector, I added curly braces and I added my properties.

In the same way I want to decorate my P tag.

For the P tag I will add  color. Blue, save.

So, here is my P tag font, I am getting it now in blue color.

So, what did we see here? We made a simple program in which we added one h1, heading tag and one p tag.

And with the help of CSS we decorated it a little by giving background color, color and padding.

So, here we learned how we can give CSS in any program.

Back to our slide. Okay.

So, here in our, how to add CSS, the 1^st slide shows us what should be there in the body tag, the 2nd slide shows us which CSS we have to add.

So, in the style tag we can add our CSS.

So, in today's session we have seen the basics of CSS, how we add CSS, why CSS is important, how we can change the look and feel with the help of CSS. We saw that.

And in one program we also added CSS and showed how we can add CSS. And how does that work? So, this was our introduction portion of CSS. I hope in today’s segment, you must have properly understood CSS, its advantages, what is CSS and why do we use CSS? You must have understood it properly.

If in today’s segment there is anything that you have not understood.

You can tell us about it on forums.Learnvern.com.

I will try to revert to you as soon as possible with a solution.

In our next segment we will again see how to add CSS, in which, we are going to go ahead in CSS. So, we will meet you in the next segment.

Thank You.