How to use CSS?-CodePudding

I don't want to link a separate CSS stylesheet. Is there a way to have CSS and HTML in one file?

I am a beginner developer and I just started web dev. I want to have everything in one file so I can transfer it easily without having multiple files.

CodePudding user response：

Yes, there is!

In HTML, there is a tag, which you can put your CSS code into. This is known as internal CSS because it is in the HTML file itself. The tag goes in the tag. So any CSS you have from, you can directly paste in into the style tag and it will render it. For example:

<head>
  <style>
    p {
     color:red;
  }

  </style>
</head>

Another option is to style every tag separately. I would recommend doing this for EVERY SINGLE tag, but when you only have to style one thing, this is really useful. Basically, you can do this by taking any tag and adding a style="" into it. For example, lets style a p tag. It would look something like this:<p style="font-size:sans-serif; ">. And you can add any styling in the quotations.

I, personally like to have my CSS in one file because, it helps with easy transfer of files and you can easily look back change the CSS, which looking at your HTML.

CodePudding user response：

you can use internal css and inline css

Internal CSS

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: powderblue;
    }
    
    h1 {
      color: blue;
    }
    
    p {
      color: red;
    }
  </style>
</head>

<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>

</html>

Inline CSS

An inline CSS uses the style attribute of an HTML element.

<h1 style="color:blue;">A Blue Heading</h1>