What can be done with style sheets that can not be accomplished with regular HTML ?

Last Updated : 18 Jan, 2022

A Style Sheet is a file that contains a piece of code that is used to give styling to our web page. It is used to change various properties of a page like a page size, margins, fonts, font-size, etc. which is not possible by using just Regular HTML. In Web Development, Designing and structuring of web pages are done using HTML (defining the content of elements like headlines and paragraphs, and allowing to add of images, video, and other media on our web page), and the decoration part is done using Cascading Style Sheets(CSS). CSS is a well-known form of Styles Sheets that are used to style Web Pages. CSS is used to style our web pages by making them interact with the HTML elements.

Why we Need CSS?

It’s possible to make a whole web page using only HTML which will be rendered by all the web browsers but it will not be visually appealing at all. But at the same time, we can not use CSS without an HTML document as well so, one completes the other. HTML defines the structure of our page and helps in Data Insertion. Without CSS, a web page would be just a normal white page with plain text. CSS helps in giving a better look to our web page elements without bringing any change to their functionality.

What can be accomplished using CSS?

With the help of Style Sheets, we can change various properties like margin, padding, border, etc. of any element of our web page. We can make our website more appealing by looks using Style Sheets.
We can control and change the values of spacing, border & margin of most of the HTML elements with the help of Style Sheets. Any Element can have its own background color or an image as a background instead of just the <body> element.
Wide Variety of Animations and Transitions like hover effects, Animation delays, Transition duration, etc. can be applied to almost every element with the help of CSS without making use of JavaScript or Flash.
Borders can be applied to any element HTML Element instead of just to tables. CSS offers a wider range of possibilities as compared to what the existing HTML browser extensions have to offer. We can also make custom buttons for our HTML forms with the help of CSS.

In conclusion, it’s safe to say that HTML is bones, veins, blood giving structure to the body whereas CSS act as Nails, Hair, Skin and hence helps in defining the external look of the body.

With the help of Style Sheets we can use and alter the values of the following attributes:

Color(background, text).
Font Style/Font Size.
Decoration (bold, underline).
Animations/Transitions.
Content Justification(margining, padding, border).

The main focus of this article is to give a quick look at what can be accomplished using CSS and the reader is requested to follow up with the provided text embedded links to learn more about each concept in detail.

Color: With the help of style sheets we can give color to any HTML element and also to the text inside of it & give it a unique background color as well. Images can also be used as a background for almost all the elements.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>GFG</title>
</head>
<body>
    <p style="color: rgb(4, 194, 4);">
        GeeksforGeeks
    </p>
 
</body>
</html>

Output:

Font Styling: Font can be changed with the help of properties like “font-family”, “font-style”, etc. that are offered by CSS. It offers a variety of different fonts and styles like Times New Roman, Times, serif, cursive, bold, italic, etc.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
</head>
 
<body>
    <p style="color: rgb(4, 194, 4); 
        font-family:fantasy; font-size: 25px;">
        GeeksforGeeks
    </p>
 
 
    <p style="font-style: italic; font-weight: bold;">
        Best Platform for Learners.
    </p>
 
</body>
 
</html>

Output:

Text Decoration: This property is used to add or remove different variety of line decorations from our simple HTML texts. In the example below decoration is applied on the content of underline <u> tag using and given it a wavy look with color red.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
 
    <style>
        u {
            text-decoration-style: wavy;
            text-decoration-color: red;
        }
    </style>
</head>
 
<body>
    <p style="color: rgb(4, 194, 4); 
              font-family:fantasy;
              font-size: 25px; 
              text-decoration: underline;">
        GeeksforGeeks
    </p>
 
 
     
<p>
        There's a <u>spelling</u> error.
    </p>
 
</body>
 
</html>

Output:

Animations/Transitions: This feature helps in giving Animations and Transitions to simple HTML elements. A huge variety of Transitions and Animations are provided by Style Sheets which can be implemented and can be used to give a different look or a different motion property to a normal text.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
    <style>
        h3 {
            width: 100px;
            height: 50px;
            background: rgb(14, 216, 7);
            transition: 1s;
        }
 
        h3:hover {
            width: 120px;
            height: 70px;
        }
 
        p {
            width: 100px;
            height: 50px;
            background-color: rgb(228, 228, 228);
            animation-name: example;
            animation-duration: 6s;
        }
 
        @keyframes example {
            from {
                background-color: rgb(228, 228, 228);
            }
 
            to {
                background-color: rgb(6, 175, 20);
            }
        }
    </style>
</head>
 
<body>
    <h3>
        Geeks For Geeks
    </h3>
     
<p>
        This has Animation.
    </p>
 
</body>
 
</html>

Content Justification: It’s one of the most useful feature provided by CSS as it helps in placing our data in a more structured manner. We can make space around elements by using margins and paddings and on the other hand content justification helps whether we want to place our text or content at center or any other position with numerous properties.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
    <style>
        h3 {
            color: rgb(25, 146, 25);
            border: 2px solid black;
            border-radius: 20px;
            font-size: 40px;
            width: 400px;
            display: flex;
            justify-content: center;
        }
 
        span {
            color: rgb(24, 78, 28);
            font-family: cursive;
            font-size: 20px;
            border: 2px solid black;
            margin-left: 70px;
 
        }
 
        p {
            color: rgb(25, 146, 25);
            border: 2px solid black;
            border-radius: 20px;
            font-size: 40px;
            width: 400px;
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
 
<body>
    <h3>
        GeeksforGeeks
    </h3>
    <span>
        Best Platform for Learners.
    </span>
     
<p>
        This has flex-end.
    </p>
 
</body>
 
</html>