Types in CSS

There are 3 main types to apply css in a webpage
  1. Inline CSS - We add styles in style attribute inside HTML elements.
  2. Internal CSS - declares styles in the <head> section with <style> element.
  3. External CSS - we add an external CSS file to the webpage with <link> element.

Inline CSS

Used to apply a unique style to a particular HTML element.
style attribute is used for an HTML element.
It is typically usefull for small, one-off style changes to specific elements.

Example 

<!DOCTYPE html>
<html>
<head>
  <title>Inline CSS Example</title>
</head>
<body>
  <p style="color:orange;">This Paragraph uses inline CSS </p>
<p style="background-color: green;border-radius:5px;padding:5px;">This Paragraph uses inline CSS </p>
</body>
</html>
Run

Internal CSS

Used to apply styles to a specific HTML page.
It is defined in the head section of an HTML page, within a style element.
it is typically usefull to set same styles to different elements in a webpage

Example 

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <style>
      body {
        background-color: grey;
      }
      h1 {
        background-color: white;
        padding:10px;
        border-radius:5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>A paragraph text.</p>
  </body>
</html>
Run

External CSS

Used to define the style for many HTML pages.
Add a link to it in the <head> section of each HTML page to use an external style sheet.

Example 

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Welcome to my website</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>
Run

Example 

body {
        background-color: grey;
      }
      h1 {
        background-color: white;
        padding:10px;
        border-radius:5px;
        text-align: center;
      }
Run

Quick Recap - Topics Covered

CSS Types
Inline CSS
Internal CSS
Internal CSS

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5

Quiz

FEEDBACK