{"id":15463,"date":"2012-11-16T21:01:28","date_gmt":"2012-11-16T13:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15463"},"modified":"2024-04-04T01:17:37","modified_gmt":"2024-04-03T17:17:37","slug":"css-better-paragraph","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/","title":{"rendered":"CSS Dropcaps Using :first-line and :first-letter"},"content":{"rendered":"<p>Some CSS selectors or properties may not be commonly seen in everyday web design, yet they\u2019ve been around since the CSS1 era. These include the <code>:first-line<\/code> and <code>:first-letter<\/code> <em>pseudo-elements<\/em>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" class=\"ref-block__link\" title=\"Read More: Understanding Pseudo-Element :before and :after\" rel=\"bookmark\"><span class=\"screen-reader-text\">Understanding Pseudo-Element :before and :after<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/pseudo-element-before-after.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14256 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/pseudo-element-before-after.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Understanding Pseudo-Element :before and :after<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>How to Utilize CSS Pseudo-elements<\/h2>\n<p>These pseudo-elements function similarly to their counterparts, :before and :after, and are quite straightforward to use. The <code>:first-letter<\/code> pseudo-element targets the first letter or character of a selected element, commonly used for typographical effects like drop caps. Here\u2019s how to implement it:<\/p>\n<pre>\r\np:first-letter {\r\n  font-size: 50px;\r\n}\r\n<\/pre>\n<p>This code transforms the first letter as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg\" alt=\"Example of a drop cap\" width=\"500\" height=\"280\"><\/figure>\n<p>It\u2019s important to note that this effect applies only when the first character isn\u2019t preceded by another element, such as an image. Moreover, when there are multiple instances of the targeted element in sequence, they will all exhibit the effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap-2.jpg\" alt=\"Multiple elements with drop cap\" width=\"500\" height=\"350\"><\/figure>\n<p>Regarding the <code>:first-line<\/code> pseudo-element, it targets the first line of a selected element. The example below demonstrates how to bold the first line of a paragraph.<\/p>\n<pre>\r\np:first-line {\r\n  font-weight: bold;\r\n}\r\n<\/pre>\n<p>This code affects all first lines in the paragraphs on the page, just like the <code>:first-letter<\/code> code did.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/first-line.jpg\" alt=\"Bold first line\" width=\"500\" height=\"350\"><\/figure>\n<p>In practical applications, when you want to apply a drop cap or alter the first line <strong>only<\/strong> in the first paragraph, specificity is key. This can be achieved by adding an extra class or using these pseudo-elements in conjunction with the <code>:first-child<\/code> or <code>:first-of-type<\/code> selectors, as shown below.<\/p>\n<pre>\r\np:first-child::first-letter {\r\n  font-size: 50px;\r\n}\r\n\r\np:first-child::first-line {\r\n  font-weight: bold;\r\n}\r\n<\/pre>\n<p>This approach ensures only the first paragraph is affected.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap-3.jpg\" alt=\"Drop cap on the first paragraph\" width=\"500\" height=\"350\"><\/figure>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-first-of-type\/\" class=\"ref-block__link\" title=\"Read More: A Look Into: CSS3 :first-of-type Structural Selector\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Look Into: CSS3 :first-of-type Structural Selector<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-first-of-type.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14324 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-first-of-type.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Look Into: CSS3 :first-of-type Structural Selector<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tOne of the aspects I find most exciting about CSS3 is the introduction of new selectors. These selectors...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Implementing Pseudo-Elements for Enhanced Paragraph Design<\/h2>\n<p>Now, let\u2019s explore how to use pseudo-elements to create a more appealing paragraph design. First, we\u2019ll select a unique font for our drop cap. I recommend <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fonts\/Hominis\">Hominis<\/a> by Paul Lloyd for this purpose. Next, we\u2019ll add this font to our stylesheet like so:<\/p>\n<pre>\r\n@font-face {\r\n  font-family: 'HominisNormal';\r\n  src: url('fonts\/HOMINIS-webfont.eot');\r\n  src: url('fonts\/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),\r\n       url('fonts\/HOMINIS-webfont.woff') format('woff'),\r\n       url('fonts\/HOMINIS-webfont.ttf') format('truetype'),\r\n       url('fonts\/HOMINIS-webfont.svg#HominisNormal') format('svg');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\n<\/pre>\n<p>Then, we define the default font family for paragraphs to ensure consistency throughout.<\/p>\n<pre>\r\np {\r\n  color: #555;\r\n  font-family: 'Georgia', Times, serif;\r\n  line-height: 24px;\r\n}\r\n<\/pre>\n<p>In this example, we\u2019ll use the <code>:first-child<\/code> selector to specifically style the first paragraph, making it stand out with decorative enhancements:<\/p>\n<pre>\r\np:first-child {\r\n  padding: 30px;\r\n  border-left: 5px solid #7f7664;\r\n  background-color: #f5f4f2; \r\n  line-height: 32px;\r\n  box-shadow: 5px 5px 0px 0px rgba(127, 118, 100, 0.2);\r\n  position: relative;\r\n}\r\n<\/pre>\n<p>Next, let\u2019s enhance the initial letter using the <code>:first-letter<\/code> pseudo-element by increasing its font size and applying a distinct font family to it:<\/p>\n<pre>\r\np:first-child::first-letter {\r\n  font-size: 72px;\r\n  float: left;\r\n  padding: 10px;\r\n  height: 64px;\r\n  font-family: 'HominisNormal';\r\n  background-color: #7F7664;\r\n  margin-right: 10px;\r\n  color: white;\r\n  border-radius: 5px;\r\n  line-height: 70px;\r\n}\r\n<\/pre>\n<p>To further distinguish the first paragraph, we\u2019ll bold the first line using <code>:first-line<\/code>:<\/p>\n<pre>\r\np:first-child::first-line {\r\n  font-weight: bold;\r\n  font-size: 24px;\r\n  color: #7f7664;\r\n}\r\n<\/pre>\n<p>Finally, we aim to add a creative touch to the first paragraph by introducing a decorative paperclip with the <code>:after<\/code> pseudo-element.<\/p>\n<pre>\r\np:first-child::after {\r\n  background: url(\"..\/images\/paper-clip.png\") no-repeat scroll 0 0 transparent;\r\n  content: \" \";\r\n  display: inline-block;\r\n  height: 100px;\r\n  position: absolute;\r\n  right: -5px;\r\n  top: -35px;\r\n  width: 100px;\r\n}\r\n<\/pre>\n<p>This completes our coding efforts, resulting in a significantly improved paragraph appearance:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/better-paragraf.jpg\" alt=\"Enhanced paragraph with drop cap and paperclip decoration\" width=\"500\" height=\"380\"><\/figure>\n<p>Explore the live demo and download the source from the links provided below:<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/css-better-paragraph\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/css-better-paragraph\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<h2>Final Thoughts<\/h2>\n<p>As mentioned at the beginning, the pseudo-elements <code>:first-letter<\/code> and <code>:first-line<\/code> have been part of CSS since CSS1, making them compatible with even early versions of Internet Explorer, such as IE8.<\/p>\n<p>Despite their long-standing presence, these features are not widely used today. It\u2019s our hope that this tutorial inspires you to experiment with these CSS capabilities on your own websites.<\/p>","protected":false},"excerpt":{"rendered":"<p>Some CSS selectors or properties may not be commonly seen in everyday web design, yet they\u2019ve been around since the CSS1 era. These include the :first-line and :first-letter pseudo-elements. How to Utilize CSS Pseudo-elements These pseudo-elements function similarly to their counterparts, :before and :after, and are quite straightforward to use. The :first-letter pseudo-element targets the&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Dropcaps Using :first-line and :first-letter - Hongkiat<\/title>\n<meta name=\"description\" content=\"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they&#039;ve been around since the CSS1 era. These include the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Dropcaps Using :first-line and :first-letter\" \/>\n<meta property=\"og:description\" content=\"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they&#039;ve been around since the CSS1 era. These include the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-11-16T13:01:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T17:17:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"CSS Dropcaps Using :first-line and :first-letter\",\"datePublished\":\"2012-11-16T13:01:28+00:00\",\"dateModified\":\"2024-04-03T17:17:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/\"},\"wordCount\":510,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-better-paragraph\\\/drop-cap.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/\",\"name\":\"CSS Dropcaps Using :first-line and :first-letter - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-better-paragraph\\\/drop-cap.jpg\",\"datePublished\":\"2012-11-16T13:01:28+00:00\",\"dateModified\":\"2024-04-03T17:17:37+00:00\",\"description\":\"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they've been around since the CSS1 era. These include the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-better-paragraph\\\/drop-cap.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-better-paragraph\\\/drop-cap.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-better-paragraph\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Dropcaps Using :first-line and :first-letter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Dropcaps Using :first-line and :first-letter - Hongkiat","description":"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they've been around since the CSS1 era. These include the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/","og_locale":"en_US","og_type":"article","og_title":"CSS Dropcaps Using :first-line and :first-letter","og_description":"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they've been around since the CSS1 era. These include the","og_url":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-11-16T13:01:28+00:00","article_modified_time":"2024-04-03T17:17:37+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"CSS Dropcaps Using :first-line and :first-letter","datePublished":"2012-11-16T13:01:28+00:00","dateModified":"2024-04-03T17:17:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/"},"wordCount":510,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg","keywords":["CSS"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/","url":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/","name":"CSS Dropcaps Using :first-line and :first-letter - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg","datePublished":"2012-11-16T13:01:28+00:00","dateModified":"2024-04-03T17:17:37+00:00","description":"Some CSS selectors or properties may not be commonly seen in everyday web design, yet they've been around since the CSS1 era. These include the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-better-paragraph\/drop-cap.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-better-paragraph\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Dropcaps Using :first-line and :first-letter"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-41p","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15463"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15463\/revisions"}],"predecessor-version":[{"id":71640,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15463\/revisions\/71640"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15463"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}