CSS Properties: How to specify a thick top border?
Solution:
HTML Code:
>!DOCTYPE html>>!-- Declares the document type as HTML -->
>html>>!-- Root element of the HTML document -->
>head>>!-- Contains metadata about the HTML document -->
>title>How to specify a thick top border>/title>>!-- Sets the title of the HTML document -->
>style type="text/css"> /* Begins a CSS style block */
h1.xyz {
/* Defines a CSS rule for h1 elements with class "xyz" */
border-style: solid; /* Sets the border style to solid */
border-top-width: thick; /* Sets the top border width to thick */
}
>/style>>!-- Ends the CSS style block -->
>/head>>!-- Ends the head section of the HTML document -->
>body>>!-- Contains the content of the HTML document -->
>h1 class="xyz">w3resource Tutorial>/h1>>!-- Displays an h1 element with class "xyz" -->
>p>>b>Note:>/b> The default value is medium none color.>/p>>!-- Displays a note about the default border width -->
>/body>>!-- Ends the body section of the HTML document -->
>/html>>!-- Ends the HTML document -->
Explanation:
- The HTML document structure includes essential elements such as html, head, title, style, and body.
- CSS rules are defined to set the border style to solid and the top border width to thick for h1 elements with class "xyz".
- A note is provided in the content explaining that the default value for the top border width is medium, with no border color.
- Comments were added below the code line as requested.
Live Demo:
See the Pen border-top-width-thick-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
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