Blockquote styling

by Admin · November 19, 2016

Blockquote styling : Today we are going to show you how to use blockquote html tag using css.

For quoting blocks of content from another source within your document. We are using unicode characters for styling blockquote content.

Incoming search terms

Blockquote styling using the css, Blockquote Styling, Blockquote tag, Blockquote Before and After content, Blockquotes example, Blockquote unicode, Blockquote content, Blockquote style, Blockquote color

In previous articles we explained Folder Structure of MVC Application, Features of MVC versions, How to Create First MVC Application, FileUpload in ASP.NET using C#, etc.

Following are the steps to Blockquote styling apply to the content block.

First we are going to create html file, over that file we are applied css for blockquote before and after. Also we are using blockquote unicode for the styling the content. Our example we are using before content as “\201C” and after content as “\201D” unicode characters.

ADD HTML AND CSS

Here we added HTML and CSS with blockquote styling. We are using before and after css with the unicode characters, for more unicode characters list Click here.

<html>
  <head>
  <style>
  blockquote {
    font-size: 18px;
    padding:20px;
    text-transform: uppercase;
}


blockquote:before {
    top: 10px;
    left: 20px;
    content: "\201C";
}

blockquote:after {
top:80px;
   content: "\201D";
   }

blockquote:before, blockquote:after {
    position: absolute;
    width: 60px;
    height: 60px;
    font-size: 80px;
    line-height: 1;
    color: #dd7975;
}

  </style>
    <title>
      Blockquote Styling
    </title>
  </head>
  <body>
    <blockquote>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   	</blockquote>
  </body>
</html>

<html>

<head>

<style>

blockquote {

font-size: 18px;

padding:20px;

text-transform: uppercase;

}

blockquote:before {

top: 10px;

left: 20px;

content: "\201C";

}

blockquote:after {

top:80px;

content: "\201D";

}

blockquote:before, blockquote:after {

position: absolute;

width: 60px;

height: 60px;

font-size: 80px;

line-height: 1;

color: #dd7975;

}

</style>

<title>

Blockquote Styling

</title>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</blockquote>

</body>

</html>