HTML with CSS

HTML and CSS are both important languages for building websites. HTML (Hypertext Markup Language) is used to create the structure and content of web pages, while CSS (Cascading Style Sheets) is used to style and format that content.

Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.

Ways to apply CSS

There are three ways to apply CSS to HTML:

  1. Inline CSS: Inline CSS is added directly to the HTML element using the style attribute. This method applies CSS styles to a single HTML element. For example:
    2. <h1 style="color: red;">This heading will be red</h1>
  2. Internal CSS: Internal CSS is added to the <head> section of an HTML document using the <style> tag. This method applies CSS styles to all elements within the HTML document. For example:
    3. <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>This heading will be red</h1>
  </body>
  3. External CSS: External CSS is stored in a separate .css file and linked to the HTML document using the <link> tag. This method allows for the creation of a centralized style sheet that can be applied to multiple HTML pages. For example:
    4. <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>This heading will be styled using the styles.css file</h1>
  </body>

    And in the styles.css file:

    h1 {
    color: red;
  }

Each of these methods has its own advantages and disadvantages. Inline CSS is quick and easy to use, but can clutter HTML code and make it difficult to manage. Internal CSS is more organized, but can still make HTML code difficult to read and maintain. External CSS provides the most flexibility and maintainability, but requires additional file management and loading time.

Next Article ❯
Next ❯ ❮ Previous