Different Types of CSS: Inline, Internal, and External Stylesheets

UDIT KHODE June 10, 2023

TYPES OF CSS (Cascading Style Sheets) 

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML or XML. There are several types of CSS that can be used in web development.




1. Inline CSS:

Inline CSS is applied directly to an HTML element using the `style` attribute. It overrides any other CSS rules applied to the element. Here's an example:


<html>
</title> inline CSS </title>
<head></head>
<body>

<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>

</body>
</html>

2. Internal CSS:

Internal CSS is defined within the `<style>` tags in the `<head>` section of an HTML document. It applies to the entire document or specific elements. Here's an example:


`<html>

<head>

  <style>

    p {

      color: red;

      font-size: 20px;

    }

  </style>

</head>

<body>

  <p>This is a paragraph with internal CSS.</p>

</body>
</html>


3. External CSS:

External CSS is defined in a separate CSS file and linked to an HTML document using the `<link>` tag. It allows the same CSS rules to be applied across multiple HTML documents. Here's an example:


HTML file:

<html>

<head>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <p>This is a paragraph with external CSS.</p>

</body>

</html>



CSS file (styles.css):


p {

    color: green;
 
    font-size: 24px;
 
  }
 
 

4. CSS Selectors:

CSS selectors are used to target specific HTML elements for styling. Here are a few examples of CSS selectors:


- Element Selector: 

Targets all instances of a specific HTML element. 

For example:

`<html>

<head>

  <style>

    p {

      color: red;

      font-size: 20px;

    }

  </style>

</head>

<body>

  <p>This is a paragraph with internal CSS.</p>

</body>
</html>

Class Selector: 

Targets elements with a specific class attribute with a ( . ) with each selector 

For example:


<html>
<head>
<style>
.highlight

{

  background-color: yellow;

}
</style>
<body>
<p class="highlight"> hello i'm css selector<p>
</body>
</html>



-ID Selector: 

Targets a specific element with a unique ID attribute. For example:


<html>
<style>

#header {

    font-size: 24px;
 
  }

</style>
<body>
<p id="header"> hello i'm css selector<p>
</body>
</html>

if the blog is helpful for you must share and comment..........

THANK YOU💖

Tags:

Post a Comment

0 Comments