Practical No.6:Implement the border properties on the web page Answers
|
| Practical No.6:Implement the border properties in web page Answers |
Practical Significance
The HTML border attribute is used to set the visible border width to most HTML elements within the body. Adding borders around elements on a web page is an important feature of web design. Borders can be used to separate the contents of a web page, making it easier for users to interpret the information presented on the page. This practical is useful for applying borders to web pages, to specific paragraphs, or to specific elements in HTML.
Exercise
Design a web page to apply borders to paragraphs and web pages with different border styles.
Answer:
Code:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Border Styles Example</title><style>/* Style for the entire webpage */body {border: 5px dashed blue; /* Set border for the webpage */padding: 20px; /* Add space between webpage border and content */}/* Style for the first paragraph */p.solid {border: 3px solid red; /* Solid red border */padding: 10px; /* Add space between paragraph border and text */margin-bottom: 15px; /* Add space between paragraphs */}/* Style for the second paragraph */p.dotted {border: 2px dotted green; /* Dotted green border */padding: 10px;margin-bottom: 15px;}/* Style for the third paragraph */p.double {border: 1px double orange; /* Double orange border */padding: 10px;}</style></head><body><h1>Borders in Action!</h1><p class=”solid”>This paragraph demonstrates a solid red border. The paragraph content is slightly indented for better visibility.</p><p class=”dotted”>This paragraph uses a dotted green border. See how different border styles can visually separate content.</p><p class=”double”>This paragraph has a double orange border. Experimenting with borders can enhance your web page design.</p></body></html>
Output :
Practical Related Questions
1. What is the use of border property?
Answer:
The border property in CSS is a convenient method for defining the style, width, and color of an element’s border. It is a flexible tool for adding visual distinction, organizing content, and improving the overall layout of a webpage.
2. How to apply the width of the border?
Answer:
You can apply the width of a border in CSS using the border-width property. It accepts values in pixels (px), other CSS measurement units (e.g., em, rem), or keywords like thin, medium, and thick (though keyword support might vary slightly across browsers).
3. Can we apply color to the border? If yes, how?
Answer:
Yes, you can certainly apply color to borders in CSS!
The border property works as a shorthand for putting all border properties (width, style, and color) at once. Here’s the syntax:
CSS
border: width style color;
Conclusion
We successfully completed the HTML practical with the name Implement the border properties in the web page and did an exercise based on it.
