Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Our YouTube.com Channel Facebook Page

CSS Drop Caps Tutorial


Drop caps are used in web typography to improve the visual look of a website.  In modern society, they are used as a text decoration to break up square looking text and make the content more engaging for the reader.  It is possible to make dropcaps with a little CSS and the drop cap html is minimal.

In fact, if you are using Dreamweaver, you only need to put the letter you want to make into a drop cap into a paragraph tag. Once you have created the CSS drop caps class, you can attach that class to the letter from a drop down box in the properties inspector which will apply a span tag for you.

Assuming you have a paragraph set up, let’s first create the css for the drop cap.

1. Create the CSS for the drop caps to work

The most important aspect of the css dropcap is that a float property is applied to the class which when applied to the letter in question will make all of the text around it in the paragraph collapse. Once the rest of the paragraph has collapsed the css is set to push away from the drop cap with padding. The font size is set to a large typeface and a line height is set which is greater than the size of the letter to push the content away at the bottom.

You may want to push the css drop cap down from the top a little with a padding top attribute as well like in the following example drop caps css:



 .dropcap {
 
    float:left;
    color: #09F;
    font-size:63px;     
    line-height:55px;
    padding-right:25px; 
    padding-top:2px;
    font-family:Arial, Helvetica, sans-serif;
    text-shadow:1px 1px 1px #000;
 }
 

In the example, the font family was also set for the drop cap as well as a text shadow.

2. Apply the Span Class for the CSS Drop Cap

If you are using Dreamweaver, you may at this point highlight the letter with your mouse and look to the properties inspector and change the class from the drop down class selector.

If you instead want to know how to hand-code the drop cap html span tag, you will need to type the following code to wrap around the intended drop cap letter:



  <span class="dropcap"> D </span>


 <!-- 
 If you pasted the above CSS called 'dropcap',then
 the span class will be called dropcap too. 
 -->


        

That completes this tutorial on css drop caps and the minimal drop cap html needed to create one.





Related Tutorials:

CSS Drop Caps - Video Tutorial

Typography in Web Design - Video Tutorial



Share this Dreamweaver Article:

blog comments powered by Disqus

Dreamweaver Website Templates

Web Hosting Plans That I Use

  • GoDaddy.com Hosting Plans!Godaddy Hosting
  • Unlimited Hosting at HostGatorHostGator Hosting
  • JustHost.com Unlimited DomainsJustHost Hosting
  • Hosting just $4.88/month! - PowwebPow Web Hosting

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

  • BigCommerce makes it easy to sell online. Click here to try it free!BigCommerce

    I highly reccommend this product for people who want to create an online store. it's easy to set-up and add products to and easy to manage back-of-house. Can also be used as an Ebay store.

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials