Chapter -2 (Ways to include the CSS and syntax of the CSS)

 CodeAndMan

Chapter-2(Ways to include the CSS and syntax of the css)

Hey guys, how are you all? In our last tutorial I had given an intro to you of the css. In this tutorial we will check what are the ways through which we can include the css in our HTML document. We will also get familiar with the syntax of the css after this tutorial. so let’s begin:

Table of Contents 

1. Revision of the last lesson

2. What are the ways to include the CSS in the HTML

3. Internal CSS

4. External CSS

5. Inline CSS

6. What is the syntax

7. The syntax of the CSS

8. What is a selector in the CSS

9. What is a property-name and property-value in the CSS

10. Comments in the CSS

Revision of the last lesson

In our last lesson we learnt what is the front-end and what is the backend. We also learnt the functions of the front end web technologies. We also got an understanding of how the websites work and what is the IP address so I hope that you remember the concepts. Now let’s get started with today’s agenda:

What are the ways to include the CSS in the HTML

There are three ways to include the CSS into HTML:

1. External css

2. Internal css

3. Inline css

Let’s discuss about these now in detail:

External CSS

In the external css, We create an external file with .css extension and link this .css file with the html file through the link tag for the HTML. This is the most often used method when we develop websites. We often name the main css file style.css and link it in the html through the link tag the link tag takes 2 attributes:

1. Href 

2. Rel

In the href attribute you specify the path where the css file is located.

In the real attribute you specify that what type of relation you are going to make its value is “stylesheet”. The main code of the link tag looks like this:

<link rel=”stylesheet” href=”Path of the css file”/>

Internal CSS

In the internal css, you create a style tag in the html and write all the css styling inside it. This is used when you don’t have much bigger css code.

The code of the internal css looks like this:

<style>

Here comes the css

</style>

Inline CSS

In the inline css, we use the attribute called the style and write all the styling inside it. It is not often used.

The code of the inline css looks like this:

<elementname style=”here comes the css”>

Content

</elementname>

What is the syntax

The syntax is the way in which the code in a programming language is written. It is in almost every programming language. Let’s discuss about the syntax of the css:

Syntax of the css

I told you that almost every programming language has its own syntax so the css also has its own syntax. The syntax of the css is very simple. In the css syntax you need three things:

1. The selector 

2. The property-name

3. The property-value

The code in the css looks like this:

Selector{

property-name:property-value;

}

Let’s talk about these in detail:

What is the selector in the CSS

The selector in the css is used to select an html element. There are three types of basic css selectors:

1. Class selector

2. Id Selector

3. Tag Selector

The class selector is used to select multiple html elements at one time. Let’s talk about how this works:

So guys we have to give a class to multiple html elements then we have to access that class using the class selector. Giving a class to the html element is pretty simple; you have to only use the class attribute and then simply write the class name after that. The class name can be any word which you want. Now let’s talk about how to access this class in the css:

To access the class in the css we have to write dot(.) and then the classname. Let me give you an example:

<a href = “#” class=”Element”>I am element</a>

<!-- accessing it using the css --> 

<style>

.Element{

property-name:property-value;

}

</style>

I hope that you understand what I am doing here. Let’s talk about the Id Selector now:

The Id selector is pretty similar like the class selector but it has two different things:

1. It cannot be given to multiple items at one time.

2. You have to use the hashtag(#) instead of dot(.) to access it in the css.

Example :

<a href=”#” id=”element”>I am element</a>

<!-- accessing it in the css -->

<style>

#element{

property-name:property-value;

}

</style>

Let’s talk about the tag selector:

The tag selector is used when you want to select a complete category of tag at one time for example if you want to select all the anchor tags of the html at one time then you have to use the tag selector.

Syntax of tag selector

Tagname{

property-name:property-value;

}

Example:

li{

property-name:property-value;

}

property-name and property-value in the css

There are various properties in the css we will discuss them in upcoming chapters. The property-name is used here for the name of any css property. The property-value is used for any value of a css property.

Comments in the CSS

The comments are used for taking the notes inside the code. In other words it is the lines of code that the compiler or browser or whatever you say ignores. There are two types of comments in the css:

1. Single line comments 

2. Multiline comments

The single line comments are used when you want to add a comment in only one line. The syntax of the single line comment is like this:

// I am a css single line comment

The multiline comment is the comment which is used when you want to take a very big note of let’s say 30 to 40 lines. You can write between these and the whole portion which you wrote between the syntax of multiline comment is ignored by the browser. The syntax of the multi line comment in the css is like:

/* This is a multi line comment in the css  */

Points to remember

1. There are two types of comments in the css- Single line and Multiline.

2. The syntax is the way to write the code.

3. The class selector can be given to multiple items

4. The id selector cannot be given to multiple items.

5. You have to use a link tag to include an external css file inside the html file.

6. Using inline css is not a very good practice.

7. Internal css is used when you don’t have very much css code.

8. The html stands for hyper text markup language.

Exercises

1. Write the syntax of a multi line comment in the css.

2. How many types of selectors are there in the css?

3. What is a comment?Write a short note.

4. What is inline css? Write the syntax of the css.

5. What are the ways to include the css in the HTML?

6. What is a selector in the css? How many types of basic selectors are there in the css?

7. What is the syntax?Write a short note.

8. Which attribute is used in the inline css?

Posts you should read:

How to do the technical seo