Introduction
When it comes to styling web pages, there are three main ways to do it: inline, internal, and external. CSS (cascading style sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.
In this CSS tutorial, we will learn about the three main ways to apply CSS to HTML: inline, internal, and external. Each has its own advantages and disadvantages. By the end of this tutorial, you will know when it is appropriate to use each method.
Inline CSS
Inline CSS is used to apply style rules directly to an HTML element. To use inline CSS, add the style attribute to the relevant element. The style attribute can contain any CSS property (e.g., color, font-size, etc.).
Here’s an example:
This is a paragraph.
The above code will make the text inside the
element red. Inline CSS is useful for applying small changes to an HTML element.
However, inline CSS has some disadvantages:
It makes the HTML code harder to read
It can be overridden by internal or external CSS rules
It can not be reused
It pollutes the HTML with presentational code
Internal CSS
Internal CSS is used to define style rules for a single HTML page. Internal CSS rules are placed in the
section of an HTML document, between theThe above code will make all of the text inside
elements red on the page where it is used. Internal CSS is useful for small websites or when you only need to apply styles to a single page. However, internal styles have some disadvantages compared to external stylesheets: Internal styles are not reusable They have to be copied into every page where they are used They make pages harder to maintain because you have to update them in multiple places If you want to make global changes (e.g., change the color of all links on your website from blue to green), you have to update each page individuallyExternalCSSExternal CSS is used when you want to apply styles across multiple HTML documents. External stylesheets are stored in separate files with a .css extension and are linked from within HTML documents using the tag (which goes inside the document's
section). Here's an example: In this example, we are linking an external stylesheet called "styles.css" from within our HTML document. When a browser loads a webpage, it will also load any external stylesheets that are linked from that page (if they exist). This means that you can create one central stylesheet that can be applied across multiple pages on your website— making global changes is as simple as updating your central stylesheet file! ExternalCSS Advantages Disadvantages Reusable— easy Separate files can beto maintainto manage and keep track of Global changes easymake changes in one place Can be cached by browsers multiple files means longer loading time for users Scales well for large websites File management can beharder as project growsWhat's Next?Now that we've learned about inline, internal, and external Stylesheets in thisCSS tutorial, try out these methods yourself with some practice exercises!
