DEV Community

Kathirvel S
Kathirvel S

Posted on

CSS Basics - Inline, Internal, and External CSS Explained

#css #html #webdev

What is CSS?

  • CSS is the language we use to style a Web page.
  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Version of CSS?
CSS is currently with the version 3 CSS3

Rules to write a CSS Syntax:

A CSS rule consists of a selector and a declaration block:

  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
  • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example:
In this example all <p> elements will be center-aligned, with a red text color:

p {
      color: red;
      text-align: center;
    }
Enter fullscreen mode Exit fullscreen mode

How to Add CSS to HTML?
There are three main types of CSS used in web development: Inline CSS, Internal CSS,and External CSS. Each type has its own advantages and disadvantages.

Inline CSS:
Inline CSS is written directly inside an HTML tag using the style attribute.

Example:

<p style="color:red;">Hello World</p>

Advantages of Inline CSS:

  • Easy to use for quick changes
  • Has the highest priority
  • Useful for testing styles
  • No need for a separate CSS file

Disadvantages of Inline CSS:

  • Makes HTML code messy
  • Difficult to maintain
  • Styles cannot be reused
  • Not suitable for large websites

Internal CSS:
Internal CSS is written inside a <style> tag within the <head> section of an HTML page.

Example:

<style>
  p {
    color: green;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Advantages of Internal CSS:

  • Better organized than inline CSS
  • Useful for single-page websites
  • Easy to apply styles to multiple elements on one page
  • No external file required

Disadvantages of Internal CSS:

  • Styles apply to only one page
  • Not reusable across multiple pages
  • Increases page size
  • Not ideal for blogs or large websites

External CSS:

External CSS is written in a separate .css file and linked to HTML.

Example:

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

/* style.css */
p {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

Advantages of External CSS:

  • Clean and organized code
  • Styles can be reused across multiple pages
  • Easy to maintain and update
  • Improves website performance through caching
  • Best choice for blogs and large websites

Disadvantages of External CSS:

  • Requires an additional file
  • Website may appear unstyled if the CSS file fails to load
  • Slightly more setup compared to inline CSS

Top comments (0)