-1

Hello I am new to CSS and I am using quotes in a website I am building. However I do not really want to use an image to achieve the style when I might be able to use CSS. My problem is I have no idea where to start! THIS IS THE IMAGE I WILL USE IF THE SAME EFFECT IS NOT POSSIBLE IN CSS Can somebody please show me how to achieve this

DanielNolan
  • 721
  • 3
  • 10
  • 18
  • read this article : http://demosthenes.info/blog/59/Classic-Typography-Effects-In-CSS-Pull-quote-With-Generated-Quote-Marks – Thomas Ayoub Oct 26 '14 at 10:04
  • 1
    Just googled the keywords "css quotes around text" --> http://css-tricks.com/examples/Blockquotes/ – Hashem Qolami Oct 26 '14 at 10:05
  • 1
    "*Hello I am new to CSS*...*My problem is I have no idea where to start*" - then you need to look for tutorials, or reference/text books and *learn*. I'm sorry, but [SO] isn't for beginners' tutorials, do your research, use Google (or Bing, or whatever else) and pick up the basics first. – David Thomas Oct 26 '14 at 10:25

1 Answers1

1

Simplest way is to create a <blockquote> element and using pseudo elements to control the quotation marks. Note: some styles are added, mainly margins and paddings, to overwrite browser styles.

body {
        font-family: sans-serif;
    }
    
    blockquote {
        color: #aaa;
        position: relative;
        display: inline-block;
        padding: 0 5px;
    }
    
    blockquote p {
        margin-bottom: 5px;
    }
    
    blockquote:before,
    blockquote:after {
        content: "“";
        font-size: 70px;
        font-family: "Georgia", Serif;
        color: #666;
        position: absolute;
        left: -30px;
        top: 5px;
    }
    
    cite {
        float: right;
        color: black;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    
    blockquote:after {
        content: "”";
        right: -30px;
        left: auto;
    }
<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>

Article mentioned by @thomas should have all the relevant information you need here

alexnewmann
  • 26
  • 3