Differences between the 3 types of CSS styles: Inner, Outer and Inline

The main difference between inline CSS and external CSS is that inline CSS renders faster as it only requires the browser to download one file, while using external CSS will require you to download separate HTML and CSS files.

In this tutorial, you’ll learn the difference between the three types of CSS styles: inline, outer, and inner. We will also look at the advantages and disadvantages of using each method.

What is CSS exactly?

Cascading Style Sheets is a markup language that takes care of the appearance of web pages. Control the colors, fonts, and layout of your website elements.

This style sheet language also allows you to add effects or animations. You can use it to display some CSS animations like button click effects, loaders, and animated backgrounds.

Without CSS, your website will look like a simple . This is what it would look like if we disabled its CSS:

Difference between CSS Inline, Outer and Inner styles

There are three types of CSS styles: inner, outer, and inline. Let’s break them down.

Internal CSS

Internal or embedded CSS requires you to add the tag

Your HTML file will look like this:




Tutorials

This is a paragraph


Advantages of Internal CSS:

Disadvantages of Internal CSS:

  • Adding the code to the HTML document can increase page size and load time.

External CSS

With external CSS, you will link your web pages to an external .css file, which can be created with any text editor on your device (for example, ).

This type of CSS is a more efficient method, especially for styling a large website. When editing a file .cssyou can change your entire site in one go.

Follow these steps to use external CSS:

  1. Create a new file .css with the text editor and add the style rules. For example: .xleftcol {
    float: left;
    width: 33%;
    background:#809900;
    }

    .xmiddlecol {
    float: left;
    width: 34%;
    background:#eff2df;
    }

  2. In the section of your HTML document, add a reference to your file .css external just after the tag </strong>: <link rel="stylesheet" type="text/css" href="https:///tutorials/style.css" /> </li> </ol> <p>don't forget to change <strong>style.css</strong> by the name of your file <strong>.css</strong>.</p> <h4>Advantages of External CSS:</h4> <ul> <li>Since the CSS code is in a separate document, your HTML files will have a cleaner structure and smaller size.</li> <li>You can use the same file <strong>.css</strong> for multiple pages.</li> </ul> <h4>Disadvantages of External CSS:</h4> <ul> <li>Your pages may not display correctly until the external CSS is loaded.</li> <li>Uploading or linking multiple CSS files can increase your site's load time.</li> </ul> <h3><span class="ez-toc-section" id="CSS_Inline"></span>css-inline<span class="ez-toc-section-end"></span></h3> <p>CSS inline is used to style a specific HTML element. For this type of CSS style, you will only have to add the attribute <strong>style</strong> to each HTML tag, without using selectors.</p> <p>This type of CSS is not really recommended, as each HTML tag must be styled individually. Managing your website can be too difficult if you only use inline CSS.</p> <p>However, CSS inlining in HTML can be useful in some situations. For example, in cases where you don't have access to CSS files or you need to style a single element.</p> <p>Let's see an example. Here we add a CSS inline to the tag <strong></p> <p></strong> Y <strong></p> <h1></strong>:</p> <p><!DOCTYPEhtml><br /><html><br /><body style="background-color:black;"></p> <p><h1 style="color:white;padding:30px;"> Tutorials</h1> <p></p> <p style="color:white;">This is a paragraph.</p> </p> <p></body><br /></html></p> <h4>Advantages of CSS Inline:</h4> <ul> <li>You can easily and quickly insert CSS rules into an HTML page. Therefore, this method is useful for testing or previewing changes and making quick fixes to your website.</li> <li>There is no need to create and upload a separate document like in external CSS.</li> </ul> <h4>Disadvantages of CSS Inline:</h4> <ul> <li>Adding CSS rules to each HTML element is time consuming and clutters the HTML structure.</li> <li>Styling multiple elements can affect page size and load time.</li> </ul> <h2>conclusion</h2> <p>In this tutorial, you've learned the difference between the three types of CSS styles: inner, outer, and inline. Let's see the summary:</p> <ul> <li><strong>internal or embedded</strong> – add the tag <strong><br /> <style></strong> in the section <strong><head></strong> of the HTML document.</li> <li><strong>External</strong> – link the HTML sheet to a file <strong>.css</strong> separate.</li> <li><strong>line</strong> – apply CSS rules to specific elements.</li> </ul> <p>So what CSS style are you going to use? Share it with us in the comments section below.</p> <p class="text-center text-sm-left"> <p>Betania is a copywriter with a passion for digital marketing and website creation. She writes tutorials and performs SEO analysis on 's Content team. In her free time, she enjoys dancing, singing or watching a good classic movie. </p> <script type="text/javascript"> jQuery(document).ready(function($) { $.post('https://wingdingstranslator.com/wp-admin/admin-ajax.php', {action: 'mts_view_count', id: '6034'}); }); </script><div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'> <!-- YARPP List --> <h3>Related posts:</h3><ol> <li><a href="https://wingdingstranslator.com/35-best-ways-to-earn-money-online-in-2022/" rel="bookmark" title="35 best ways to earn money online in 2022">35 best ways to earn money online in 2022</a></li> <li><a href="https://wingdingstranslator.com/how-to-design-a-website-in-10-steps/" rel="bookmark" title="How to design a website in 10 steps">How to design a website in 10 steps</a></li> <li><a href="https://wingdingstranslator.com/top-5-wordpress-translation-plugins/" rel="bookmark" title="Top 5 WordPress Translation Plugins">Top 5 WordPress Translation Plugins</a></li> <li><a href="https://wingdingstranslator.com/how-to-fix-504-gateway-timeout-error-in-wordpress/" rel="bookmark" title="How to fix 504 gateway timeout error in WordPress">How to fix 504 gateway timeout error in WordPress</a></li> </ol> </div> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://wingdingstranslator.com/hosting-with-cyberpanel-fast-and-reliable-control-panel/" target="_blank" rel="dofollow" class="u16f5f3fb092d3bc19477343d54db03be"><style> .u16f5f3fb092d3bc19477343d54db03be { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u16f5f3fb092d3bc19477343d54db03be:active, .u16f5f3fb092d3bc19477343d54db03be:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u16f5f3fb092d3bc19477343d54db03be { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u16f5f3fb092d3bc19477343d54db03be .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u16f5f3fb092d3bc19477343d54db03be .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u16f5f3fb092d3bc19477343d54db03be:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">Hosting With CyberPanel - Fast And Reliable Control Panel</span></div></a></div> </div> <div class="bottomad"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Wingdings Responsive --> <ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-3409351815974819" data-ad-slot="8550056482" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <!-- Start Share Buttons --> <div class="shareit floating"> <!-- Facebook Share--> <span class="share-item facebooksharebtn"> <div class="fb-share-button" data-layout="button_count"></div> </span> <!-- Facebook --> <span class="share-item facebookbtn"> <div id="fb-root"></div> <div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div> </span> <!-- Twitter --> <span class="share-item twitterbtn"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="">Tweet</a> </span> <!-- GPlus --> <span class="share-item gplusbtn"> <g:plusone size="medium"></g:plusone> </span> <!-- Pinterest --> <span class="share-item pinbtn"> <a href="http://pinterest.com/pin/create/button/?url=https://wingdingstranslator.com/differences-between-the-3-types-of-css-styles-inner-outer-and-inline/&media=&description=Differences between the 3 types of CSS styles: Inner, Outer and Inline" class="pin-it-button" count-layout="horizontal">Pin It</a> </span> </div> <!-- end Share Buttons --> </div><!--.post-single-content--> </div><!--.single_post--> <!-- Start Related Posts --> <div class="related-posts"><h4>Related Posts</h4><div class="clear"> <article class="latestPost excerpt "> <header> <h2 class="title front-view-title"><a href="https://wingdingstranslator.com/org-domain-buy-and-register-org-domains-now/" title=".org Domain – Buy And Register .org Domains Now!">.org Domain – Buy And Register .org Domains Now!</a></h2> </header> </article><!--.post.excerpt--> <article class="latestPost excerpt "> <header> <h2 class="title front-view-title"><a href="https://wingdingstranslator.com/basic-git-commands-complete-guide/" title="Basic GIT Commands – Complete Guide">Basic GIT Commands – Complete Guide</a></h2> </header> </article><!--.post.excerpt--> <article class="latestPost excerpt last"> <header> <h2 class="title front-view-title"><a href="https://wingdingstranslator.com/cron-job-a-complete-guide-for-beginners-2022/" title="Cron Job: A Complete Guide For Beginners 2022">Cron Job: A Complete Guide For Beginners 2022</a></h2> </header> </article><!--.post.excerpt--> </div></div> <!-- .related-posts --> </div><!--.g post--> <!-- *******************************************************************************************************************--> <!-- Comments Evolved for Wordpress v1.6.3 ( http://wordpress.org/plugins/gplus-comments/ ) --> <!-- *******************************************************************************************************************--> <!-- comments-evolved-tabs --> <script type="text/javascript"> jQuery(document).ready(function($) { window.comment_tab_width = $('#comments-evolved-tabs').innerWidth(); }); </script> <div id="comments-evolved-tabs"> <a name="comments"></a> <ul class="controls inline clearfix"> <li class="active" id='comments-evolved-facebook-control'><a href='#comments-evolved-facebook-tab'><img id='comments-evolved-facebook-icon' src='https://wingdingstranslator.com/wp-content/plugins/gplus-comments/assets/images/icons/default/facebook.png'><span id='comments-evolved-facebook-label'>Facebook Comments</span></a></li> <li id='comments-evolved-disqus-control'><a href='#comments-evolved-disqus-tab'><img id='comments-evolved-disqus-icon' src='https://wingdingstranslator.com/wp-content/plugins/gplus-comments/assets/images/icons/default/disqus.png'><span id='comments-evolved-disqus-label'>Disqus</span></a></li> </ul> <!-- comments-evolved-facebook-tab --> <div id='comments-evolved-facebook-tab' class='comments-evolved-embed-container content-tab clearfix'> <div id="fb-root"></div> <div id="fb-comments">Loading Facebook Comments ...</div> <script type="text/javascript"> jQuery(document).ready(function($) { $('#fb-comments').html('<div class="fb-comments" data-width="'+window.comment_tab_width+'" data-href="https://wingdingstranslator.com/differences-between-the-3-types-of-css-styles-inner-outer-and-inline/" data-num-posts="20" data-colorscheme="light" data-mobile="auto"></div>'); }); </script> <script async type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1">FB.init();</script> <noscript>Please enable JavaScript to view the <a href="https://www.facebook.com/">comments powered by Facebook.</a></noscript> </div> <!-- // comments-evolved-facebook-tab --> <!-- comments-evolved-disqus-tab --> <div id='comments-evolved-disqus-tab' class='comments-evolved-embed-container content-tab clearfix'> <div class="comments-evolved-embed-container clearfix" id="disqus_thread">Loading Disqus Comments ...</div> <script type="text/javascript"> var disqus_shortname = 'https-wingdingstranslator-com'; (function(d) { var dsq = d.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(dsq); })(document); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> <!-- // comments-evolved-disqus-tab --> </div> <!-- //comments-evolved-tabs --> </div> </article> <aside id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <div id="text-3" class="widget widget_text"> <div class="textwidget"><div class="ad-izq"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Wingdings Responsive --> <ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-3409351815974819" data-ad-slot="8550056482" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div><div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="https://wingdingstranslator.com" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="" placeholder="Search the site" /> <button id="search-image" class="sbutton" type="submit" value="Search">Search </button> </fieldset> </form> </div><div id="dpe_fp_widget-2" class="widget widget_dpe_fp_widget"><h3 class="widget-title">Recent posts</h3> <ul class="dpe-flexible-posts"> <li id="post-55395" class="post-55395 post type-post status-publish format-standard hentry category-app-secrets"> <a href="https://wingdingstranslator.com/pokemon-sleep-the-mobile-game-in-which-you-have-to-sleep/"> <div class="title">Pokémon Sleep, the mobile game in which you have to sleep</div> </a> </li> <li id="post-55394" class="post-55394 post type-post status-publish format-standard hentry category-app-secrets"> <a href="https://wingdingstranslator.com/plans-with-friends/"> <div class="title">Plans with friends |</div> </a> </li> <li id="post-55393" class="post-55393 post type-post status-publish format-standard hentry category-app-secrets"> <a href="https://wingdingstranslator.com/second-hand-applications-to-sell-things-s-blog/"> <div class="title">Second-hand applications to sell things – ‘s Blog</div> </a> </li> </ul><!-- .dpe-flexible-posts --> </div><div id="categories-2" class="widget widget_categories"><h3 class="widget-title">Categories</h3><form action="https://wingdingstranslator.com" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name='cat' id='cat' class='postform'> <option value='-1'>Select Category</option> <option class="level-0" value="123">Advertising</option> <option class="level-0" value="142">App Development</option> <option class="level-0" value="144">App Reviews</option> <option class="level-0" value="156">App Secrets</option> <option class="level-0" value="152">Apple Tech Support</option> <option class="level-0" value="129">Apps</option> <option class="level-0" value="153">Audio Resources</option> <option class="level-0" value="41">Blog</option> <option class="level-0" value="155">Cell Phone Tech</option> <option class="level-0" value="131">Devices</option> <option class="level-0" value="143">Digital assets</option> <option class="level-0" value="117">Digital Marketing</option> <option class="level-0" value="118">Digital Media</option> <option class="level-0" value="28">Downloads</option> <option class="level-0" value="121">Ecommerce</option> <option class="level-0" value="124">Entrepreneurialism</option> <option class="level-0" value="115">Finance</option> <option class="level-0" value="141">Hacker News</option> <option class="level-0" value="147">Handy Web Tools</option> <option class="level-0" value="154">iPhone Experts</option> <option class="level-0" value="148">Login Help</option> <option class="level-0" value="128">Mentoring</option> <option class="level-0" value="132">Mobile applications</option> <option class="level-0" value="151">Mobile Devices</option> <option class="level-0" value="146">Mobile Phones</option> <option class="level-0" value="127">Online Courses</option> <option class="level-0" value="119">Online Marketing</option> <option class="level-0" value="130">Platforms</option> <option class="level-0" value="149">Problem Solved</option> <option class="level-0" value="136">Productivity Tools</option> <option class="level-0" value="135">Resources</option> <option class="level-0" value="137">SEO Mkt</option> <option class="level-0" value="138">Software Tools</option> <option class="level-0" value="145">Tech Assistance</option> <option class="level-0" value="134">Tech Learning</option> <option class="level-0" value="133">Techno Tools</option> <option class="level-0" value="150">Troubleshooting</option> <option class="level-0" value="126">Tutorials</option> <option class="level-0" value="1">Uncategorized</option> <option class="level-0" value="140">VPNs</option> <option class="level-0" value="120">Web Apps</option> <option class="level-0" value="122">Web Projects</option> <option class="level-0" value="125">Webdev</option> <option class="level-0" value="9">Wingdings Alphabet</option> <option class="level-0" value="4">Wingdings Info</option> </select> </form> <script type="text/javascript"> /* <![CDATA[ */ (function() { var dropdown = document.getElementById( "cat" ); function onCatChange() { if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) { dropdown.parentNode.submit(); } } dropdown.onchange = onCatChange; })(); /* ]]> */ </script> </div><div id="text-2" class="widget widget_text"> <div class="textwidget"><div class="ad-izq"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Wingdings Responsive --> <ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-3409351815974819" data-ad-slot="8550056482" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div> </div></aside><!--#sidebar--> </div><!--#page--> <footer id="site-footer" role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <div class="footer-widgets first-footer-widgets widgets-num-3"> <div class="container"> <div class="f-widget f-widget-1"> <div id="block-4" class="widget widget_block"> <h3 class="wp-block-heading">Categories</h3> </div><div id="block-3" class="widget widget_block"> <ul><li><a href="https://wingdingstranslator.com/category/digital-media/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Digital Media</a></li><li><a href="https://wingdingstranslator.com/category/downloads/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Downloads</a></li><li><a href="https://wingdingstranslator.com/category/ecommerce/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Ecommerce</a></li><li><a href="https://wingdingstranslator.com/category/finance/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Finance</a></li><li><a href="https://wingdingstranslator.com/category/online-marketing/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Online Marketing</a></li><li><a href="https://wingdingstranslator.com/category/web-projects/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Web Projects</a></li><li><a href="https://wingdingstranslator.com/category/wingdings-alphabet/?customize_changeset_uuid=6029b746-625b-4e64-8f6c-bcfe28393ac8&customize_autosaved=on&customize_messenger_channel=preview-1">Wingdings Alphabet</a></li></ul> </div> </div> <div class="f-widget f-widget-2"> <div id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">WingdingsTranslator.com</h3><div class="menu-main-menu-container"><ul id="menu-main-menu-2" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-31"><a href="https://wingdingstranslator.com/">Wingdings Translator</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="https://wingdingstranslator.com/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-30"><a href="https://wingdingstranslator.com/what-is-wingdings/">What Is Wingdings?</a></li> </ul></div></div> </div> <div class="f-widget last f-widget-3"> </div> </div> </div><!--.first-footer-widgets--> <div class="copyrights"> <div class="container"> <!--start copyrights--> <div class="row" id="copyright-note"> <span><a href=" https://wingdingstranslator.com/" title=" Wingdings Chart, Wingdings Alphabet and Symbols">Wingdings Translator Online</a> Copyright © 2024.</span> <div class="to-top"> </div> </div> <!--end copyrights--> </div> </div> </footer><!--#site-footer--> </div><!--.main-container--> <link rel='stylesheet' id='comments_evolved_tabs_css-css' href='https://wingdingstranslator.com/wp-content/plugins/gplus-comments/assets/styles/plugin.css' type='text/css' media='all' /> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://wingdingstranslator.com/wp-content/plugins/yet-another-related-posts-plugin/style/related.css' type='text/css' media='all' /> <script type='text/javascript' src='https://wingdingstranslator.com/wp-includes/js/jquery/ui/core.min.js' id='jquery-ui-core-js'></script> <script type='text/javascript' src='https://wingdingstranslator.com/wp-includes/js/jquery/ui/tabs.min.js' id='jquery-ui-tabs-js'></script> <script type='text/javascript' src='https://wingdingstranslator.com/wp-includes/js/comment-reply.min.js' id='comment-reply-js'></script> <!-- Comments Evolved plugin --> <script>jQuery("#comments-evolved-tabs").tabs();</script> <!-- //Comments Evolved plugin --> </body> </html> <!-- Cache served by breeze CACHE - Last modified: Thu, 16 May 2024 03:28:07 GMT --> <!-- plugin=object-cache-pro client=phpredis metric#hits=2938 metric#misses=33 metric#hit-ratio=98.9 metric#bytes=892043 metric#prefetches=0 metric#store-reads=74 metric#store-writes=29 metric#store-hits=182 metric#store-misses=30 metric#sql-queries=33 metric#ms-total=191.48 metric#ms-cache=30.44 metric#ms-cache-avg=0.2985 metric#ms-cache-ratio=15.9 -->