How To Add CSS | CSS Inserting into Html – codewithrandom







How To Add CSS | CSS Inserting into Html – codewithrandom

CSS Inserting

There are three simple ways to insert CSS into an HTML document.

  • Internal Style Sheet
  • External Style Sheet
  • Inline Styling

Internal Style Sheet

An internal style sheet is useful when a single HTML document has its unique styles.

With this, CSS rulesets/rules should be included in the <style> element.

The <style> element should only be enclosed inside the <head> element.

For following best practices, we can use the type attribute to define the MIME type of the <style> tag.

The text/css value indicates that the content is CSS.

Example:

 <!DOCTYPE html>  
<html>
<head>
<title> Internal Style Sheet </title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p> Lorem ipsum dolor sit amet. </p>
</body>
</html>

External Style Sheet

An external style sheet can be very useful when multiple HTML pages have the same styles.

This can be achieved by having an external style sheet file.

An external style sheet file must be saved with a .css extension e.g. filename.css.

Then we need to use the <link> element to include the file in our HTML page.

There should be no <style> element inside a CSS file!

Example:

The style.css file contains the following codes.

 body {  
background-color: brown;
}
p {
color: white;
}

Now that we have our external style sheet file. The next step is to include it in our HTML page.

We can simply do it by defining its file path using the <link> element with its href attribute.

 <!DOCTYPE html>  
<html>
<head>
<title> External Style Sheet </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p> Hello World</p>
</body>
</html>

In the example shown above, the style.css file and the HTML file are saved in the app’s directory.

You can try it in your storage as well. Just follow these steps.

  1. Create a folder in your root directory.
  2. Save the HTML file in that folder.
  3. Save the style.css file in that folder.
  4. Run/Open the HTML file using any browser.

Inline Styling

Inline styling is useful for styling a single element.

It is done by using the style attribute.

Its value contains CSS declarations.

 <p style="font-size: 50px; color: blue;"> CodeWithRandom</p>  


Guys hope you like this article and learn how to add css in html. Also if you are a beginner so check out the project on our website we published 100+ frontend projects for practice and learning new things that we use in project.

Check out more…..




Share on:

Leave a Comment