{"id":2049,"date":"2016-10-16T13:50:15","date_gmt":"2016-10-16T13:50:15","guid":{"rendered":"http:\/\/cssreset.com\/?p=2049"},"modified":"2016-10-16T13:50:15","modified_gmt":"2016-10-16T13:50:15","slug":"control-your-quotes-with-css3s-quotes-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/control-your-quotes-with-css3s-quotes-property\/","title":{"rendered":"Control Your Quotes With CSS3’s Quotes Property"},"content":{"rendered":"

If you’re looking for a way to style your quotes using CSS, here’s a good one for you. Take advantage of this if you have a lot of quote elements that need to be uniform throughout your entire document or project.<\/p>\n

To use CSS to style your quotes, make sure that your quote are within <q> tags in your HTML, like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>q&gt;<\/span>Hey, it's a quote.&lt;<\/span>\/q&gt;<\/span><\/div><\/li>\n
  2. &lt;<\/span>q&gt;<\/span>Hey, let's make a &lt;<\/span>q&gt;<\/span>quote&lt;<\/span>\/q&gt;<\/span> inside a quote.&lt;<\/span>\/q&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Let’s say you want the outer quotes to be double brackets, and the inner quotes (to be applied to the quote within a quote) to be single brackets. Here’s how you’d have to define that in your CSS:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. q{<\/span><\/div><\/li>\n
    2. quotes<\/span>:<\/span>\u00a0"\u00ab"<\/span> "\u00bb"<\/span> "\u2039"<\/span> "\u203a"<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      The quotes property takes four values, the first two are for the outer quotes, and the second two are for the inner quotes. Your final results should look like this:<\/p>\n

      \u00abHey, it’s a quote.\u00bb
      \n\u00abHey, let’s make a\u00a0\u2039quote\u203a inside a quote.\u00bb<\/p>\n

      This property is supported on most major browsers and is great for quickly making your quote styling consistent across the board.<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      If you’re looking for a way to style your quotes using CSS, here’s a good one for you. Take advantage of this if you have a lot of quote elements that need to be uniform throughout your entire document or […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2049"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2049"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":2050,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2049\/revisions\/2050"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}