Skip to content Skip to sidebar Skip to footer

Mark notes using css blockquote

     In many places we need to write the notes for highlighting peoples or some definition needs some attention, in this situation we can use the following example.

Usages
1. Marking important notes.
2. If you run blogger you can write some introduction in the last part of the blogger post, so have many chance to read the details some one.
3. This will not have attractive multi color, so your content will not getting nonstandard look.

CSS Code

<style>

blockquote:before {
   color: #ccc;
   content: open-quote;
   font-size: 4em;
   line-height: 0.1em;
   margin-right: 0.25em;
   vertical-align: -0.4em;
}
blockquote {
   quotes: "\201C""\201D""\2018""\2019";
margin: 1.5em 10px;
   border-left: 10px solid #ccc;
   padding: 0.5em 10px;
   background: #f9f9f9;
}
</style>

HTML Code

<html>



<head>

    <style>

        blockquote:before {

            color: #ccc;

            content: open-quote;

            font-size: 4em;

            line-height: 0.1em;

            margin-right: 0.25em;

            vertical-align: -0.4em;

        }

       

        blockquote {

            quotes: "\201C""\201D""\2018""\2019";

            margin: 1.5em 10px;

            border-left: 10px solid #ccc;

            padding: 0.5em 10px;

            background: #f9f9f9;

        }

    </style>

</head>



<body>

    <blockquote>

        Write your Discription or self introduction or any important notes here.

    </blockquote>

</body>



</html>

Post a Comment for "Mark notes using css blockquote"