CSS for embedded Tweets

An embedded Tweet appears on your page as a <blockquote> with the cited text of a Tweet; this markup is later interpreted by Twitter for Websites code to render a full embedded Tweet. The <blockquote> HTML is available in all rendering environments, including RSS feeds and email updates.

An embedded Tweet’s fallback markup will inherit the CSS rules already applied to <blockquote><p>, and <a>HTML elements on your webpage.

Below is some basic CSS to style an embedded Tweet’s <blockquote> content in a way that more closely resembles its fully-rendered form.

Embedded Tweet fallback markup rendered using custom CSS rules

      blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}
    
Was this document helpful?
Thank you

Thank you for the feedback. We’re really glad we could help!

Thank you for the feedback. How could we improve this document?
Thank you for the feedback. Your comments will help us improve our documents in the future.