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 Dropcap in Dreamweaver CS4

GoDaddy.com Hosting Plans Sale!Godaddy Hosting

In this Dreamweaver Tutorial you can learn how to improve typography in dreamweaver by using css to capitalise a letter of a paragraph to make a dramatic dropcap effect. you can transform text and capitalize using a simple class to make the fancy dropcap effect.

CSS Dropcap Typography

A Drop cap is a large letter or initial which sits usually at the start of a paragraph and acts to pull the reader into the content of an article. Dropcaps are visually appealing components which can take a dull web page and give it a lift. A dropcap is also very easy to make and in this Dreamweaver typography tutorial you can learn how to style a css dropcap in no time at all.



The drop cap effect is obtained by floating the letter to the left and applying margins and padding.

The typography styling for a drop cap is made almost entirely in CSS. Once the styling for the CSS dropcap has been completed, simply adding a class span tag around the letter you wish to apply a drop cap to will turn that letter into a dropcap which you can use more than once on a page if you so wish. You could apply dropcaps to every paragraph in your web page and it wouldn’t look out of place.

A dropcap in Dreamweaver is easy to produce; the drop cap effect is obtained by floating the letter to the left and applying margins and padding as well as increasing the font size of the CSS dropcap. You can also change the font family declaration too which will really make the dropcap stand out.

The best way to apply a span tag to an element in your Dreamweaver typography webpage is to use the properties inspector to change the class of the letters you wish to add the dropcaps to. Highlight the letter in question, and look into the properties inspector just to the left of the bold and italic icons you will see the word ‘class’ with a dropdown menu beside it. Click on the dropdown menu and select the class that you have made for the CSS dropcap. It helps to name the span class for the drop cap, ‘.dropcap’ in your CSS style sheet.

If you prefer, you can read a written tutorial explaining how to implement CSS dropcaps with full code examples.



Related Tutorials:

Website Typography - Dreamweaver video Tutorial with free download

Pull Quotes in Dreamweaver - Dreamweaver Article Tutorial



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