So here is a basic tutorial for creating a drop cap for paragraphs within an article using HTML and a CSS external style sheet. This will help you to create some pizazz with your text.
What is Required:
- DreamWeaver CS5
- 5 minutes or less
- Two to three paragraphs of text
- Root folder on the Desktop
Step 1:
Create a folder on the desktop naming it your root folder. Proceed to open Dream Weaver CS5 and select to open an HTML document. This will start you off with a basic file with the beginning HTML tags. Next upload your root folder by going to Site>New Site>Enter the name of your project in the site name box. Then click to browse for your root folder on the desktop and select it in the local site folder box. This will assure you that everything you save goes directly into your root folder.
Step 2:
Create an external styling sheet by clicking on File>New>Css>Create. Save(command+s)>Save as sample.css>Save the location to your root folder.
Step 3:
Upload a few paragraphs of the text you wish to present in your website within the body of the HTML. Make sure to use the paragraph tag, <p></p>, at the first and last of every paragraph in order to separate them.
Step 4:
Next Double click your sample.css file from your root folder. This will bring the folder up alongside your HTML file. In your CSS file you will insert the Drop Cap into your paragraphs by typing in the style code found below. Don't forget to save (command+s).
The p { tag tells you the fonts family, font size, font color of the paragraph text. The p:first-letter tag tells you the characteristics of the drop cap or first letter of each paragraph. All of these settings can be adjusted to stylize the text you are working with.
Step 5:
You will now
need to link your HTML file with your CSS file so that the drop cap will show up in the text. To do this enter the following tags into the HTML code directly after the <head> tag.
<link rel="stylesheet" href="sample.css" />. This tag tells the HTML code that it needs to implement a styling sheet and where it can find that styling sheet in order to link to it.
Step 6:
Save your document (command+S). Then click on the design to see the results.
Just like that, you have created your very own Drop Caps that will bring life and detail to the text of your website. This is just one way that you can go about implementing Drop Caps. Others ways can be more simple or more complicated. I found this one as the easiest way.
Here is what the final text should look like:
If you have any questions or comments, feel free to comment.
Good Luck!
