Post by account_disabled on Jan 1, 2024 22:49:49 GMT -5
Athe span without affecting the rest of the paragraph by using a CSS selector. Below well use the type selector span. To make the drop cap line up with the top of the first line of the paragraph and the left margin of the paragraph you can use the float and lineheight property. Set the float property to left and the line height to 85. By setting the line height to 85 instead of 100 you align the top of the capital T with the top of the lowercase h. Then to ensure the drop cap and paragraph do not . Using 0.7em or .7 times the width of the font of the paragraph will give the illusion of padding between the drop.
Caps right and bottom edge and the paragraph. To make the drop cap the size of three lines of text set the fontsize to 400. Finally to ensure the drop cap really stands out change the font family to Digital Marketing Service Georgia. Lets look at the code all together. Heres the CSS span float left lineheight 85 width .7em fontsize 400 fontfamily georgia Heres the HTML pspanTspanhis is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.p pIn the paragraph above the first letter of the text is embedded in a span element. The span can now be defined by a CSS rule set without affecting the rest of the paragraph. This rule set includes the float and lineheight property so that the drop cap lines up with the top of the first line.
Caps right and bottom edge and the paragraph. To make the drop cap the size of three lines of text set the fontsize to 400. Finally to ensure the drop cap really stands out change the font family to Digital Marketing Service Georgia. Lets look at the code all together. Heres the CSS span float left lineheight 85 width .7em fontsize 400 fontfamily georgia Heres the HTML pspanTspanhis is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.p pIn the paragraph above the first letter of the text is embedded in a span element. The span can now be defined by a CSS rule set without affecting the rest of the paragraph. This rule set includes the float and lineheight property so that the drop cap lines up with the top of the first line.