CSS Properties: How to defines a double rule?
Solution:
HTML Code:
<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to defines a double rule</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
.xyz { /* Defines styles for elements with the class "xyz" */
-webkit-column-count: 3; /* Sets the number of columns for WebKit browsers to 3 */
-webkit-column-gap: 20px; /* Sets the gap between columns for WebKit browsers to 20 pixels */
-webkit-column-rule-style: double; /* Sets the style of the rule between columns for WebKit browsers to double */
column-count: 3; /* Sets the number of columns for all browsers to 3 */
column-gap: 40px; /* Sets the gap between columns for all browsers to 40 pixels */
column-rule-style: double; /* Sets the style of the rule between columns for all browsers to double */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<div class="xyz"><!-- Starts a division element with a class of "xyz" -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts a paragraph element with text describing CSS -->
<h1>w3resource Tutorial</h1><!-- Inserts another h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts another paragraph element with text describing CSS -->
</div><!-- Ends the division element with a class of "xyz" -->
</body>
</html>
Explanation:
- This HTML document demonstrates how to define a double rule between columns in a CSS layout.
- The CSS style block defines rules for elements with the class "xyz".
- Various -webkit prefixed properties are used for WebKit browsers (like Chrome and Safari), while non-prefixed properties are used for other browsers.
- -webkit-column-rule-style: double; sets the style of the rule between columns to double for WebKit browsers.
- column-rule-style: double; sets the style of the rule between columns to double for all browsers.
Live Demo:
See the Pen column-rule-style-double-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