Hacking the CSS on Your Favorite Website

By Nikhil Abraham

Here, you modify the Cascading Style Sheets (CSS) on huffingtonpost.com (or your news website of choice) using the Chrome browser. Take a look at how CSS works in the wild. Just follow these steps:

  1. Using a Chrome browser, navigate to your favorite news website, ideally one with many headlines.

    image0.jpg

  2. Place your mouse pointer over a headline, right-click, and from the menu that appears select Inspect Element.

    A window opens at the bottom of your browser.

  3. Click the Style tab on the right side of this window to see the CSS rules being applied to HTML elements.

    image1.jpg

  4. Change the color of the headline using CSS.

    To do this, first find the color property in the element.style section; note the square color box within that property that displays a sample of the current color. Click on this box and change the value by selecting a new color from the pop-up menu, and then press Enter.

    Your headline now appears in the color you picked.

    image2.jpg

    If the element.style section is blank and no color property appears, you can still add it manually. To do so, click once in the element.style section, and when the blinking cursor appears, type color: purple. The headline changes to purple.

As with HTML, you can modify any website’s CSS using Chrome’s Inspect Element feature, also known as Developer Tools. Most modern browsers, including Firefox, Safari, and Opera, have a similar feature.