Quote with thick border : q « Tags « HTML / CSS






Quote with thick border

   


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>A Web page</title>
<style type="text/css" media="Screen">
p {
  font-family: Georgia, serif;
  font-size: 13px;
  color: red;
  padding-left: 25px;
}

.quote {
  width: 100px;
  font-family: Arial, sans-serif;
  color: white;
  font-size: 18px;
  padding: 5px 15px;
  margin-left: 70px;
  border-left: 5px solid white;
  border-right: 5px solid white;
}

</style>
</head>
<body>
    <p class="quote">"A quote about something, displayed in black."</p>
</body>
</html>

   
    
  








Related examples in the same category

1.Inline quotation
2.q:before {content:open-quote;}
3.q:after {content:close-quote;}
4.q {quotes: '"' '"';}
5.quotes for quote
6.Create quote with float: right
7.Using classes and CSS overrides to create an alternate pull quote
8.Creating pull quotes in CSS
9.Pull Quote with font, border top bottom
10.Center Callout
11.Right Floating Callout
12.'q' Example
13.'cite' provides a URL for reference information to a borrowed quotation