Adding CSS

By Tony 6.7.2024

Ok, so you've learned about some basic syntax and rules for CSS, but how do you add it to your HTML and actually style your page? There's three ways: external, internal, and inline.

  • External: links your HTML file to a dedicated CSS file for styling.
  • Internal: putting all your CSS in a pair of <style> tags.
  • Inline: styling an element by adding a style attribute to it.

These three ways all style your page and they all use the same syntax, but have different advantages and disadvantages. External CSS is really useful (most popular) when you have a lot of CSS for a lot of elements on your page. You can also use it across multiple HTML pages. Internal CSS is suited for styling a few elements on your page if it isn't very complex. Inline CSS is a fast and easy way to apply style to indivisual elements.

<link rel="stylesheet" href="style.css">

For external styling, add the <link> tag above to the <head> section of your HTML. The rel attribute defines the relationship between the linked file and the current HTML page, and in this case, it's a CSS stylsheet. The href attribute tells the browser where to find the stylesheet to actually link the CSS file with the HTML page.

<style> </style>

For internal styling, add the <style> tags in either the head or the body section of your HTML. Then add your CSS code inside to style the page.

<h1 style="color: red; font-size: 20px;">Heading</h1>

Last but not least, we have inline styling. The CSS in the style attribute only applies to one element, so there's no need for a selector or curly brackets. Simply add a style attribute to the element you want to apply inline styling, then type in the CSS code. Note that this has a higher priority and overrides existing external/internal CSS.

In conclusion, there are 3 ways to add CSS to your HTML. External styling is useful for a large amount of CSS, internal is handy for quick styling, and inline is good for styling elements seperately. Use them to their advantages, and also combine them together to style your website to achieve the design you want.

Back Next