Eternal, internal and inline ways of styling in css
Understanding the Three Main Ways of Styling in CSS: External, Internal, and Inline
Welcome to this quick and clear CSS tutorial where we explain the three different ways to apply styles to your HTML: External, Internal, and Inline CSS. Whether you’re just starting your journey into web design or need a refresher, this video will help you understand when and how to use each method effectively.
CSS, or Cascading Style Sheets, allows you to change the appearance of HTML elements — colors, fonts, layout, spacing, and more. But before diving into complex styles, it’s important to understand how styles can be added to a web page.
1. Inline CSS – Quick and Direct
Inline CSS means adding the style directly inside an HTML element using the style attribute. This is the fastest way to apply a one-time style to a single element.
For example, changing the color of a single word or making a button stand out quickly.
Pros
Very fast and easy for small changes
Does not require any external files
Useful for testing or temporary styling
Cons
Not reusable
Makes the HTML messy and harder to maintain
Harder to manage on larger projects
Use inline styling sparingly — it’s great for quick fixes but not ideal for clean or scalable code.
2. Internal CSS – Styling Within the HTML File
Internal CSS is written inside a style section in the head part of the HTML document. This allows you to style multiple elements in one place without needing an external file.
Pros
Keeps styling in one place for a single page
Easier to manage than inline styles
Useful for smaller projects or single-page documents
Cons
Styles are not reusable across multiple pages
Adds weight to the HTML file
Can be hard to maintain as your styles grow
Internal CSS is a great option for learning or small personal projects.
3. External CSS – Best Practice for Most Projects
External CSS is when your styles are placed in a separate file, usually with a dot css extension. This file is then linked to your HTML.
Pros
Keeps your HTML clean and focused on structure
Styles can be reused across multiple pages
Easier to manage, update, and scale your code
Ideal for teamwork and large-scale projects
Cons
Requires an extra file to be loaded
Can cause issues if the file is not linked correctly
External CSS is the preferred method for professional development and is the most powerful way to manage site-wide design.
Which One Should You Use?
Use inline styles only for testing or very small tweaks
Use internal styles for small projects or when building quick prototypes
Use external styles for all serious, reusable, and scalable web projects
Thanks for Watching!
If this video helped clarify the three CSS styling methods, don’t forget to like and subscribe. Check the description for more CSS examples, downloadable practice files, and beginner tips.
Drop a comment with your questions, and we’ll be happy to help you learn even faster.
Happy coding!