Is It Correct To Style With Style Tags?

Viewed 649

I Mean, I've seen somewhere in w3schools that it's not "correct " to use style tags

and that styles need to be only in CSS

and I ask this because if i send an Email with my page(HTML) so the Style Sheet is not included, so i need style tags, isn't it ?

it's important to me because I'm quite new to this world so I want to practice in the Right Method

3 Answers

There are 3 ways you can include CSS in your HTML file.

  • Inline CSS (styles applied to an html using style attribute on the HTML element)

    <p style="width: 100px;">Hello</p>
    
  • Internal CSS (styles included between style tag in the head section of HTML file)

    <style>
       .container {
          background: red;
       }
    </style>
    
  • External CSS (styles written in separate CSS file and then this CSS file is linked to HTML file using link tag)

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

Recommended Way:

External CSS is the recommended way to include CSS in HTML file because it not only separates CSS styles from HTML markup but also allows you to share styles across multiple HTML files by linking same CSS file to more than one HTML file.

HTML Emails:

As far as as HTML Email templates are concerned, there are lots of things to that you need to be aware of to make sure your email template is rendered as consistently as possible across different email clients. Some of them are:

  • External CSS file is not supported by many email clients, so don't use it with email template.

  • Internal CSS has much better support but still not the best way.

  • Inline CSS is better supported than both External and Internal CSS.

  • Tables are still the best way to achieve consistent results across email clients

For details on what you can and can't do when writing CSS in HTML emails, see:

You are currect that emails cannot use external stylesheets nor can it have javascript and cannot use the new css technologies like flex.

The best practice in emails is to design the layouts with tables instead of flex and it's better to use inline styling (not even a style element) since it can get cut out when rendering by some email clients.

Generally it is ok but in the emails, you can't use external styling, so you ought to go with inline styling

Related