Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Quotes

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      quotes

      CSS quotes property allows browser to render quotation marks for the content.
      Quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.
      This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.

      Possible Values

      • none − The open-quote and close-quote values of the content property produce no quotation marks.
      • string,string,+ − One or more pairs of string values for open-quote and close-quote. The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for third level and so on.
      • initial − Depends on user agent
      • auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

      Applies to

      All elements.

      Syntax

      Keyword Value

      quotes: none;
      quotes: auto;

      <string> Value

         quotes: "«" "»"; 
         quotes: "«" "»" "‹" "›";
      Following table describes the various quotation mark characters:
      Quotes
      Description
      Entity Number
      "
      double quotes
      \0022
      '
      single quote
      \0027
      <
      single, left angle quote
      \2039
      >
      single, right angle quote
      \203A
      <<
      double, left angle quote
      \00AB
      >>
      double, right angle quote
      \00BB
      >>
      double, right angle quote
      \00BB
      ‘
      left quote (single high-6)
      \2018
      ’
      right quote (single high-9)
      \2019
      “
      left quote (double high-6)
      \201C
      ”
      right quote (double high-9)
      \201D
      „
      double quote (double low-9)
      \201E

      CSS quotes - none Value

      The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:
      <html>
      <head>
      <style>
         p {
            quotes: none;
         }
         p:before {
            content: open-quote;
         }
         p:after {
            content: close-quote;
         }
      </style>
      </head>
      <body>
         <p>Tutorialspoint CSS Quotes set to <i>none</i></p>
      </body>
      </html>

      CSS quotes - <string> Value

      Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.
      The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on
      <html>
      <head>
      <style>
         #quote1 {
            quotes: '‘' '’';
         }
         #quote2 {
            quotes: '"' '"';
         }
         #quote3 {
            quotes: '<' '>';
         }
         #quote4 {
            quotes: '<<' '>>';
         }
         #quote5 {
            quotes: "<<" ">>" "<" ">";
         }
         #quote6 {
            quotes: '\2018' '\2019';
         }
         #quote7 {
            quotes: '\'' 00AB' ' \00BB';
         }
         #quote8 {
            quotes: '\2039' '\203A';
         }
         #quote9 {
            quotes: '\00AB' '\00BB';
         }
         #quote10 {
            quotes: '\201D' '\201E';
         }
      </style>
      </head>
      <body>
         <h3>Using quotes symbol:</h3>
         <p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
         <p><q id="quote2">Tutorialspoint CSS Quotes</q>.</q></p>
         <p><q id="quote1">Tutorialspoint CSS <q id="quote2">Quotes</q>.</q></p>
         <p>Tutorialspoint CSS <q id="quote3">Quotes</q>.</p>
         <p><q id="quote4">Tutorialspoint CSS Quotes</q>.</q></p>
         <p><q id="quote5">Tutorialspoint CSS<q id="quote5">Quotes</q>.</q></p>
      
         <h3>Using entity number:</h3>
         <p><q id="quote6">Tutorialspoint CSS Quotes.</q></p>
         <p><q id="quote6">Tutorialspoint CSS<q id="quote6">Quotes</q>.</q></p>
         <p><q id="quote7">Tutorialspoint CSS Quotes.</q></p>
         <p>Tutorialspoint CSS <q id="quote8">Quotes</q>.</p>
         <p><q id="quote9">Tutorialspoint CSS <q id="quote9">Quotes</q>.</q></p>
         <p><q id="quot10">Tutorialspoint CSS Quotes.</q></p>
      </body>
      </html>

      CSS quotes - initial Value

      Followig example demonstrates use of the quotes: initial; property value. This values sets default values to quotes.
      <html>
      <head>
      <style>
         q {
            quotes: initial;
         }
      </style>
      </head>
      <body>
         <p><q>Tutorialspoint CSS Quotes.</q></p>
      </body>
      </html>

      CSS quotes - auto Value

      Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language - as demonstrated in the following example:
      <html>
      <head>
      <style>
         q {
            quotes: auto;
         }
      </style>
      </head>
      <body>
         <div lang="fr">
            <q>Tutorialpoint est un site de cours d'anglais.</q>
         </div>
         <hr />
         <div lang="ru">
            <q>Tutorialpoint — сайт курсов английского языка.</q>
         </div>
         <hr />
         <div lang="de">
            <q>Tutorialpoint is een Engelse cursuswebsite</q>
         </div>
         <hr />
         <div lang="en">
            <q>Tutorialpoint is an english course website.</q>
         </div>
      </body>
      </html>

      CSS quotes - Using :lang pseudo-class

      You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.
      • The :lang(en) rule defines styles for elements with the English language attribute.
      • The :lang(fr) rule defines styles for elements with the French language attribute.
      Let us see an example 
      <html>
      <head>
      <style>
         :lang(en) {
           quotes: "#" "#" "<<" ">>";
         }
         :lang(fr) {
           quotes: '\2039' '\203A';
         }
      </style>
      </head>
      <body>
         <p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
         <p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
      </body>
      </html>
      Print Page