I want to to justify text with quotations to be as follow:
‘‘ text text text text text text text text text text text text text text
text text text text text text text text text text text text text text
text text text text text text text text text text text text ”
notice that all the lines are justified at the same level from the upper quotations, also the quotations should have different color and size than the text, so how I can do that with html & css ?
If you want to style the quotation marks differently from the rest of the text, your best bet is to mark them up separately. Better yet if you do this with ::before and ::after instead, and contain the text in a blockquote.
If you do this with generated content, and you don't float or position the ::before and ::after pseudo-elements, outdent the text using a negative text-indent by the amount needed to offset the opening quotes from the rest of the text, and add left padding to compensate for the outdentation.
How you implement this in HTML and CSS precisely depends on what you currently have, but you can easily accomplish this with just a simple blockquote and everything else done in CSS.