Inline, External and Internal CSS

inline, internal and external css

CSS, Cascading style sheet use to give style to raw HTML. CSS Plays the most important role in front end and in this part we will cover the basics of Inline, External and Internal CSS, Inline CSS, external CSS, internal CSS basic difference and concept. learn CSS for front end web development for free



Inline CSS

The inline CSS approach allows us to apply CSS to a single element.

Inline CSS is another way to include style sheets in an HTML document. This strategy negates some of the benefits of style sheets, therefore it’s best to use it sparingly.

You should utilise the style attribute on the relevant tag if you wish to apply inline CSS.

<h3 style=" text-align: center;
 background-color: black;
  color: orange;
  border: 5px solid orange;
  margin: 20px;
  padding: 35px;"> Hello World </h3>

Hello World

Above is an example of inline css. which helps in customizing each part independently

drawbacks of Inline CSS.

  • Inline CSS does not support quotations. The browser will view quotations as the end of your style value if you use them.
  • These styles are unique and can’t be utilised anyplace else.
  • Because these styles are not saved in a single location, editing them is difficult.
  • Inline CSS cannot be used to style pseudo-codes and pseudo-classes.
  • Inline CSS does not benefit the browser cache.

Internal CSS

The internal style sheet is used to provide a single document its own style.

It’s defined in the HTML page’s <head> section, inside the <style> tag.

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
        <style>
            .main {
                text-align:center; 
                background-color: lightgrey;               
            }
            .name1 {
                color:orange;
                font-size:40px;
                font-weight:bold;
            }
            .name2 {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="name1">Internal CSS Example</div>
              
            <div class ="name2">
                Learn with TechInfoHelp.com
            </div>
        </div>
    </body>
</html>  
Internal CSS Example
Internal CSS Example
Learn with TechInfoHelp.com

Here is the beautiful example of internal css. name1 and name2 is the id of the block.

External CSS

When you wish to make modifications to numerous pages, you should use the external style sheet. It’s great for this situation because it allows you to modify the look of the complete website with only one file modification.

On all pages, the <link> tag is used, and the <link> tag should be placed within the head section.

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

Any text editor can be used to create the external style sheet, but it must be saved with the .css extension. HTML components should not be present in this file.

Let us clear a big confusion that you may counter.

Think what happen when I have assigned an internal css in head tag and also for the same id I assign an inline css. So what would be the preferences ?

<!DOCTYPE html>
<html>
    <head>
        <style>   <!--Internal CSS-->
            .name0 {
                color:orange;
                font-size:40px;
                font-weight:bold;
            }
        </style>
    </head>
    <body>     <!--Inline CSS-->
        <div>
            <div class ="name0"
                style ="color:blue;
                font-size:50px;
              " >Hello World</div>
        </div>
    </body>
</html>  
Hello World

So here you can see it will give priority to those style which is modified.

So It is all about the basic concept of inline, internal and external CSS.



Leave a Comment

Your email address will not be published.

Tech Info