As a precautionary health measure for our support specialists in light of COVID-19, we're operating with a limited team. Thanks for your patience, as it may take longer than usual to connect with us. For additional support, consult Publisher Center Help Center.

Personalize your RSS article’s styles

Important: This functionality is only available for content sections that have been configured to prefer rendering of articles directly from the feed.

To customize the presentation of your RSS articles in Google News, you can use article templates or CSS options available in Publisher Center.

Customize your articles using CSS

As a publisher, you can use the Article style function to customize the presentation of your RSS articles. To begin the process, follow these steps:

  1. Sign in to Publisher Center.
  2. Select your publication.
  3. Click Google News.
  4. Click Feed articles.
  5. In the CSS input box for your edition, enter the CSS.
  6. To save and preview your changes, click Save and preview.
  7. After you save your CSS, the preview panel on the right displays your style changes.
    • Tip: You can preview your saved styles with the Google News Designer Mode on Android or iOS devices. It might take up to a minute for your style changes to appear in the Designer Mode.
  8. To make the CSS style publicly visible, click Publish.
    • The newly published style reflects in Google News within 2 hours.

Google News HTML

Google News doesn’t serve the exact HTML that publishers use in their feed. When Google News adds publisher-generated articles to its library and turns them into data that its clients can read, it can’t distinguish between certain tags. As a result, Google News will report a syntax error if you style 2 different tags that turn into the same tag. For example, adding styles to both <div> and <p> tags generates a syntax error.

Below are some of the changes that Google News makes to publisher-generated article HTML:

Publisher tag Google News tag
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Allowed element selectors

HTML elements

The Google News Publisher Center supports the following HTML tags:

  • <a>

  • <b> | <strong>

  • <blockquote>

  • <cite> | <small>

  • <del> | <s> | <strike>

  • <div> | <p>

  • <em> | <i>

  • <h1>

  • <h6>

  • <ol>

  • <q>

  • <sub>

  • <sup>

  • <u>

  • <ul>

Important: A ”|” between tags indicates that only one of the tags will be styled due to HTML element changes (see above).

Google News elements

In the Google News Publisher Center, you can use customized Google News elements to style your article. Review the available elements listed below:
Google News element Description Screenshot example
<ns-caption-copyright> Copyright for an image 1
<ns-caption> Caption text beneath an image 2
<ns-edition-name> The publication name header 3
<ns-author-timestamp> The author and time of publication header text 4
<ns-author-timestamp-separator> The dot between the author and the publication time 5
<ns-slideshow-copyright> Copyright beneath slides 6
<ns-slideshow-caption> Captions beneath slides 7
<ns-subtitle> Article subtitle 8
<ns-title> The title text for the news article 9
<ns-header-divider> The divider between the article title and author timestamp 10
<ns-logo> The logo at the top of the article 11

CSS style examples

You can style certain elements of your article in Google News by modifying the CSS as shown in the example below:

CSS Example

/* All links are red. */
a { color: #cc0000; }
/* All article text will be black, horizontally centered, and be on a white background. */
p {
color: #000000;
-ns-block-align: center;
/* Setting background-color on a 'p' tag will set the background of the entire article. */
background-color: #FFFFFF;
/* Font-settings in the 'p' tag become "default" styles overridden by styles rules on other tags. */
font-weight: 300;
font-size: 14sp;
font-style: normal;
vertical-align: baseline;
/* There are Google News-specific elements you can style too! */
ns-title {
font-weight: 700;
text-decoration: underline;
* Styles all tags with the attribute ' class="style-id:firstHeaderOne" ' to have a red text.
* Example affected HTML: <h1 class="style-id:firstHeaderOne">
[style-id="firstHeaderOne"] { color: #cc0000; }
* Section-specific style overrides. Use the section name.
* For example: To make all links grey in the "Top News" section.

a [section="Top News"] { color: #0c0c0c; }
/* Style-id-specific styles can be used in conjunction with section overrides. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* Custom styles can also be written for articles rendered on a tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Google News-specific CSS extensions

Style-id selector

To apply a style to all elements in the style-id:my-style-id class, use a style-id selector instead of an element selector:
[style-id="my-style-id"] { color: #cc0000; }

Section selector

The section selector must be used in conjunction with a style-id or element selector. Use the section selector for section-specific style overrides:

/* Black text on a white background for all sections. */

p { color: #000000; background-color: #FFFFFF; }


* White text on black background for "Top News" section.

* The value after 'section=' must be a valid section name.


p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Device selector

The device selector must be used in conjunction with a style-id or element selector. Use the device selector for device-specific style overrides:

/* Black text on a white background for all devices. */

p { color: #000000; background-color: #FFFFFF; }


* White text on black background for tablet devices.

* This selector may currently only take on the values 'all' and 'tablet'.


p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Allowed property declarations and values

Google News only allows the below 5 categories of CSS property declarations:

About “dp” and “sp.”

Density-independent Pixels (dp) are a unit of measurement used instead of pixels (px) because different devices have different pixel densities. Using dp ensures a style looks the same on devices with different pixel densities.

Scale-independent Pixels (sp) are usually the same as a dp, but also depend on the user's font size settings. If a user increases font size, the size of an sp will also increase.

To learn more about dp and sp, review the Material Design reference guide.

Available block style

Name Values
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone






dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp






dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

Text style

Name Values
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

HR style

Name Values
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Block and text style

Name Values
background-color <hex-color>

Span and HR style

Name Values
color <hex-color>


Do it now in the Publisher Center

Was this helpful?
How can we improve it?
Clear search
Close search
Google apps
Main menu
Search Help Center