Cascading Style Sheets, commonly known as CSS, provide a means for web developers to style web pages as per their choice. Simple HTML pages without any styling format defined in CSS would appear very ugly and boring to the end users. Hence CSS is a critical component in modern websites to give them a beautiful, attractive, and appealing look. Traditionally, CSS was only responsible for controlling the look and feel of the website. Still, continuous upgrades and new CSS allows web developers and designers to control the website’s responsiveness for the web pages to have a distinguished UI for laptop, tablet, and mobile screens.
Since CSS is necessary for every website, it must be flexible and easy to define per the designer’s requirements. Also, since it can be very granular, CSS definitions must be re-usable for the same styling formats to be applied to several components together. Fortunately, CSS’s capabilities do meet these requirements.
You can add CSS to a web page using either one or all of the following options. Now, let’s explore these three methods in detail.
With inline CSS, HTML designers can define styling information within the HTML element’s tag using the “style” attribute. It does possess several pros and cons, which will discuss with several examples shortly. Inline CSS is the most basic method for applying CSS. This method allows us to style just one HTML element at a time. It does not provide any styling re-usability. The style information is defined in the HTML element’s opening tag and is supplied as a value to the “style” attribute.
In the below example, we are changing the font color of h1, h6, and p elements using Inline CSS.
Code:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">I am a Blue H1 heading</h1> <h1 style="color:blue;">I am a Blue H6 heading</h1> <p style="color:blue;">I am a Blue Paragraph</p> </body> </html>
Output:
In the above example, we only wanted to change the font color of the H1, H6, and P tags to blue. Despite wanting to apply the same styling information, we could not re-use it and had to define it three times individually for each element. Because of its lack of reusability and increased time consumption, web designers do not prefer using Inline CSS when styling a website with multiple pages. Also, making a mobile responsive website would be almost impossible with Inline styling definitions.
In Internal CSS, HTML designers can define styling information within the tags in the
section of the HTML page with the help of class and id references. We will explore Internal CSS in-depth in the next section of this tutorial. As discussed before, internal CSS is defined in the same HTML file as the HTML code on which it is applied. The HTML code is in the body, whereas the CSS is in the
