How to Add CSS to HTML: Understanding Inline, Internal & External CSS 

What is inline CSS? Inline CSS can let you put CSS in your html. You can use a style attribute and place it inside the opening tag. The syntax is this: <element style=”CSS property: value”>. It is also known as embedded style sheets. Inline CSS is effective for targeting and with unique style properties.

What is Internal CSS? Internal CSS looks a lot different from Inline CSS. Instead of being placed inside a style attribute, it is placed inside the brackets and it is being defined by a CSS selector. Internal CSS allows you to style groups of elements. Also since it separates the CSS and HTML into different sections, Internal is great for one page websites.

What is External CSS? External CSS is formatted like Internal. It is not wrapped in though. It is placed into a external file with the addition “.css.” You’ll have to add a link to a external style sheet that looks something like <link rel=”stylesheet” type=”text/css” rel=”noopener” target=”_blank” href=”mystyles.css”>. External CSS is considered the best practice. Its also the fastest and most SEO friendly. External CSS makes you html easier to read too. It also helps your website load faster too.

What is the best to use? Its either between inline or external because they are both good. Inline is processed faster and External is easier too use. In my opinion I would probably use External because reading about I seamed interesting and sounds a lot easier and seems it works well.

https://blog.hubspot.com/website/add-css-to-html

Leave a comment

Design a site like this with WordPress.com
Get started