How to use Inline CSS – Adding Beautiful Web Elements (original) (raw)

When it comes to changing how your website looks, inline CSS can be a real lifesaver when used properly.

In this HTML & CSS tutorial, we’re going to quickly show you how you can use inline CSS to quickly apply your styles from your main webpage. We’ll also help you understand when to use HTML inline styling – since it isn’t the best choice in many situations.

If you’re ready to add a new tool to your web development kit, let’s jump in!

Table of contents

• A Quick Overview of HTML & CSS
• Applying CSS Styles: An Overview
  • Inline CSS: HTML Style Attribute
  • Internal CSS: HTML

    My Super Simple Website

    **Notice that our web page looks the same. The key difference, other than the

    My Super Simple Website

    ******

    **Notice that with the inclusion of our Internal Stylesheet after the reference to the External Stylesheet has altered our design completely but still does not resemble the style we want.

    **Keeping both the Internal and External Stylesheets as is, let’s now add Inline CSS to the

    header tag providing the exact design styles we want to this HTML element. Again, those styles are: font-style of italic, a color of blue and text aligned to the center on the page.

    **h1 { font-style: none; color: red; text-align: left; }

    ******

    My Super Simple Website

    **Notice that we have applied our Inline CSS to the

    header by setting its style attribute to a string containing three CSS rules separated by semi-colons.

    ******

    **Learning Resources

    **Learn more about including CSS in a web page (Inline, Internal and External) from CSS expert Kevin Powell in these two video lessons Introduction to CSS and External CSS.

    **Continue your CSS learning with this free HTML & CSS 101 – Web Development Fundamentals course or take your skills to the next level in just over an hour with this free COMPLETE COURSE – Learn HTML and CSS in 80 MINUTES. You might also consider trying this HTML Tutorial for Beginners from Programming with Mosh or decide to master the foundations of all web development with this premium Full-Stack Web Development Mini-Degree.

    **Conclusion

    **By applying proper syntax for Inline CSS to our website’s

    header HTML tag (including applying multiple styles), we were able to test a new design for our website’s

    header tag. We also considered the proper use of Inline CSS and the Order of Precedence in relation to Internal and External CSS Stylesheets, so we were able to target a single HTML element without impacting the CSS styling of any other HTML elements on our website.

    **While there are plenty of cases to not use Inline CSS, it is still a useful tool that can help you out of tough situations as you build your websites. Nevertheless, we do encourage you to learn other CSS skills including how to make an external CSS file, what each CSS property does, how to create a unique style, and so forth. After all, it’s better to use a separate CSS file if the alternative is a messy block of code.

    **We hope you take these newfound skills to the next level, and master the art of CSS so you can get your sites to look exactly how you’d like them too!

    **Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!

    ******