Coding For Dummies
Book image
Explore Book Buy On Amazon

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.

About This Article

This article is from the book:

About the book author:

Nikhil Abraham is the CFO of Udacity, an education company that teaches technology skills that help launch or advance a career. Prior to joining Udacity, Nik worked at Codecademy where he taught beginning coders across a variety of professions. He is also author of Coding For Dummies and Getting a Coding Job For Dummies.

This article can be found in the category: