Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering a guide to professional web site design, web page design and web design guidelines

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Using CSS to Create a Drop Capital Effect within a Web Page


You can use CSS (Cascading Style Sheets) Style Tags to create a drop capital effect within your web page.

If you would like to display the first letter of your paragraphs with a drop caps effect, place the following code within your HTML between your <HEAD> and </HEAD> tags.

<style>
.dropcap:first-letter{
float:left;
color:black;
font-size:250%;
}
</style>

Change the text indicated in red to your preferences.

The "dropcap" text specifies the name of the code. You can name it whatever you'd like. However, you must use the same name within your "p class" code below, as well.

Place the following code before your paragraph.

<p class="dropcap">Welcome

This is just one small example of how you can use CSS (Cascading Style Sheets) Style Tags within your web page. For additional information on CSS, visit the CSS Tutorial section.

 More Web Design Tips