HTML
JAVASCRIPT
CSS
PYTHON

Type of CSS

Types of CSS

The term "types of CSS" refers to the methods of applying CSS to HTML documents. There are three primary ways to use CSS: Inline, Internal, and External.

1. Inline CSS

  • Definition: CSS written directly within an HTML element's style attribute.
  • Priority: Inline CSS has the highest priority, overriding both external and internal styles if conflicts arise.
  • Usage: Best for quick fixes or applying unique styles to individual elements, but it is not recommended for larger projects due to maintenance challenges.
  • Example: 
     <h1> style="color: blue; font-size: 24px;">TopFreeCourse.com</h1>

2. Internal CSS

  • Definition: CSS rules written within a <style> tag inside the <head> section of an HTML document.
  • Priority: Internal CSS takes precedence over external styles but is overridden by inline styles.
  • Usage: Suitable for styling a single HTML page where styles are unique and not reused elsewhere.
  • Example: 
      <!DOCTYPE html>
  <html>
    <head>
      <title>Page title</title>
	  <style>
		body {
		  font-family: Arial, sans-serif;
		  background-color: #f9f9f9;
		}
		h1 {
		  color: green;
		}    
	  </style>
    </head>
    <body>
      <h1>Welcome to topfreecourse.com</h1>
      <p>This is a basic CSS Demo.</p>
    </body>
  </html>

3. External CSS

  • Definition: CSS rules stored in a separate .css file linked to the HTML document via the <link> tag.
  • Priority: External styles are overridden by internal and inline CSS if there’s a conflict.
  • Usage: Highly recommended for larger projects as it promotes code reusability, modularity, and ease of maintenance.
  • Example:
    HTML 
      <!DOCTYPE html>
  <html>
    <head>
      <title>Page title</title>	
	<link rel="stylesheet" href="styles.css">	
    </head>
    <body>
      <h1>Welcome to topfreecourse.com</h1>
      <p>This is a basic CSS Demo.</p>
    </body>
  </html>
    styles.css 
        body {
    font-family: 'Verdana', sans-serif;
    background-color: #e0e0e0;
    }
    h1 {
      color: red;
    }

Summary of Priorities

The order of priority when multiple styles conflict is:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Best Practices:

  • Use external CSS for large projects for maintainability and scalability.
  • Use internal CSS sparingly for page-specific styles.
  • Avoid excessive use of inline CSS to maintain clean and organized code.
Previous Next