CSS stands for "Cascading Style Sheet," and as the name indicates, CSS is used to style HTML content in order to beautify or decorate it. The website should be designed keeping in mind the users and should ensure that it provides a good user experience. CSS helps web developers style the website so that the users can have a great user experience. It's basically used to create good-looking websites by describing how the HTML elements are displayed on the screen. It also controls the layout of the website.
CSS includes colors, backgrounds, fonts, spacing, animations, etc. It works on all devices: desktop, tablet, mobile, etc.
CSS is lightweight and relatively easy to learn.
Different ways to bring CSS to a HTML file
A] Inline CSS: Inline CSS is used in HTML tags by using <style>. By using this approach, CSS can be applied to a single element. You can quickly and easily insert CSS rules into an HTML page, which is useful for testing or previewing changes and performing quick fixes on your website.
here you can see <style> is applied inside <h1> tag. With the help of the "background-color" property background color is set to black & "color" to set the text color of azure.
the final output is :
Some disadvantages of inline CSS :
1] These styles can't be applied elsewhere.
2] Because they are not saved in a single location, these styles are difficult to update.
3] Pseudo-codes and pseudo-classes cannot be styled with inline CSS.
B] Internal CSS: Internal CSS is used inside <head> section. By using this approach, we can target classes, ids, and different selectors of HTML. Best used for a single page as no external file is needed.
here you can see <style> is applied inside <head> tag. With the help of the "background-color" property background color is set to black & "color" to set the text color of bisque.
final output is :
Some disadvantages of internal CSS :
1] They are useful for only the page they are specified on.
2] Internal style sheets increase page load times.
C] External CSS: External CSS is applied with the help of an external file having extension .css and which is linked to the HTML page by using <link> tag. When you need to make changes to several pages, you often use the external style sheet. we can target classes, ids, and different selectors of HTML.
here first we linked our "style.css" file using <link> tag then With the help of the "background-color" property background color is set to black & "color" to set the text color of aliceblue.
The final output is :
Some disadvantages of external CSS :
1] Extra download is needed to import documents having style information.
2] To render the document, the external style sheet should be loaded.
3] Not practical for small style definitions.
As we saw In CSS, we have three different ways to bring CSS into HTML, each of which has some specificity.
Inline CSS > Internal CSS > External CSS
Inline takes precedence over all other styles. Any styles defined in the internal and external style sheets are overridden by inline styles.
Then there's internal CSS, which comes in second place, and external CSS, which has the least specificity.
Conclusion :
We have studied everything required to Link CSS and the precedence between them. Commenting on anything you feel I might be missing would be very helpful to me. Don't forget to click "like" and "comment" if you found it useful.
Thank You & Happy Learning!!!