Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What can be done with style sheets that can not be accomplished with regular HTML ?
Developers can use CSS to describe the presentation of the web page content. The stylesheet contains the CSS code, which we link with the web page for a better representation of the web page.
Why do we Require to use a Stylesheet with an HTML Web Page?
For beginners, the first question comes to mind is that why do we require to use the stylesheet? Can’t we create web pages without using the stylesheet? The answer is yes. You can create a web page without using the stylesheet.
HTML is only used to add content to the web page, and it prepares the structure of the web page. We require to describe the content of the web page for better representation and attract visitors, which we can achieve using CSS.
By adding the CSS code in the stylesheet, we can style the font of a web page, the div element of a web page, and create cards for the web page, etc.
Syntax
Users should follow the syntax below to write CSS code in the stylesheet.
Selector {
/* CSS code */
}
Here, we require to write the CSS selector and CSS code in the declaration block of the CSS code. Also, users can write CSS code for multiple HTML elements.
Example 1 (Basic Styling)
In the example below, we have demonstrated how we can use the stylesheet with the HTML content. Here, we have used the embedded stylesheet to change the representations of the HTML elements.
Here, we have created two div elements and styled them. Users can remove the styles related to the div element and observe the output that how it looks.
<html>
<head>
<style>
body {background-color: aliceblue;}
.first {
height: 150px;
width: 300px;
font-size: 1.3rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: blueviolet;
}
.second {
height: 100px;
width: 400px;
font-size: 1.3rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: red;
margin: 10px;
background-color: green;
}
</style>
</head>
<body>
<h2>Using the <i> stylesheet </i> to apply basic styles to the webpage content </h2>
<div class = "first"> Hello! How are you? </div>
<div class = "second"> Welcome to the TutorialsPoint! </div>
</body>
</html>
Example 2 (Animation and Transitions)
In the example below, we demonstrated how to add animation to the HTML elements using the stylesheet. We have created a div element and styled it using the CSS.
Also, we have added the ‘bounce’ keyframes for the animation. In the ‘bounce’ keyframes, we change the element's horizontal position, making it animated.
<html>
<head>
<style>
.animate {
width: 300px;
height: 300px;
background-color: burlywood;
border: 2px dotted olive;
border-radius: 10px;
animation: bounce 2s ease-in-out 0.1s infinite;
}
@keyframes bounce {
0% {transform: translateX(0px);}
40% {transform: translateX(30px);}
80% {transform: translateX(20px);}
90% {transform: translateX(15px);}
100% {transform: translateX(00px);}
}
</style>
</head>
<body>
<h2>Using the <i> stylesheet </i> to add animation to HTML content </h2>
<div class = "animate"> </div>
</body>
</html>
Example 3 (Responsive Design)
In the example below, we have demonstrated to create a responsive design by adding a stylesheet to the HTML content. Here, we have set dimensions and some basic styles for the parent element. Also, we have set the dimensions for the child div element.
After that, we used the media queries to make the web page responsive. We change the dimensions of the div element if the screen size is less than 720 pixels which users can observe in the output.
<html>
<head>
<style>
.parent {
width: 50%;
height: 70%;
background-color: blueviolet;
border: 2px dotted green;
border-radius: 12px;
margin: 0 auto;
}
.child {
width: 50%;
height: 50%;
background-color: yellow;
border-radius: 12px;
margin: 15% auto;
}
@media screen and (max-width: 720px) {
.parent { width: 100%; height: 70%;}
.child { width: 80%; height: 50%;}
}
</style>
</head>
<body>
<h2> Using the <i> stylesheet </i> to make a responsive design </h2>
<div class = "parent">
<div class = "child">
</div>
</div>
</body>
</html>
Example 4 (Layout Control)
In the example below, we have demonstrated to control the layout of HTML elements via a stylesheet. Here, we have a ‘container’ div element with 80% width of the total screen size. Also, we have used the ‘display: flex’ CSS property.
For the ‘block1’ element, we have used the ‘flex: 1’; for the ‘block2’ element, we have used the ‘flex: 2’ CSS property. Here, users can observe that block1 takes 33.33% of space, and block2 takes 66.67% of the total space.
<html>
<head>
<style>
.container {
width: 80%;
height: 300px;
display: flex;
border: 3px solid pink;
}
.block1 {
flex: 1;
background-color: blue;
}
.block2 {
flex: 2;
background-color: red;
}
</style>
</head>
<body>
<h2> Using the <i> stylesheet </i> to make responsive design </h2>
<div class = "container">
<div class = "block1"> </div>
<div class = "block2"> </div>
</div>
</body>
</html>
Users learned the benefits of using the stylesheet with HTML. We can better represent the HTML content, which can’t be done using only regular HTML. Also, we can make the web page attractive using the stylesheet.
59 Views
