HTML and CSS Reference
In-Depth Information
Whenever you see a property with the same name prefix as with the column-rule property,
you can know that there is a shorthand mechanism to specify the most common properties
in one line.
After reviewing Table 4-8, you now know that the article element in the previous code
block is set up to have five columns, each 5 px apart. The vertical rule between columns will
use a dashed line that is black and 2-px wide. It is common for articles to have a title. Usually
the title will span across all the columns of the article. To achieve this effect, you need to use
the column-span property on an element to indicate that it should render across multiple
columns. To achieve this, add the following code to the CSS:
#c_lo {
width: 80%;
height: 400px;
border: 1px solid black;
column-count: 5;
column-rule-color: black;
column-rule-style: dashed;
column-rule-width: 2px;
column-gap: 5px;
hgroup {
column-span: all;
<article id="c_lo">
<h1>My Blog Article</h1>
You have added an hgroup element, added style elements to specify that the hgroup text
should be centered, and specified the all value for the column-span property.
This markup produces the output shown in Figure 4-41.
Search WWH ::

Custom Search