What are the 3 Ways to Style in CSS?
CSS (Cascading Style Sheets) are used to style web pages that contain HTML elements. It controls the background colour, font-size, font-family, colour, and other properties of web page elements.
What Exactly Is CSS?
CSS (Cascading Style Sheets) is a style sheet language that determines how your web pages will appear. It is in charge of your website’s colours, fonts, and layouts.
You can also use this style sheet language to add effects or animations to your website. It can be used to show CSS animations such as click button effects, spinners or loaders, and animated backgrounds.
The Three Types of CSS Styles: Inline, Internal, and External
There are three methods for incorporating CSS into your HTML: inline, internal, and external styles. Let’s better understand them.
Inline CSS
Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element.
In order to use an inline style, add the style attribute to the relevant tag.
The example below shows how to create a paragraph with white text and a gray background:
<p style="color: white; background-color: gray;">
This is an example of inline styling.
</p>Note: This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.
Internal CSS
Internal or embedded CSS requires you to include the <style> tag in your HTML document’s <head> section.
Here’s how you can use internal CSS:
- Locate the opening
<head>tag and put the following code right after it
<style type=“text/css”>- Add CSS rules on a new line. For example, the following code styles all paragraphs:
<html>
<head>
<style>
p {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>- Finally, make sure you add your closing tag after your style rules.
</style>External CSS
You’ll use external CSS to link your web pages to an external .css file, which can be created with any text editor on your device (for example, VS Code).
This CSS method is more efficient, especially when styling a large website. You can change your entire site by editing a single .css file.
This .css file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section.
To use external CSS, follow these steps:
- Create a new .css file e.g. style.css with the text editor, and add the style rules. For example:
#intro {
text-align: center;
background-color: lightblue;
}
.mytext {
font-weight: bold;
color: black;
}- In the
<head>section of your HTML sheet, add a reference to your external .css file right after<title>tag:
<link rel="stylesheet" type="text/css" href="style.css" />Advantages of External CSS:
Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.
- You can use the same .css file for multiple pages.
- With an external stylesheet file, you can change the look of an entire website by changing just one file!
Conclusion
You’ve learned the differences between internal, external, and inline CSS in this tutorial. Here’s a quick recap:
Internal — include the <style> tag in the HTML document’s <head> section.
External — point the HTML sheet to a different .css file.
Inline — apply CSS rules for specific elements.
Further reading
Want to learn more about CSS and how it works, then check out this article How CSS works | MDN
See also
How do you use Cascading Style Sheets (CSS)?
What are CSS Rules and Selectors?
What are the 4 properties in a CSS Box Model?
If you liked this article, then please share. You can also find me on Twitter for more updates.