Before creating a Definition List, using Custom CSS, inserrt a H4 Heading, Horizontal Rule, and Paragraph. Now insert the following code in Additional CSS to change the size of the H4 Heading
------------------------------------
h4 {
font-size: 22px;
}
-----------------------------------
and the <p></p> tags in Custom HTML and insert your text between the tags.

To help a better understanding of creating a Definition List, I've written the list in English. A Definition List uses three tags: dl, dt, and dd, and is used when creating a glossary type list or a dictionary type list. Some examples are given below. I've used a glossary of common terms used in internet and world wide web jargon.

Ok, now we're ready to create the Definition List. First, a Header. Using Custom HTML insert the <h5></h5> tags, insert your text between the tags and enter the following code into Additional CSS:
--------------------------------
h5 {
font-size: 18px;
color: #393939;
text-transform: uppercase;
text-align: center;
margin-bottom: -20px
}
-------------------------------
Now insert the following code into Custom HTML:
-------------------------------
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
------------------------------
Add your text between the tags, preview the page, and the Definition List should look like this:

Again, not very eye-catching, so let's see how we can improve it using some HTML and CSS code. First, in the Custom HTML code add the following tags: <br> and <em> to each of the <dd> tags as show in the example below:


and insert the following code in Additional CSS:
-------------------------------------
dt {
font-family: arial;
font-stretch: ultra-condensed;
font-size: 20px;
font-weight: 600;
text-decoration: underline;
}
dd {
font-family: helvetica, arial, verdana, sans-serif;
font-size: 18px;
color: #393939;
line-height: 1.4;
margin-bottom: 5px;
}
Preview the page and the Definition List should look like this:
------------------------------------

That completes the lists types. Next up, inserting images.



Join the Discussion
Write something…
Top