HTML and CSS Reference
In-Depth Information
EXAM TIP
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:
<html>
<head>
<style>
#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;
text-align:center;
}
</style>
</head>
<body>
<article id="c_lo">
<hgroup>
<h1>My Blog Article</h1>
</hgroup>
<p>
…
</p>
</article>
</body>
</html>
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