html

What Does CSS Stand for?

When we talk about HTML, we know that HTML is used to create web related applications. To make the HTML content presentable, you must apply suitable CSS on HTML. CSS comprises a vast group of properties that can be applied to an HTML document either Inline, Internal, and External.

Keeping in view the importance of CSS, this post serves the following outcomes:

  • What does CSS stand for?
  • How CSS is applied to an HTML document

What Does CSS Stand for?

CSS stands for Cascading Style Sheet; it is the only stylesheet which makes an HTML page attractive and presentable. CSS itself is useless until it is combined with HTML to create wonderful website and web application designs and layouts. CSS is basically designed by W3C in 1996 as the solution of overcoming the expensive process of adding fonts and colors to the HTML page.

How CSS is Applied to an HTML Document

CSS can be applied on the HTML document either internally, inline, or externally. Therefore, the CSS can be divided into three types: Inline CSS, Internal CSS, and External CSS. Here, we have explicitly demonstrated all these categories.

Inline CSS
CSS is said to be inline when we use style as an attribute inside the HTML tags. It is helpful only when you need to target one HTML tag.

Here is the example code where the inline CSS is applied.

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Document</title>
    </head>
    <body>
        <h1>Inline CSS</h1>
        <p style="font-size: 23px; color: coral;">
            This paragraph is written to showcase the use of inline css in the HTML page.
        </p>
    </body>
</html>

In the above code, we use inline CSS to change the font size and color of the <p> tag.

Output

The output clearly shows that the font size and font color is changed by using inline CSS.

Internal CSS
CSS is said to be internal when we use style tags in the head section of the HTML page to specify or change the format and layout of the various HTML tags. Internal CSS is used when we need to create a class or to target multiple HTML tags at once but on a small scale. Let’s see the practical example of internal CSS.

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Document</title>
        <style>
            p{
                font-size: 23px;
                color:darkgoldenrod;
            }
            h1{
                color: cornflowerblue;
            }
        </style>
    </head>
    <body>
        <h1>Inline CSS</h1>
        <p>
            This paragraph is written to showcase the use of inline css in the HTML page.
        </p>
    </body>
</html>

In this code, we have used the <style> tag inside the head section of the document. The <style> tag targets the <p> and <h1> tags of the HTML document. These CSS properties will be applied on all the <p> and <h1> tags across the document.

Output

The output shows that the internal CSS successfully changes the font size and color according to our requirements.

External CSS
CSS is said to be external when it is written in a separate file without using style tag. The file is saved with the “.css” extension. The “.css” file is linked with HTML code by using the HTML <link> tag. Let’s see the practical example of external CSS.

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>External CSS</h1>
        <p>
            This paragraph is written to showcase the use of external css in the HTML page.
        </p>
    </body>
</html>

In this code, we insert external CSS files in HTML code with the help of <link> tag to change the font size color, and the position of the content of <p> tag and <h1> tag.

Output

That’s how you can integrate an external CSS file to your HTML document.

Conclusion

CSS stands for Cascading Style Sheet. It is used to make the HTML page content expressive and presentable by creating wonderful designs and layouts. This post primarily aimed at what CSS stands for. Apart from this, you have also learned how Inline, Internal, and External CSS can be applied on HTML documents.

About the author

Adnan Shabbir