Types of CSS - ( Cascading Style Sheet)

Muhammad Junaid October 31, 2020

Types of CSS ( Cascading Style Sheet)

Types of CSS ( Cascading style sheet)
Types of CSS ( Cascading style sheet) 

CSS stands for Cascading Style Sheets which is used for controlling you to create rules that specify how the content of an element should appear. Without using CSS it seems to bad impact on our web page therefore it is a prerequisite for us to learn CSS. Types of CSS are extremely important to know for us because we can make our website clean, faster, and professional which grabs the attraction of users.

There are three types of CSS which are given below: 


Three types of CSS
Three types of CSS

  1. Internal CSS by using element of <style> in the <head> tag.
  2. External CSS by using <link> tag to link HTML file to external css file.
  3. Inline CSS by using the style attribute in the HTML elements.
But one of the best ways to use CSS is external CSS in that most of the developers prefer it to use.



Internal CSS

Internal CSS
Internal CSS

In Internal CSS you can include CSS rules within an HTML page by placing them inside an <style> element, which usually sits inside the <head> element of the web page. i.e the CSS is embedded within the HTML file. The <style> element should use the type attribute to indicate that the styles are specified in CSS. 


Main points for Internal CSS

  • Using the style for multiple web pages is time-consuming in that we need to place the style on each web page. 
  • When building a site with more than one page, you should use external CSS. 
  • Using Internal CSS in the HTML document will reduce the page size and loading of the webpage.
  • An internal CSS is used to define a style for a single HTML page. 
  • Internal CSS is used in the condition when we want a style to be used in the complete HTML body.

First of all, you need to create an HTML file in which you declare the basic structure of an HTML document after creating the HTML structure go over their head tag, and put a <style> tag with an opening and closing tag. In the opening tag declares a type attribute and put in text/CSS. And then whatever you want to design in it do it. 

Internal CSS with examples 


<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>


External CSS

External CSS
External CSS

External CSS contains a separate CSS file in which we create a .css file and use it in our HTML web page as per our need. Usually, External CSS style sheets are used whenever we have many HTML attributes and we can use it when we required it. The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the web page and It puts in <head> element. In this there should be used three attributes: 

  1. href  ---> This shows the path of the CSS file.
  2. type ---> It specifies the type of document to be linked. The value of this attribute should be "text/CSS". 
  3. rel ---> This attribute shows the relationship between the HTML page and the file it is linked to. The value of this attribute should be "stylesheet" when linking to a CSS file. 

Main points for External CSS 

  • There is no need to rewrite the CSS style again and again in a complete body of HTML. 
  • CSS style written in a separate file with .CSS extension and it should be linked to the HTML document using <link> tag. 
  • This type of style sheet gets a separate file in which developers can state every CSS style. 
  • The external CSS style sheet must be saved with a .CSS extension. 

External CSS with examples 


<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>

</body>
</html>


Inline CSS 

Inline CSS
Inline CSS

Inline CSS is used to define a unique style to a single HTML element. Inline CSS is specified within an HTML tag using the style attribute and then whatever we want to design it we can do. Whenever our requirements are probably small so it's better when we use it. 

Main points for Inline CSS 

  • Using inline CSS we will have to give style attributes in every HTML element. 
  • We can create CSS rules on the HTML page. 
  • Inline CSS will affect only an HTML element. 
  • There's a lot of time will be consumed to use it.


Internal CSS with examples 


<!DOCTYPE html>
<html>
<head>

</head>
<body>

<img style="width:  100px;" />

</body>
</html>

Conclusion

I hope you all will have understood types of CSS and will have thrilled to know about types of CSS and internal, external, and inline CSS. My priority is to share my knowledge and experience with you. I proud that you taking an interest to read this article. Thanks for your time!
If you want to know further click the below links:




Tags

Post a Comment

0 Comments