HTML CSS Exercise: Create Stitched looks with css3
Solution:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!-- Declaring character encoding for the document -->
<title>Create a Stiched Look with CSS3</title><!-- Title of the HTML document -->
<style>/* Begins CSS styling */
.stitched {
width: 200px; /* Setting the width of the stitched element */
padding: 20px; /* Adding padding inside the stitched element */
margin: 10px; /* Setting margin around the stitched element */
background: #0d90df; /* Setting background color of the stitched element */
color: #fff; /* Setting text color of the stitched element */
font-size: 21px; /* Setting font size of the text inside the stitched element */
font-weight: bold; /* Setting font weight of the text inside the stitched element */
line-height: 1.3em; /* Setting line height for the text inside the stitched element */
border: 2px dashed #fff; /* Adding a dashed border around the stitched element */
border-radius: 10px; /* Setting border radius for rounded corners of the stitched element */
box-shadow: 0 0 0 4px #0d90df, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); /* Adding box shadow to create a shadow effect */
text-shadow: -1px -1px #aa3030; /* Adding text shadow to the text inside the stitched element */
font-weight: normal; /* Resetting font weight to normal */
}
</style>
</head>
<body>
<div class="stitched"></div><!-- Creating a div element with the class "stitched" -->
</body>
</html>
Explanation:
- This HTML document creates a stitched look using CSS.
- The stitched element is styled using various CSS properties.
- It has a fixed width and padding to provide spacing inside.
- Margin is added to create space around the element.
- Background color is set to a shade of blue.
- Text color is set to white for better contrast.
- Font size and weight are adjusted for better appearance.
- Line height is set to ensure proper spacing between lines of text.
- A dashed border with white color is applied around the element.
- Border radius is used to round the corners of the element.
- Box shadow is added to create a shadow effect around the element.
- Text shadow is applied to the text inside the element for a shadowed effect.
- Overall, this code demonstrates how to create a visually appealing stitched look using CSS.
Live Demo:
See the Pen stitched-looks-answer by w3resource (@w3resource) on CodePen.
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics