A center for Research, Education, Agile Coding, Collaboration, Training and Development [REACT-Dev]

Ways to Use CSS in HTML

CSS in HTML

A language for styling and formatting web pages is CSS (Cascading Style Sheets). This is one of the languages though as there are others. It allows you to define the look and feel of your web pages, including colors, fonts, layout, and more.

The video below tells more:

There are three ways to include CSS in your HTML project:

  1. Inline CSS: You can use the “style” attribute to include CSS directly in an HTML element. For example, to set the font color of a paragraph to red, you can use the following code:
    <p style="color:red;">This is a red paragraph.</p>

    Inline CSS is useful for making quick changes to a single element, but it can be time-consuming if you want to apply the same style to multiple elements.

  2. Internal CSS: You can include CSS in the “head” section of your HTML file using the “style” tag. This method allows you to apply CSS styles to multiple elements on the same page. For example:
    <head>
    <style>
    p {
    color: red;
    }
    </style>
    </head>
    <body>
    <p>This is a red paragraph.</p>
    </body>
  3. External CSS: You can create a separate CSS file and link to it in your HTML file using the “link” tag. This method allows you to apply the same styles to multiple pages on your website. For example:

    In the head section of your HTML file:

    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    In a separate CSS file called “style.css”:

    p {
    color: red;
    }

    This method separates the content from the presentation and makes your code more organized and easier to maintain.

Choose the method that suits your project and coding style.

2 Comments
  1. Naomi says

    Wow, awesome weblog layout! How lengthy have you ever been running a blog for?
    you make running a blog glance easy. The entire glance of your site is fantastic, let
    alone the content! You can see similar here e-commerce

  2. Rosie says

    Wow, amazing blog structure! How lengthy have you ever been running
    a blog for? you make running a blog look easy. The
    total look of your website is magnificent, as well as the content!
    You can see similar here ecommerce

Leave A Reply

Your email address will not be published.